From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/tools/web_console/helpers/index.html | 55 +++++++ files/pt-br/tools/web_console/index.html | 53 ++++++ .../web_console/opening_the_web_console/index.html | 63 +++++++ .../the_command_line_interpreter/index.html | 183 +++++++++++++++++++++ 4 files changed, 354 insertions(+) create mode 100644 files/pt-br/tools/web_console/helpers/index.html create mode 100644 files/pt-br/tools/web_console/index.html create mode 100644 files/pt-br/tools/web_console/opening_the_web_console/index.html create mode 100644 files/pt-br/tools/web_console/the_command_line_interpreter/index.html (limited to 'files/pt-br/tools/web_console') diff --git a/files/pt-br/tools/web_console/helpers/index.html b/files/pt-br/tools/web_console/helpers/index.html new file mode 100644 index 0000000000..2ef39bc366 --- /dev/null +++ b/files/pt-br/tools/web_console/helpers/index.html @@ -0,0 +1,55 @@ +--- +title: Web Console Helpers +slug: Tools/Web_Console/Helpers +translation_of: Tools/Web_Console/Helpers +--- +
{{ToolsSidebar}}
{{ gecko_minversion_header("2.0") }}
+ +

Os comandos

+ +

A linha de comando JavaScript fornecida pelo Console Web oferece algumas funções auxiliares embutidos que tornam certas tarefas mais fáceis.

+ +
+
$()
+
FX16+ Procura uma seqüência de seletor CSS, retornando o primeiro elemento que corresponda. equivalente a {{ domxref("document.querySelector()") }} ou chama a função de $ na página, se ele existir.
+
FX4 to FX16 Procura uma string como um ID de um nó DOM; este é um atalho para {{ domxref("document.getElementById()") }} ou chama a função de $ na página, se ele existir.
+
$$()
+
Procura uma seqüência de seletor CSS, retornando uma lista de DOM nós que correspondem. Este é um atalho para {{ domxref("document.querySelectorAll()") }}.
+
$0
+
O elemento atualmente inspecionados na página.
+
$x()
+
Avaliar uma expressão XPath e retornar um array de nós correspondentes.
+
keys()
+
Dado um objeto, retorna uma lista de keys (ou nomes de propriedade) no objeto. Este é um atalho para object.keys.
+
values()
+
Dado um objeto, retorna uma lista de valores nesse objeto, serve como um complemento para keys ().
+
clear()
+
Limpa a área de saída do console.
+
inspect()
+
Dado um objeto, abre o inspetor de objeto para aquele objeto.
+
pprint()
+
Formata o valor especificado de forma legível, o que é útil para despejar o conteúdo de objetos e arrays.
+
help()
+
Exibe o texto de ajuda. Na verdade, em um exemplo maravilhoso de recursão, ele vai lhe trazer a esta página.
+
+ +

Exemplos

+ +

Exemplo: Olhando para o conteúdo de um nó DOM

+ +

Digamos que você tem um nó DOM com o ID "título". Na verdade, esta página que você está lendo agora tem um, assim você pode abrir o Web Console e tentar isso agora.
+
+ Vamos dar uma olhada no conteúdo desse nó, usando as funções $() e inspect() :

+ +
inspect($("#title"))
+ +

Isso abre automaticamente o inspetor de objeto, mostrando-lhe o conteúdo do nó DOM que coincide com o CSS selector "# title", que é, claro, o elemento com ID "título".

+ +

Exemplo: despejar o conteúdo de um nó DOM

+ +

Isso é muito bom se acontecer de você estar sentado no navegador exibindo algum problema, mas vamos dizer que você está depurando remotamente para um usuário, e precisa de um olhar para o conteúdo de um nó. Você pode ter seu usuário abrir o Web Console e despejar o conteúdo do nó para o registro, em seguida, copiar e colá-lo em um e-mail para você, utilizando a função pprint ():

+ +
pprint($("#title"))
+
+ +

Este expele o conteúdo do nó para que você possa dar uma olhada. Claro, isso pode ser mais útil com outros objetos do que um nó DOM, mas essa é a idéia.

