Compartilhar via

Funções e seletores do utilitário de ferramenta de console

  • Artigo

A API de Utilitários de Console contém uma coleção de variáveis de conveniência e funções para executar tarefas comuns, como:

  • Selecionando e inspecionando elementos DOM.
  • Exibindo dados em um formato legível.
  • Parando e iniciando o criador de perfil.
  • Monitorando eventos DOM.

Essas variáveis e funções funcionam apenas inserindo-as diretamente no Console de DevTools; você não pode usar as variáveis e chamar as funções de scripts.

Resumo

Variável ou função Descrição
Expressão avaliada recentemente: $_ Retorna o valor da expressão avaliada mais recentemente.
Elemento selecionado recentemente ou objeto JavaScript: $0-$4 Retorna um elemento selecionado recentemente ou um objeto JavaScript.
Seletor de consulta: $(seletor) Seletor de consulta; retorna a referência ao primeiro elemento DOM com o seletor CSS especificado, como document.querySelector().
Todos os seletores de consulta: $$(seletor, [startNode]) Todos os seletores de consulta; retorna uma matriz de elementos que correspondem ao seletor CSS especificado, como document.querySelectorAll().
XPath: $x(path, [startNode]) Retorna uma matriz de elementos DOM que correspondem à expressão XPath especificada.
clear() Limpa o console de sua história.
copy(object) Copia uma representação de cadeia de caracteres do objeto especificado para a área de transferência.
depuração(função) Quando a função especificada é chamada, o depurador é invocado e quebra dentro da função no painel Fontes.
dir(object) Exibe uma listagem no estilo objeto de todas as propriedades do objeto especificado, como console.dir().
dirxml(object) Imprime uma representação XML do objeto especificado, conforme exibido na ferramenta Elementos , como console.dirxml().
inspeção(objeto/função) Abre e seleciona o elemento DOM especificado na ferramenta Elements ou o objeto de heap JavaScript especificado na ferramenta Memória .
getEventListeners(object) Retorna os ouvintes de evento registrados no objeto especificado.
chaves(objeto) Retorna uma matriz que contém os nomes das propriedades pertencentes ao objeto especificado.
monitor(function) Registra uma mensagem no console que indica o nome da função, juntamente com os argumentos passados para a função como parte de uma solicitação.
monitorEvents(object[, events]) Quando um dos eventos especificados ocorre no objeto especificado, o objeto de evento é registrado no console.
profile([name]) Inicia uma sessão de criação de perfil da CPU JavaScript com um nome opcional.
profileEnd([name]) Conclui uma sessão de criação de perfil da CPU JavaScript e exibe os resultados na ferramenta Desempenho .
queryObjects(construtor) Retorna uma matriz dos objetos que foram criados pelo construtor especificado.
table(data[, columns]) Logs dados de objeto, formatados como uma tabela com títulos de coluna, para o objeto de dados especificado.
undebug(function) Interrompe a depuração da função especificada para que, quando a função for solicitada, o depurador não seja mais invocado.
unmonitor(function) Interrompe o monitoramento da função especificada.
unmonitorEvents(object[, events]) Interrompe o monitoramento de eventos para o objeto e os eventos especificados.
valores(objeto) Retorna uma matriz que contém os valores de todas as propriedades pertencentes ao objeto especificado.

Expressão avaliada recentemente: $_

$_ retorna o valor da expressão avaliada mais recentemente.

Sintaxe:

$_

Exemplo 1

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Na ferramenta Console , digite a expressão 2+2e pressione Enter.

    A expressão é avaliada e o resultado é mostrado. A $_ variável também é definida como o resultado da expressão.

  3. Digite $_e pressione Enter:

    A ferramenta Console mostrando que a variável $_ retorna o resultado da expressão anterior

Exemplo 2

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Cole o seguinte código no Console e pressione Enter:

    ["john", "paul", "george", "ringo"]

    A expressão avaliada é uma matriz de nomes.

  3. Digite o seguinte código no Console e pressione Enter:

    $_.length

    A expressão $_.length é avaliada e 4 é mostrada no Console porque $_ se refere à expressão avaliada anteriormente, que é a matriz de nomes. $_.length é o comprimento da matriz de nomes.

  4. Digite o seguinte código no Console e pressione Enter:

    $_

    $_ sempre se refere à expressão avaliada anteriormente, que agora é o número 4.

    O valor de $_ muda para o valor da expressão avaliada anteriormente

