Seletores e funções do utilitário da ferramenta de console

A API de utilitários do 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 só funcionam inserindo-as diretamente no Console do DevTools; Você não pode usar as variáveis e chamar as funções a partir 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 ou objeto JavaScript selecionado recentemente.
Seletor de consulta: $(seletor) Seletor de consultas; retorna a referência ao primeiro elemento DOM com o seletor CSS especificado, como document.querySelector().
Seletor de consulta all: $$(selector, [startNode]) Seletor de consulta todos; 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 histórico do console.
copy(object) Copia uma representação de cadeia de caracteres do objeto especificado para a área de transferência.
debug(function) Quando a função especificada é chamada, o depurador é invocado e interrompe dentro da função no painel Fontes.
dir(object) Exibe uma listagem de estilo de 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().
inspecionar(objeto/função) Abre e seleciona o elemento DOM especificado na ferramenta Elementos ou o objeto de heap JavaScript especificado na ferramenta Memória .
getEventListeners(object) Retorna os ouvintes de eventos registrados no objeto especificado.
keys(object) Retorna uma matriz que contém os nomes das propriedades pertencentes ao objeto especificado.
monitor(função) 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 de CPU JavaScript com um nome opcional.
profileEnd([name]) Conclui uma sessão de criação de perfil de CPU JavaScript e exibe os resultados na ferramenta Desempenho .
queryObjects(constructor) Retorna uma matriz dos objetos que foram criados pelo construtor especificado.
table(data[, columns]) Registra dados do 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]) Para de monitorar eventos para o objeto e eventos especificados.
values(object) 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 no 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 no 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$3, e $4 retornam elementos selecionados recentemente ou objetos JavaScript.

$0 retorna o elemento ou objeto JavaScript selecionado mais recentemente, $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 para os últimos cinco elementos DOM que foram inspecionados na ferramenta Elementos 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). O DevTools é aberto.

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

  3. Abra a ferramenta Console no painel Visualizaçã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 o 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 no 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 localizá-lo no DOM ou Role para Exibir para mostrá-lo na página.

Exemplo 2

A $() função aceita um segundo parâmetro, parentElement, que 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 no 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 é reexecutado:

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

Seletor de consulta all: $$(selector, [startNode])

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

Esta função é semelhante a document.querySelectorAll() mas retorna um array elemento of, 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 no DevTools, ao lado da página da Web.

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

    O resultado de $$('button')

Exemplo 2

Esta $$() função também suporta um segundo parâmetro, parentElement, que 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 no DevTools, ao lado da página da Web.

  2. Na ferramenta Console , digite $$('button', $('li.task')). Todos os <button> elementos que são 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 no DevTools, ao lado da página da Web.

  2. Na ferramenta Console , digite $x("//li"). Todos os <li> elementos da 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 no 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 de seletor, $x(path) tem um segundo parâmetro opcional, parentElement, que especifica um elemento ou nó no qual procurar elementos.

clear()

clear() limpa o histórico do console.

Sintaxe

clear()

Exemplo

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no 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, digite clear() 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 no 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 trecho de código seleciona todos os elementos na página da Web usando a $$(selector) função e, em seguida, mapeia a tagName propriedade de cada elemento para uma matriz. Em seguida, a matriz é 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", ...]

debug(function)

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á percorrer o código e depurá-lo.

Sintaxe

debug(function)

Exemplo

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

  2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no 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 teste no campo de texto Adicionar uma 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 interromper a interrupção da função ou use 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 de estilo de objeto de todas as propriedades do objeto especificado, como console.dir().

Esta 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 no 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. Enter dir(document.head) e pressione Enter.

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

    Registrar em 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)

inspecionar(objeto/função)

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

  • Para um elemento DOM, esta função abre e seleciona o elemento DOM especificado na ferramenta Elementos .
  • 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 no 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:

    Inspecionando um elemento com inspect()

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 eventos 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 no 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 elemento do documentclick evento:

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

keys(object)

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

Para obter os valores associados das mesmas propriedades, consulte values(object), abaixo.

Sintaxe

keys(object)

Exemplo

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no 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 trecho 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 keys()

  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(função)

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 no 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 trecho 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, Enter 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 a ser monitorado, 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 no DevTools, ao lado da página da Web.

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

    monitorEvents(window, "resize");

    O trecho de código anterior monitora todos os eventos de redimensionamento no objeto window.

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

    Monitorando eventos de redimensionamento da janela

Exemplo 2

Para monitorar vários eventos:

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no 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 trecho de código anterior define uma matriz de nomes de eventos para monitorar eventos resize e scroll eventos no objeto window.

  3. Redimensione a janela, por exemplo, tornando-a mais curta e, em seguida, role na página da Web renderizada. Os 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 eventos 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 "desfocar", "alterar", "focar", "redefinir", "redimensionar", "rolar", "selecionar", "enviar", "ampliar"

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

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

    monitorEvents(window, "key");

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

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

    Monitorando eventos-chave

profile([name])

profile([name]) inicia uma sessão de criação de perfil de 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 criar um perfil em uma nova guia ou janela. Por exemplo, vá para a página de demonstração de Animação Lenta .

  2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no 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, 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 é obrigado a encerrar cada perfil na ordem de criação. Por exemplo, o código a seguir cria dois perfis e os encerra na ordem oposta:

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

profileEnd([name])

profileEnd([name]) conclui uma sessão de criação de perfil de 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(constructor)

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

O escopo de é o contexto de tempo de queryObjects() execução selecionado no momento no Console.

Sintaxe

queryObjects(constructor)

Exemplo

  1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no 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]) Registra dados do 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 no 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 trecho 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, enter 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 pause mais na função.

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

Sintaxe

undebug(function)

unmonitor(function)

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

Para obter mais informações, consulte monitor(função) acima.

Sintaxe

unmonitor(function)

unmonitorEvents(object[, events])

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

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

Sintaxe

unmonitorEvents(object[, events])

values(object)

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

Para obter as chaves associadas às mesmas propriedades, consulte keys(object) acima.

Sintaxe

values(object)

Exemplo

Veja o exemplo em keys(object), 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 Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é de autoria de Kayce Basques.

Licença Creative Commons Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.

  • Last updated on