diff --git a/files/pt-br/tools/web_console/index.html b/files/pt-br/tools/web_console/index.html new file mode 100644 index 0000000000..c657ba96ab --- /dev/null +++ b/files/pt-br/tools/web_console/index.html @@ -0,0 +1,53 @@ +--- +title: Console Web +slug: Tools/Web_Console +tags: + - Ajuda + - Debugging + - Desenvolvimento + - Desenvolvimento Web + - Dicas + - Ferramentas + - Ferramentas Para Desenvolvimento Web + - NeedsTranslation + - Tools + - TopicStub + - Web Development + - 'Web Development:Tools' + - web console +translation_of: Tools/Web_Console +--- +
{{ToolsSidebar}}
+ +

O Web Console

+ +
    +
  1. Registra informações associadas a uma página da internet: solicitações de rede, JavaScript, CSS, erros de segurança e avisos, bem como mensagens de erro, avisos e informações explicitamente registradas pelo código JavaScript em execução na página
    2. +
  2. Permite que você interaja com uma página da web, executando expressões JavaScript na página
    3. +
+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +
+
+
+
Abrindo o Console
+
Como começar a usar o Console.
+
O interpretador de linhas de comando
+
Como interagir com uma página usando o Console.
+
Dividir a página com o Console
+
Use o Console ao lado de outras ferramentas.
+
+
+ +
+
+
Mensagens do Console
+
Detalhes das mensagens de log do Console.
+
Saída detalhada
+
Veja e interaja com os itens registrados pelo Console.
+
Atalhos do teclado
+
Referência para atalhos.
+
+
+
diff --git a/files/pt-br/tools/web_console/opening_the_web_console/index.html b/files/pt-br/tools/web_console/opening_the_web_console/index.html new file mode 100644 index 0000000000..ae0c05f78e --- /dev/null +++ b/files/pt-br/tools/web_console/opening_the_web_console/index.html @@ -0,0 +1,63 @@ +--- +title: Abrindo o Web Console +slug: Tools/Web_Console/Opening_the_Web_Console +tags: + - Ferramentas + - Navegador + - console + - web console +translation_of: Tools/Web_Console/UI_Tour +--- +
{{ToolsSidebar}}
+ +

Para abrir o Web Console:

+ + + +

As Ferramentas vão aparecer na parte inferior da janela do navegador, com o Web Console ativado (é chamado apenas de "Console" nas Ferramentas):

+ +

+ +

A interface do console da Web é dividida em três seções horizontais, detalhadas nas seções abaixo.

+ +

Barra de ferramentas

+ +

A barra de ferramentas na parte superior contém vários recursos:

+ +

Lata de lixo: Clique neste ícone para limpar o conteúdo do console.
+ Funil: Clique neste ícone para filtrar as mensagens exibidas no console.
+ Categorias de filtro: você pode clicar em uma categoria de filtro (como Erros, Avisos, CSS ou XHR) para exibir apenas esses tipos de mensagens.
+ Configurações (menu "engrenagem"): novo no Firefox 71, você pode clicar no ícone de engrenagem para acessar o novo menu de configurações, onde é possível ativar e desativar os seguintes recursos:
+ Persistir logs: quando ativado, o console não limpa na recarga da página ou no carregamento da nova página.
+ Mostrar carimbos de data / hora: quando ativado, os carimbos de hora são mostrados no lado esquerdo de cada linha da mensagem para dizer quando as mensagens foram registradas.
+ Agrupar mensagens semelhantes: quando ativado, tipos semelhantes de mensagens são agrupados.

+ + + +

Painel de exibição de mensagens

+ +

É aqui que as mensagens aparecem, tanto as geradas pelo código na página quanto as geradas pelos comandos inseridos na linha de comandos.

+ +

Consulte Mensagens do console para obter mais detalhes sobre o que as mensagens podem conter.

+ +

        

+ + + + + +

Linha de comando

+ +


+ A linha de comando começa com colchetes de ângulo duplo (>>). Use-o para inserir expressões JavaScript.

+ +

No Firefox 71 em diante, existe um novo ícone de "painel de divisão" no lado direito da linha de comando - clicar nele abrirá o novo modo de várias linhas do console.

