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.
Para entrada em linha única, você pode digitar expressões JavaScript no campo na parte inferior do log do console, no prompt >>.
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.
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.
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).
Você pode acessar variáveis definidas na página, variáveis internas como janela e variáveis adicionadas por bibliotecas JavaScript como jQuery:
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.
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.
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.
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.
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.
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:
{{ page("en-US/docs/Tools/Web_Console/Helpers", "The commands") }}