Elemento selecionado recentemente ou objeto JavaScript: $0-$4

$0, $1, $2, e $3$4 retornar elementos selecionados recentemente ou objetos JavaScript.

$0 retorna o elemento selecionado mais recentemente ou objeto JavaScript, $1 retorna o segundo selecionado mais recentemente e assim por diante. As $0variáveis , $1, $2, $3e $4 funcionam como uma referência histórica aos últimos cinco elementos DOM que foram inspecionados dentro da ferramenta Elements ou os últimos cinco objetos de heap JavaScript que foram selecionados na ferramenta Memória .

Sintaxe

$0

Exemplo

  1. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). DevTools é aberto.

  2. Na ferramenta Elementos , selecione um elemento, por exemplo, um <input> elemento.

  3. Abra a ferramenta Console no painel Modo de Exibição Rápida , na parte inferior do DevTools.

  4. Digite $0 na ferramenta Console e pressione Enter.

    A $0 variável retorna o elemento selecionado <input> :

    O resultado da avaliação do comando $0 no Console

  5. Selecione um elemento diferente na ferramenta Elementos , por exemplo, um <div> elemento.

  6. Na ferramenta Console , digite $0e pressione Enter.

    $0 refere-se ao elemento recém-selecionado, que é o <div> elemento.

  7. Digite $1e pressione Enter.

    $1 refere-se ao elemento selecionado anteriormente, que é o <input> elemento:

    O resultado da avaliação dos comandos $0 e $1

Seletor de consulta: $(seletor)

$(selector) retorna a referência ao primeiro elemento DOM que corresponde ao seletor selectorCSS especificado .

Essa função é semelhante à função document.querySelector().

Se você estiver usando uma biblioteca como jQuery que usa $, a funcionalidade será substituída e $ corresponderá à implementação dessa biblioteca.

Sintaxe

$(selector, [parentElement])

Exemplo 1

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Na ferramenta Console , digite $('input'). O primeiro elemento que corresponde ao input seletor CSS é exibido:

    $('input') retorna uma referência ao primeiro elemento na página da Web

  3. Clique com o botão direito do mouse no resultado retornado e selecione Revelar no Painel de Elementos para encontrá-lo no DOM ou Role para Exibir para mostrar na página.

Exemplo 2

A $() função aceita um segundo parâmetro, , parentElementque especifica um elemento pai no qual pesquisar. O valor padrão do parâmetro é document, o que significa que toda a página da Web é pesquisada por padrão. Ao especificar um elemento pai, você pode pesquisar elementos em uma parte específica da página da Web.

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Na ferramenta Console, digite$('input', $('ul'))

    O primeiro elemento que corresponde ao input seletor CSS encontrado no primeiro ul elemento é retrunado:

    O resultado de $('input', $('ul'))

Todos os seletores de consulta: $$(seletor, [startNode])

$$() retorna uma lista de elementos que correspondem ao seletor CSS especificado, como document.querySelectorAll().

Essa função é semelhante a document.querySelectorAll(), mas retorna um array elemento, em vez de um NodeList.

Sintaxe

$$(selector, [parentElement])

Exemplo 1

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Na ferramenta Console , digite $$('button'). Todos os <button> elementos na página da Web são exibidos:

    O resultado de $$('button')

Exemplo 2

Essa $$() função também dá suporte a um segundo parâmetro, , parentElementque especifica um elemento pai no qual pesquisar. O valor padrão do parâmetro é document, o que significa que toda a página da Web é pesquisada por padrão. Ao especificar um elemento pai, você pode pesquisar elementos em uma parte específica da página da Web.

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Na ferramenta Console , digite $$('button', $('li.task')). Todos os <button> elementos descendentes do primeiro <li class="task"> elemento são exibidos:

    O resultado de $$('button', $('li.task'))

XPath: $x(path, [startNode])

$x(path) retorna uma matriz de elementos DOM que correspondem à expressão pathXPath especificada .

Sintaxe

$x(path, [parentElement])

Exemplo 1

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Na ferramenta Console , digite $x("//li"). Todos os <li> elementos na página da Web são exibidos:

    Usando um seletor XPath

