Execute o JavaScript no Console

Você pode inserir qualquer expressão, instrução ou trecho de código JavaScript no Console e ele será executado imediata e interativamente enquanto você digita. Isso é possível porque a ferramenta Console no DevTools é um ambiente REPL (loop de leitura-avaliação-impressão).

O console:

1. Lê o JavaScript que você digita nele.
2. Avalia seu código.
3. Imprime o resultado da expressão.
4. Volta para a primeira etapa.

Para inserir instruções e expressões JavaScript interativamente no Console:

1. Clique com o botão direito do mouse em uma página da Web e selecione Inspecionar. O DevTools é aberto. Ou pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS) para abrir diretamente o console do DevTools.

2. Se necessário, clique em DevTools para dar foco a ele e pressione Esc para abrir o Console.

3. Clique no Console e digite 2+2, sem pressionar Enter.

   O Console exibe imediatamente o resultado 4 na próxima linha enquanto você digita. O Eager evaluation recurso ajuda você a escrever JavaScript válido. O Console exibe o resultado enquanto você digita, independentemente de o JavaScript estar correto e independentemente de existir um resultado válido.

   

4. Quando você pressiona Enter, o Console executa o comando JavaScript (expressão ou instrução), exibe o resultado e move o cursor para baixo para permitir que você insira o próximo comando JavaScript.

   

Preenchimento automático para escrever expressões complexas

O Console ajuda você a escrever JavaScript complexo usando o preenchimento automático. Esse recurso é uma ótima maneira de aprender sobre métodos JavaScript que você não conhecia antes.

Para tentar o preenchimento automático ao escrever expressões de várias partes:

1. Digitar doc.

2. Pressione as teclas de seta para realçar document no menu suspenso.

3. Pressione Tab para selecionar document.

4. Digitar .bo.

5. Pressione Tab para selecionar document.body.

6. Digite outro . para obter uma grande lista de possíveis propriedades e métodos disponíveis no corpo da página da Web atual.

   

Histórico do console

Como em muitos outros ambientes de linha de comando, um histórico dos comandos inseridos está disponível para reutilização. Pressione Seta para cima para exibir os comandos inseridos anteriormente.

Da mesma forma, o preenchimento automático mantém um histórico dos comandos digitados anteriormente. Você pode digitar as primeiras letras dos comandos anteriores e suas escolhas anteriores aparecem em uma caixa de texto.

Além disso, o console também oferece alguns métodos utilitários que facilitam sua vida. Por exemplo, $_ sempre contém o resultado da última expressão que você executou no Console. Consulte Seletores e funções do utilitário da ferramenta de console.

Edições em várias linhas

Por padrão, o Console fornece apenas uma linha para escrever sua expressão JavaScript. O código é executado quando você pressiona Enter. Para contornar a limitação de uma linha, pressione Shift+Enter em vez de Enter.

No exemplo a seguir, o valor exibido é o resultado de todas as linhas (instruções) executadas em ordem:

Se você iniciar uma instrução de várias linhas no Console, o bloco de código será automaticamente reconhecido e recuado. Por exemplo, se você iniciar uma instrução de bloco, inserindo uma chave, a próxima linha será recuada automaticamente:

Permitir colar no console

Quando você tenta colar conteúdo na ferramenta Console pela primeira vez, em vez de colar, é exibida uma mensagem: "Aviso: não cole código no Console do DevTools que você não entenda ou não tenha revisado. Isso pode permitir que invasores roubem sua identidade ou assumam o controle do seu computador. Digite 'permitir colagem' abaixo e pressione Enter para permitir a colagem."

Esse aviso ajuda a evitar ataques de script entre sites (auto-XSS) em usuários finais. Para colar código, primeiro digite permitir colar no Console e pressione Enter. Em seguida, cole o conteúdo. Ou inicie o Edge com o sinalizador abaixo.

Colar no editor de snippet da ferramenta Fontes é semelhante; consulte Permitir colar no editor de snippet em Executar snippets de JavaScript em qualquer página da Web.

Desabilitar avisos de auto-XSS iniciando o Edge com um sinalizador de linha de comando

Para evitar os avisos acima e permitir imediatamente a colagem na ferramenta Console e no editor de snippet da ferramenta Fontes, como para testes automatizados, inicie o Microsoft Edge a partir da linha de comando, usando o seguinte sinalizador: --unsafely-disable-devtools-self-xss-warnings O sinalizador se aplica a uma única sessão do Microsoft Edge.

Por exemplo, no Windows:

Edge Estável:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Beta:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Beta\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Desenvolvimento do Edge:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Dev\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Canary:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge SxS\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Solicitações de rede usando await() de nível superior

Além de seus próprios scripts, o Console dá suporte ao await de nível superior para executar JavaScript assíncrono arbitrário nele. Por exemplo, use a fetch API sem encapsular a await instrução com uma função assíncrona.

Para obter os últimos 50 problemas que foram arquivados no repositório GitHub do Microsoft Edge Developer Tools for Visual Studio Code:

1. No DevTools, abra o Console.

2. Copie e cole o seguinte trecho de código para obter um objeto que contém 10 entradas:

   await ( await fetch(
   'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1'
   )).json();
   

   

   As 10 entradas são difíceis de reconhecer, pois muitas informações são exibidas.

3. Opcionalmente, use o console.table() método de log para receber apenas as informações nas quais você está interessado:

   

   Para reutilizar os dados retornados de uma expressão, use o copy() método utilitário do console.

4. Colar o código a seguir. Ele envia a solicitação e copia os dados da resposta para a área de transferência:

   copy(await (await fetch(
   'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1'
   )).json())
   

O Console é uma ótima maneira de praticar JavaScript e fazer alguns cálculos rápidos. O verdadeiro poder é o fato de você ter acesso ao objeto da janela . Consulte Interagir com o DOM usando o console.

Confira também

• Interagir com o DOM usando o console
• Seletores e funções do utilitário da ferramenta de console

GitHub:

• Proposta ECMAScript: Nível superior await
• Microsoft Edge Ferramentas de Desenvolvedor para Visual Studio Code

MDN:

• Objeto Window .

Wikipédia:

• Loop de leitura–eval–impressão (REPL)