O interpretador de entrada JavaScript

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

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 abrir um arquivo, pressione Ctrl + O (Cmd + O no MacOS). Uma caixa de diálogo de arquivo é aberta para que você possa selecionar o arquivo a ser aberto.
  • Para salvar o conteúdo do painel de edição, pressione Ctrl + S (Cmd + S no MacOS). Uma caixa de diálogo de arquivo é aberta para que você possa especificar o local para salvar.

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:

  • No modo de linha única, use as setas para cima e para baixo.
  • No modo multilinhas, use os ícones e V na barra de ferramentas do painel de edição.

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

The JavaScript command line provided by the Web Console offers a few built-in helper functions that make certain tasks easier.

$(selector, element)

Looks up a CSS selector string selector , returning the first node descended from element that matches. If unspecified, element defaults to document. Equivalent to document.querySelector() or calls the $ function in the page, if it exists.

See the QuerySelector code snippet.

$$(selector, element)
Looks up a CSS selector string selector, returning an array of DOM nodes descended from element that match. If unspecified, element defaults to document. This is like for document.querySelectorAll(), but returns an array instead of a NodeList.
$0
The currently-inspected element in the page.
$_
Stores the result of the last expression executed in the console's command line. For example, if you type "2+2 <enter>", then "$_ <enter>", the console will print 4.
$x(xpath, element, resultType)
Evaluates the XPath xpath expression in the context of element and returns an array of matching nodes. If unspecified, element defaults to document. The resultType parameter specifies the type of result to return; it can be an XPathResult constant, or a corresponding string: "number", "string", "bool", "node", or "nodes"; if not provided, ANY_TYPE is used.
keys()
Given an object, returns a list of the keys (or property names) on that object. This is a shortcut for Object.keys.
values()
Given an object, returns a list of the values on that object; serves as a companion to keys().
clear()
Clears the console output area.
inspect()
Given an object, opens the object inspector for that object.
pprint()
Formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays.
help()Deprecated since Gecko 62
:help
Displays help text. Actually, in a delightful example of recursion, it will bring you to this page.
cd()

Switch JavaScript evaluation context to a different iframe in the page. This helper accepts multiple different ways of identifying the frame to switch to. You can supply any of the following:

  • a selector string that will be passed to document.querySelector to locate the iframe element
  • the iframe element itself
  • the content window inside the iframe

See working with iframes.

copy()
New in Firefox 38. Copy the argument to the clipboard. If the argument is a string, it's copied as-is. If the argument is a DOM node, its outerHTML is copied. Otherwise, JSON.stringify will be called on the argument, and the result will be copied to the clipboard.
clearHistory()
New in Firefox 39. Just like a normal command line, the console command line remembers the commands you've typed. Use this function to clear the console's command history.
:screenshot
New in Firefox 62. Create a screenshot of the current page with the supplied filename. If you don't supply a filename, the image file will be named:

Screen Shot yyy-mm-dd at hh.mm.ss.png

The command has the following optional parameters:
 
Command Type Description
--clipboard boolean When present, this parameter will cause the screenshot to be copied to the clipboard.
--delay number The number of seconds to delay before taking the screenshot.
--dpr number The device pixel ratio to use when taking the screenshot.
--file boolean When present, the screenshot will be saved to a file, even if other options (e.g. --clipboard) are included.
--filename string The name to use in saving the file. The file should have a ".png" extension.
--fullpage boolean If included, the full webpage will be saved. With this parameter, even the parts of the webpage which are outside the current bounds of the window will be included in the screenshot. When used, "-fullpage" will be appended to the file name.
--selector string The CSS query selector for a single element on the page. When supplied, only this element will be included in the screenshot.

Please refer to the Console API for more information about logging from content.