Executar JavaScript no Console

Você pode inserir qualquer expressão JavaScript, instrução ou snippet de código no Console e ele é executado imediatamente e interativamente conforme você digita. Isso é possível porque a ferramenta Console em DevTools é um ambiente REPL . REPL significa Leitura, Avaliação, Impressão e Loop.

O Console:

1. Lê o JavaScript que você digita nele.
2. Avalia seu código.
3. Imprime o resultado de sua 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. 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-lhe foco e pressione Esc para abrir o Console.

3. Clique no Console e 2+2digite , 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 seu JavaScript estiver correto e independentemente de um resultado válido existir.

   

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.

   

Autocompleção para gravar expressões complexas

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

Para tentar a autocompleção 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

Assim como acontece com 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 que você inseriu anteriormente.

Da mesma forma, a autocompleção mantém um histórico dos comandos que você digitou anteriormente. Você pode digitar as primeiras letras de 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.

Edições de várias linhas

Por padrão, o Console só oferece uma linha para gravar sua expressão JavaScript. O código é executado quando você pressiona Enter. A limitação de uma linha pode frustrar você. Para contornar a limitação de 1 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 cinta encaracolada, a próxima linha será recuada automaticamente:

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

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

Para obter os últimos 50 problemas que foram arquivados no repositório Ferramentas de Desenvolvedor do Microsoft Edge para Visual Studio Code GitHub:

1. Em DevTools, abra o Console.

2. Copie e cole o seguinte snippet 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 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. Cole 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 o JavaScript e fazer alguns cálculos rápidos. A potência real é o fato de que você tem acesso ao objeto de janela . Consulte Interagir com o DOM usando o Console.