Exemplo 2

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Na ferramenta Console , digite $x("//li[button]"). Todos os <li> elementos que contêm <button> elementos são exibidos:

    Usando um seletor XPath mais complicado

Semelhante aos outros comandos seletores, $x(path) tem um segundo parâmetro opcional, parentElement, que especifica um elemento ou nó no qual pesquisar elementos.

clear()

clear() limpa o console de sua história.

Sintaxe

clear()

Exemplo

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Para criar histórico na ferramenta Console , insira várias expressões JavaScript. Por exemplo:

    for (let i = 0; i < 10; i++) {
    console.log(i);
}

  3. Para limpar o histórico, digiteclear() na ferramenta Console e pressione Enter:

    O resultado do comando clear(), o console está vazio e a mensagem

copy(object)

copy(object) copia uma representação de cadeia de caracteres do objeto especificado para a área de transferência.

Sintaxe

copy(object)

Exemplo

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Insira o seguinte código na ferramenta Console e pressione Enter:

    copy($$('*').map(element => element.tagName));

    O snippet de código seleciona todos os elementos na página da Web usando a $$(selector) função e mapeia a tagName propriedade de cada elemento para uma matriz. A matriz é então copiada para a área de transferência usando a copy() função.

  3. Cole o conteúdo da área de transferência em um editor de texto. O conteúdo da área de transferência é uma lista de todas as marcas HTML na página da Web, por exemplo:

    ["HTML", "HEAD", "META", "TITLE", "LINK", "BODY", "H1", "FORM", "DIV", "LABEL", ...]

depuração(função)

debug(function) pausa dentro da função function especificada na ferramenta Fontes , quando essa função é chamada.

Depois que o depurador for pausado, você poderá passar pelo código e depurá-lo.

Sintaxe

debug(function)

Exemplo

  1. Abra uma nova guia ou janela e vá para uma página que contém uma função JavaScript que você deseja depurar. Por exemplo, acesse a página de demonstração de aplicativo TODO .

  2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  3. Na ferramenta Console , digite debug(updateList).

  4. Na página da Web renderizada, adicione um novo item TODO à lista digitando o teste no campo Adicionar um texto de tarefa e pressione Enter.

    O depurador pausa dentro da updateList() função na ferramenta Fontes :

    O depurador pausa dentro da função updateList()

Use undebug(function) para parar de interromper a função ou usar a interface do usuário para desativar todos os pontos de interrupção.

Para obter mais informações sobre pontos de interrupção, consulte Pausar seu código com pontos de interrupção.

dir(object)

dir(object) exibe uma listagem no estilo de objeto de todas as propriedades do objeto especificado, como console.dir().

Essa função é um alias para console.dir().

Sintaxe

dir(object)

Exemplo

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Na ferramenta Console , insira document.head e pressione Enter.

    Uma representação HTML do <head> elemento é exibida.

  3. Insira dir(document.head) e pressione Enter.

    Uma listagem no estilo de objeto de todas as propriedades do <head> elemento é exibida:

    Log 'document.head' com a função 'dir()'

Para obter mais informações, consulte console.dir() na API do Console.

dirxml(object)

dirxml(object) imprime uma representação XML do objeto especificado, conforme exibido na ferramenta Elementos , como console.dirxml().

Essa função é equivalente a console.dirxml().

Sintaxe

dirxml(object)

inspeção(objeto/função)

inspect(element/function) abre e seleciona o elemento DOM especificado na ferramenta Elements ou a função JavaScript especificada na ferramenta Sources .

  • Para um elemento DOM, essa função abre e seleciona o elemento DOM especificado na ferramenta Elements .
  • Para uma função JavaScript, essa função abre a função JavaScript especificada na ferramenta Fontes .

Sintaxe

inspect(element/function)

Exemplo

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Na ferramenta Console , insira inspect(document.body) e pressione Enter.

    A ferramenta Elementos é aberta e o <body> elemento é selecionado:

    Inspecionar um elemento com inspeção()

Ao passar uma função para inspecionar, a função abre a página da Web na ferramenta Fontes para você inspecionar.

getEventListeners(object)

getEventListeners(object) retorna os ouvintes de evento registrados no objeto especificado.