diff --git a/files/pt-br/tools/web_console/the_command_line_interpreter/index.html b/files/pt-br/tools/web_console/the_command_line_interpreter/index.html new file mode 100644 index 0000000000..80eb0f4c92 --- /dev/null +++ b/files/pt-br/tools/web_console/the_command_line_interpreter/index.html @@ -0,0 +1,183 @@ +--- +title: O interpretador de entrada JavaScript +slug: Tools/Web_Console/The_command_line_interpreter +translation_of: Tools/Web_Console/The_command_line_interpreter +--- +
{{ToolsSidebar}}
+ +

Você pode interpretar expressões JavaScript em tempo real usando o intérprete fornecido pelo console da web. Possui dois modos: entrada de linha única e entrada de várias linhas.

+ +

Modo linha-simples

+ +

Para entrada em linha única, você pode digitar expressões JavaScript no campo na parte inferior do log do console, no prompt >>.

+ +

The Web Console, showing single-line mode

+ +

Para inserir expressões no modo de linha única, digite no prompt e pressione Enter. Para inserir expressões com várias linhas, pressione Shift + Enter após digitar cada linha e, em seguida, Enter para executar todas as linhas inseridas.

+ +

A expressão digitada é ecoada no prompt de entrada, seguido pelo resultado.

+ +

Se sua entrada não parece estar completa quando você pressiona Enter, o console trata isso como Shift + Enter, permitindo que você termine sua entrada.

+ +

Por exemplo, se você digita:

