Executar JavaScript na Consola

Pode introduzir qualquer fragmento de código, instrução ou expressão JavaScript na Consola e este é executado de forma imediata e interativa à medida que escreve. Isto é possível porque a ferramenta consola do DevTools é um ambiente DEL (Read–eval–print loop ).

A Consola:

1. Lê o JavaScript que escreve no mesmo.
2. Avalia o código.
3. Imprime o resultado da expressão.
4. Volta ao primeiro passo.

Para introduzir instruções e expressões JavaScript interativamente na Consola:

1. Clique com o botão direito do rato numa página Web e, em seguida, selecione Inspecionar. O DevTools é aberto. Em alternativa, prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS) para abrir diretamente a consola de DevTools.

2. Se necessário, clique em DevTools para o focar e, em seguida, prima Esc para abrir a Consola.

3. Clique na Consola e, em seguida, escreva 2+2, sem premir Enter.

   A Consola apresenta imediatamente o resultado 4 na linha seguinte enquanto escreve. A Eager evaluation funcionalidade ajuda-o a escrever JavaScript válido. A Consola apresenta o resultado enquanto escreve, independentemente de o JavaScript estar correto e independentemente de existir um resultado válido.

   

4. Quando prime Enter, a Consola executa o comando JavaScript (expressão ou instrução), apresenta o resultado e, em seguida, move o cursor para baixo para permitir que introduza o comando JavaScript seguinte.

   

Conclusão automática para escrever expressões complexas

A Consola ajuda-o a escrever JavaScript complexo com a conclusão automática. Esta funcionalidade é uma excelente forma de saber mais sobre os métodos JavaScript que não conhecia anteriormente.

Para tentar a conclusão automática ao escrever expressões de várias partes:

1. Digitar doc.

2. Prima as teclas de seta para realçar document no menu pendente.

3. Prima a Tecla de Tabulação para selecionar document.

4. Digitar .bo.

5. Prima a Tecla de Tabulação para selecionar document.body.

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

   

Histórico da consola

Tal como acontece com muitos outros ambientes de linha de comandos, está disponível um histórico dos comandos que introduziu para reutilização. Prima Seta Para Cima para apresentar os comandos que introduziu anteriormente.

Da mesma forma, a conclusão automática mantém um histórico dos comandos que escreveu anteriormente. Pode escrever as primeiras letras de comandos anteriores e as suas escolhas anteriores aparecem numa caixa de texto.

Além disso, a Consola também oferece bastantes métodos utilitários que facilitam a sua vida. Por exemplo, $_ contém sempre o resultado da última expressão que executou na Consola. Veja Console tool utility functions and selectors (Funções e seletores utilitários da ferramenta consola).

Edições de várias linhas

Por predefinição, a Consola só lhe dá uma linha para escrever a expressão JavaScript. O código é executado quando prime Enter. Para contornar a limitação de uma linha, prima Shift+Enter em vez de Enter.

No exemplo seguinte, o valor apresentado é o resultado de todas as linhas (instruções) executadas por ordem:

Se iniciar uma instrução multilinha na Consola, o bloco de código é automaticamente reconhecido e com avanço. Por exemplo, se iniciar uma instrução de bloco, ao introduzir uma chaveta, a linha seguinte é automaticamente com avanço:

Permitir colar na Consola

Quando tenta colar conteúdo pela primeira vez na ferramenta Consola , em vez de colar, é apresentada uma mensagem: "Aviso: Não cole código na Consola de DevTools que não compreendeu ou que não reviu por si próprio. Isto pode permitir que os atacantes roubem a sua identidade ou assumam o controlo do seu computador. Escreva "permitir colar" abaixo e prima Enter para permitir a colagem."

Este aviso ajuda a evitar ataques de scripting entre sites (self-XSS) a utilizadores finais. Para colar código, primeiro escreva permitir colar na Consola e, em seguida, prima Enter. Em seguida, cole o conteúdo. Em alternativa, inicie o Edge com o sinalizador abaixo.

Colar no editor de fragmentos da ferramenta Origens é semelhante; veja Permitir colar no editor de Fragmentos em Executar fragmentos de JavaScript em qualquer página Web.

Desative os avisos self-XSS ao iniciar o Edge com um sinalizador da linha de comandos

Para impedir os avisos acima e permitir a colagem imediata na ferramenta Consola e no editor de fragmentos da ferramenta Origens , como para testes automatizados, inicie o Microsoft Edge a partir da linha de comandos com o seguinte sinalizador: --unsafely-disable-devtools-self-xss-warnings. O sinalizador aplica-se a uma única sessão do Microsoft Edge.

Por exemplo, no Windows:

Estável do Edge:

"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

Edge Dev:

"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

Pedidos de rede com o nível superior await()

Para além dos seus próprios scripts, a Consola suporta a espera de nível superior para executar JavaScript assíncrono arbitrário no mesmo. Por exemplo, utilize a fetch API sem encapsular a await instrução com uma função assíncrona.

Para obter os últimos 50 problemas que foram arquivados nas Ferramentas de Programação do Microsoft Edge para Visual Studio Code repositório do GitHub:

1. Em DevTools, abra a Consola.

2. Copie e cole o seguinte fragmento 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, uma vez que são apresentadas muitas informações.

3. Opcionalmente, utilize o console.table() método de registo para receber apenas as informações em que está interessado:

   

   Para reutilizar os dados devolvidos a partir de uma expressão, utilize o copy() método utilitário da Consola.

4. Cole o seguinte código. Envia o pedido 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())
   

A Consola é uma excelente forma de praticar JavaScript e de fazer alguns cálculos rápidos. A verdadeira potência é o facto de ter acesso ao objeto de janela . Veja Interagir com o DOM com a Consola.

Confira também

• Interagir com o DOM com a Consola
• Funções e seletores de utilitários da ferramenta de consola

GitHub:

• Proposta ECMAScript: nível superior await
• Ferramentas de Programação do Microsoft Edge para Visual Studio Code

MDN:

• Objeto de janela .

Wikipédia:

• Ciclo de leitura–eval–print (REPL)