O valor retornado é um objeto que contém uma matriz para cada tipo de evento registrado (como click ou keydown). Os itens em cada matriz são objetos que descrevem o ouvinte registrado para cada tipo.

Sintaxe

getEventListeners(object)

Exemplo

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Na ferramenta Console , insira getEventListeners($('form')) e pressione Enter.

    Os ouvintes de eventos registrados no primeiro <form> elemento são exibidos:

    Saída do uso de getEventListeners(form)

Se mais de um ouvinte estiver registrado no objeto especificado, a matriz conterá um membro para cada ouvinte. Na figura a seguir, dois ouvintes de eventos são registrados no document elemento para o click evento:

Vários ouvintes de eventos registrados no elemento 'document' para o evento 'click'

chaves(objeto)

keys(object) retorna uma matriz que contém os nomes das propriedades pertencentes ao objeto especificado.

Para obter os valores associados das mesmas propriedades, confira valores(objeto), abaixo.

Sintaxe

keys(object)

Exemplo

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Na ferramenta Console , insira o seguinte código e pressione Enter:

    var player1 = {"name": "Ted", "level": 42}

    O snippet de código acima define um objeto no namespace global chamado player1, que contém duas propriedades.

  3. Para obter os nomes das propriedades pertencentes ao player1 objeto, insira keys(player1) na ferramenta Console e pressione Enter:

    O resultado da função chaves()

  4. Para obter os valores das propriedades pertencentes ao player1 objeto, insira values(player1) na ferramenta Console e pressione Enter:

    O resultado da função values()

monitor(function)

monitor(function) registra uma mensagem no console sempre que a função especificada é chamada. A mensagem indica o nome da função e os argumentos passados para a função.

Sintaxe

monitor(function)

Exemplo

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Na ferramenta Console , insira o seguinte código e pressione Enter:

    function sum(x, y) {
  return x + y;
}

    O snippet de código acima define uma função chamada sum, que aceita dois argumentos.

  3. Para começar a monitorar a sum função, insira monitor(sum) na ferramenta Console e pressione Enter:

  4. Para chamar a função, insira sum(1, 2) e pressione Enter. Uma mensagem é exibida, indicando que a sum função foi chamada e os argumentos passados para a função:

    O resultado da função monitor()

Para encerrar o monitoramento, use unmonitor(function).

monitorEvents(object[, events])

monitorEvents(object[, events]) registra um objeto de evento no console sempre que os eventos especificados ocorrem no objeto especificado.

Você pode especificar um único evento para monitorar, uma matriz de eventos ou um dos tipos de eventos genéricos mapeados para uma coleção predefinida de eventos.

Sintaxe

monitorEvents(object[, events])

Exemplo 1

Para monitorar um único evento:

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Na ferramenta Console , insira o seguinte código e pressione Enter:

    monitorEvents(window, "resize");

    O snippet de código anterior monitora todos os eventos de redimensionamento no objeto da janela.

  3. Redimensione a janela, por exemplo, tornando o DevTools maior ou menor. Eventos de redimensionamento aparecem na ferramenta Console :

    Eventos de redimensionamento da janela de monitoramento

Exemplo 2

Para monitorar vários eventos:

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Na ferramenta Console , insira o seguinte código e pressione Enter:

    monitorEvents(window, ["resize", "scroll"]);

    O snippet de código anterior define uma matriz de nomes de evento para monitorar eevents resizescroll no objeto da janela.

  3. Redimensione a janela, por exemplo, tornando-a mais curta e role na página da Web renderizada. Eventos de redimensionamento e rolagem aparecem na ferramenta Console :

    Eventos de redimensionamento e rolagem da janela de monitoramento

Exemplo 3

Você também pode especificar uma coleção de eventos usando um dos conjuntos predefinidos de eventos. A tabela a seguir mostra os tipos de evento disponíveis e os mapeamentos de eventos associados:

Tipo de evento Eventos mapeados correspondentes
mouse "click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "mousewheel"
key "keydown", "keypress", "keyup", "textInput"
touch "touchcancel", "touchend", "touchmove", "touchstart"
control "blur", "change", "focus", "reset", "resize", "scroll", "select", "submit", "zoom"

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Na ferramenta Console , insira o seguinte código e pressione Enter:

    monitorEvents(window, "key");

    O snippet de código anterior monitora todos os eventos de teclado no objeto da janela.

  3. Na página da Web renderizada, pressione todas as chaves. Os eventos de teclado aparecem na ferramenta Console :

    Monitoramento dos principais eventos