+ +
function foo() {
+ +

e, em seguida, Enter, o console não executa a entrada imediatamente, mas se comporta como se você tivesse pressionado Shift + Enter, para que você possa terminar de inserir a definição da função.

+ +

Modo linhas-multíplas

+ +

Para entrada em várias linhas, clique no ícone "painel dividido" no lado direito do campo de entrada em linha única ou pressione Ctrl + B (Windows / Linux) ou Cmd + B (macOS). O painel de edição de várias linhas é aberto no lado esquerdo do console da Web.

+ +

Web Console in multi-line mode

+ +

Você pode inserir várias linhas de JavaScript por padrão neste modo, pressionando Enter após cada uma. Para executar o snippet que está atualmente no painel de edição, clique no botão Executar ou pressione Ctrl + Enter (ou Cmd + Return no MacOS). O trecho é ecoado no prompt de entrada (no painel do lado direito), seguido pelo resultado. Você também pode selecionar um intervalo de linhas no painel de edição e executar apenas o código nessas linhas.

+ +

A partir do Firefox 76, se o trecho de código tiver mais de cinco linhas, apenas as cinco primeiras serão ecoadas no console, precedidas por um triângulo de divulgação (ou "twistie") e seguidas de reticências (…). Clique em qualquer lugar na área que contém o código ecoado para mostrar todo o trecho; clique novamente nessa área para recolhê-lo.

+ +

Você pode abrir arquivos no modo de várias linhas e salvar o conteúdo atual do painel de edição em um arquivo.

+ + + +

Para voltar ao modo de linha única, clique no ícone X na parte superior do painel de edição de várias linhas ou pressione Ctrl + B (Windows / Linux) ou Cmd + B (MacOS).

+ +

Acessando variáveis

+ +

Você pode acessar variáveis definidas na página, variáveis internas como janela e variáveis adicionadas por bibliotecas JavaScript como jQuery:

+ +

+ +

Autocomplemento

+ +

O editor foi preenchido automaticamente: insira as primeiras letras e um pop-up aparecerá com possíveis conclusões:

+ +

+ +

Pressione Enter, Tab ou a tecla de seta para a direita para aceitar a sugestão, use as setas para cima / para baixo para ir para uma sugestão diferente ou continue digitando se não gostar de nenhuma das sugestões.

+ +

As sugestões de preenchimento automático do console não diferenciam maiúsculas de minúsculas.

+ +

O console sugere conclusões do escopo do quadro de pilha em execução no momento. Isso significa que, se você atingir um ponto de interrupção em uma função, será preenchido automaticamente para objetos locais para a função.

+ +

Você também recebe sugestões de preenchimento automático para elementos da matriz:

+ +

+ +

Você pode ativar ou desativar o preenchimento automático por meio do menu Configurações ("engrenagem") na barra de ferramentas do console da web. O menu Ativar preenchimento automático tem uma marca de seleção ao lado quando o recurso está ativado, que está ausente quando está desativado. Selecione o menu para alterar o estado.

+ +

Avaliação instantânea

+ +
+

Esse recurso está disponível no Firefox Nightly, nas versões rotuladas 74 e posterior.

+
+ +

Quando o recurso "avaliação instantânea" está ativado, o intérprete exibe os resultados das expressões enquanto você as digita no modo de linha única. Observe que o resultado pode ser uma mensagem de erro. Expressões que têm efeitos colaterais não são avaliadas.

+ +

Você pode ativar ou desativar a avaliação instantânea através do menu Configurações ("engrenagem") na barra de ferramentas do Console da Web. A avaliação instantânea do menuitem tem uma marca de seleção ao lado quando o recurso está ativado, que está ausente quando está desativado. Selecione o menu para alterar o estado.

+ +

Contexto de execução

+ +

O código que você executou se torna parte do contexto de execução, independentemente do modo de edição em que você estava quando o executou. Por exemplo, se você digitar uma definição de função no editor de várias linhas e clicar em Executar, poderá alternar para o modo de linha única e ainda usar sua função.

+ +

Realce de sintaxe

+ +

Console output showing syntax highlighting

+ +

O texto digitado possui uma sintaxe destacada assim que você digitou o suficiente para o marca-texto analisá-lo e inferir o significado das "palavras".

+ +

A saída é destacada também onde apropriado.

+ +
+

Nota: O realce da sintaxe não é visível no seu navegador se os recursos de acessibilidade estiverem ativados.

+
+ +

Histórico de execução

+ +

O intérprete lembra as expressões que você digitou. Para voltar e avançar no seu histórico:

+ + + +

O histórico de expressões é mantido nas sessões. Para limpar o histórico, use a função auxiliar clearHistory ().

+ +

Você pode iniciar uma pesquisa reversa através do histórico de expressões, da mesma forma que no bash no Linux e Mac ou no PowerShell no Windows. No Windows e Linux, pressione F9. No Mac, pressione Ctrl + R (nota: não Cmd + R!) Para iniciar a pesquisa reversa.

+ +

+ +

Digite o texto que deseja pesquisar na caixa de entrada na parte inferior do console. Comece a digitar parte da expressão que você está procurando e a primeira correspondência será exibida no console. Digitar repetidamente F9 no Windows e Linux (Ctrl + R no Mac) alterna entre as correspondências.

+ +

+ +

Depois de iniciar a pesquisa reversa, você pode usar Shift + F9 no Windows ou Linux (Ctrl + S no Mac) para pesquisar na lista de correspondências. Você também pode usar os ícones ⋀ e ⋁ na barra de pesquisa de expressões.

+ +

Quando encontrar a expressão desejada, pressione Enter (Return) para executar a instrução.

+ +

Trabalhando com iframes

+ +

Se uma página contiver iframes incorporados, você poderá usar a função cd () para alterar o escopo do console para um iframe específico e executar as funções definidas no documento hospedado por esse iframe. Existem três maneiras de selecionar um iframe usando cd ():

+ +

Você pode passar o elemento DOM iframe:

+ +
var frame = document.getElementById("frame1");
+cd(frame);
+ +

Você pode passar um seletor CSS que corresponda ao iframe:

+ +
cd("#frame1");
+ +

Você pode passar o objeto de janela global do iframe:

+ +
var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+
+ +

Para alternar o contexto novamente para a janela de nível superior, chame cd () sem argumentos:

+ +
cd();
+ +

Por exemplo, suponha que tenhamos um documento que incorpore um iframe:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
+  </body>
+</html>
+ +

O iframe define uma nova função:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

Você pode alternar o contexto para o iframe assim:

+ +
cd("#frame1");
+ +

Agora você verá que o documento da janela global é o iframe:

+ +

E você pode chamar a função definida no iframe:

+ +

+ +

Comandos auxiliares

+ +

{{ page("en-US/docs/Tools/Web_Console/Helpers", "The commands") }}

-- cgit v1.2.3-54-g00ecf