profile([name])

profile([name]) inicia uma sessão de criação de perfil da CPU JavaScript com um nome opcional.

Para concluir o perfil e exibir os resultados na ferramenta Desempenho , chame profileEnd([name]).

Sintaxe

profile([name])

Exemplo

  1. Abra a página que você deseja perfilar em uma nova guia ou janela. Por exemplo, acesse a página de demonstração animação lenta .

  2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  3. Para iniciar a criação de perfil, na ferramenta Console , digite profile("My profile)e pressione Enter.

  4. Para interromper a criação de perfil, depois de algum tempo passar, digite profileEnd("My profile")e pressione Enter.

    Os resultados do perfil aparecem na ferramenta Desempenho :

    O resultado da função profile()

Você pode criar vários perfis ao mesmo tempo e não é necessário terminar cada perfil na ordem de criação. Por exemplo, o código a seguir cria dois perfis e os termina na ordem oposta:

profile('A');
profile('B');
profileEnd('B');
profileEnd('A');

profileEnd([name])

profileEnd([name]) conclui uma sessão de criação de perfil da CPU JavaScript e exibe os resultados na ferramenta Desempenho .

Para chamar essa função, você deve estar executando a função profile([name]).

Sintaxe

profileEnd([name])

Para obter mais informações, consulte profile([name]), acima.

queryObjects(construtor)

queryObjects(constructor) retorna uma matriz dos objetos que foram criados pelo construtor especificado.

O escopo do queryObjects() é o contexto de runtime selecionado atualmente no Console.

Sintaxe

queryObjects(constructor)

Exemplo

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Para retornar todas as instâncias de elementos HTML, insira queryObjects(HTMLElement) na ferramenta Console e pressione Enter:

    O resultado da função queryObjects()

Outros exemplos:

  • Use queryObjects(Promise) para retornar todas as instâncias de Promise objetos se sua página da Web usar Promise objetos.
  • Use queryObjects(ClassName) para retornar todas as instâncias da classe se sua ClassName página da Web usar classes JavaScript.

table(data[, columns])

table(data[, columns]) logs dados de objeto, formatados como uma tabela com títulos de coluna, para o objeto de dados especificado.

Essa função é um alias para console.table().

Sintaxe

table(data[, columns])

Exemplo

Para exibir uma lista de nomes de pessoas como uma tabela, no Console:

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta em DevTools, ao lado da página da Web.

  2. Insira o seguinte código no Console e pressione Enter:

    var names = {
  0: {
    firstName: "John",
    lastName: "Smith"
  },
  1:  {
    firstName: "Jane",
    lastName: "Doe"
  }
};

    O snippet de código acima define um objeto no namespace global chamado names, que contém duas propriedades.

  3. Para exibir o names objeto como uma tabela, insira table(names) no Console e pressione Enter:

    O resultado da função table()

undebug(function)

undebug(function) interrompe a depuração da função especificada para que, quando a função for executada, o depurador não faça mais pausas na função.

Para obter mais informações, confira depuração(função), acima.

Sintaxe

undebug(function)

unmonitor(function)

unmonitor(function) interrompe o monitoramento da função especificada.

Para obter mais informações, consulte monitor(function), acima.

Sintaxe

unmonitor(function)

unmonitorEvents(object[, events])

unmonitorEvents(object[, events]) interrompe eventos de monitoramento para o objeto e eventos especificados.

Para obter mais informações, consulte monitorEvents(object[, events]), acima.

Sintaxe

unmonitorEvents(object[, events])

valores(objeto)

values(object) retorna uma matriz que contém os valores de todas as propriedades pertencentes ao objeto especificado.

Para obter as chaves associadas das mesmas propriedades, consulte chaves(objeto), acima.

Sintaxe

values(object)

Exemplo

Consulte o exemplo em chaves(objeto), acima.

Confira também

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Internacional de Atribuição do Creative Commons 4.0. A página original é encontrada aqui e é de autoria de Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Licença Creative Commons Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.