Funções e seletores de utilitários da ferramenta de consola
A API de Utilitários da Consola contém uma coleção de variáveis e funções de conveniência para realizar tarefas comuns, tais como:
- Selecionar e inspecionar elementos DOM.
- Apresentar dados num formato legível.
- Parar e iniciar o gerador de perfis.
- Monitorizar eventos DOM.
Estas variáveis e funções só funcionam ao introduzi-las diretamente na Consola de DevTools; não pode utilizar as variáveis e chamar as funções a partir de scripts.
Resumo
Variável ou função | Descrição |
---|---|
Expressão avaliada recentemente: $_ | Devolve o valor da expressão avaliada mais recentemente. |
Elemento ou objeto JavaScript recentemente selecionado: $0-$4 | Devolve um elemento selecionado recentemente ou objeto JavaScript. |
Seletor de consultas: $(selector) | Seletor de consultas; devolve a referência ao primeiro elemento DOM com o seletor CSS especificado, como document.querySelector() . |
Seletor de consultas: $$(seletor, [startNode]) | Seletor de consultas todos; devolve uma matriz de elementos que correspondem ao seletor CSS especificado, como document.querySelectorAll() . |
XPath: $x(caminho, [startNode]) | Devolve uma matriz de elementos DOM que correspondem à expressão XPath especificada. |
clear() | Limpa a consola do histórico. |
copy(object) | Copia uma representação de cadeia do objeto especificado para a área de transferência. |
depurar(função) | Quando a função especificada é chamada, o depurador é invocado e quebra dentro da função no painel Origens. |
dir(objeto) | Apresenta uma listagem em estilo de objeto de todas as propriedades do objeto especificado, como console.dir() . |
dirxml(objeto) | Imprime uma representação XML do objeto especificado, conforme apresentado na ferramenta Elementos , como console.dirxml() . |
inspecionar(objeto/função) | Abre e seleciona o elemento DOM especificado na ferramenta Elementos ou o objeto de área dinâmica para dados JavaScript especificado na ferramenta Memória . |
getEventListeners(objeto) | Devolve os serviços de escuta de eventos que estão registados no objeto especificado. |
chaves(objeto) | Devolve uma matriz que contém os nomes das propriedades que pertencem ao objeto especificado. |
monitor(função) | Regista uma mensagem na consola que indica o nome da função, juntamente com os argumentos transmitidos à função como parte de um pedido. |
monitorEvents(object[, events]) | Quando um dos eventos especificados ocorre no objeto especificado, o objeto de evento é registado na consola. |
profile([name]) | Inicia uma sessão de criação de perfis de CPU javaScript com um nome opcional. |
profileEnd([name]) | Conclui uma sessão de criação de perfis de CPU javaScript e apresenta os resultados na ferramenta Desempenho . |
queryObjects(construtor) | Devolve uma matriz dos objetos que foram criados pelo construtor especificado. |
table(data[, columns]) | Regista dados de objetos, formatados como uma tabela com cabeçalhos de coluna, para o objeto de dados especificado. |
undebug(function) | Para a depuração da função especificada, para que, quando a função for pedida, o depurador deixe de ser invocado. |
unmonitor(função) | Para a monitorização da função especificada. |
unmonitorEvents(object[, events]) | Para a monitorização de eventos para o objeto e eventos especificados. |
valores(objeto) | Devolve uma matriz que contém os valores de todas as propriedades pertencentes ao objeto especificado. |
Expressão avaliada recentemente: $_
$_
devolve o valor da expressão avaliada mais recentemente.
Sintaxe:
$_
Exemplo 1
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Na ferramenta Consola , escreva a expressão
2+2
e, em seguida, prima Enter.A expressão é avaliada e o resultado é apresentado. A
$_
variável também está definida como o resultado da expressão.Escreva
$_
e, em seguida, prima Enter:
Exemplo 2
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Cole o seguinte código na Consola e, em seguida, prima Enter:
["john", "paul", "george", "ringo"]
A expressão avaliada é uma matriz de nomes.
Escreva o seguinte código na Consola e, em seguida, prima Enter:
$_.length
A expressão
$_.length
é avaliada e4
apresentada na Consola porque$_
se refere à expressão avaliada anteriormente, que é a matriz de nomes.$_.length
é o comprimento da matriz de nomes.Escreva o seguinte código na Consola e, em seguida, prima Enter:
$_
$_
refere-se sempre à expressão avaliada anteriormente, que é agora o número 4.
Elemento ou objeto JavaScript recentemente selecionado: $0-$4
$0
, , $1
$2
, $3
e $4
devolvem elementos selecionados recentemente ou objetos JavaScript.
$0
devolve o elemento selecionado mais recentemente ou objeto JavaScript, $1
devolve o segundo mais recentemente selecionado, etc. As $0
variáveis , $1
, $2
, $3
e $4
funcionam como uma referência histórica aos últimos cinco elementos DOM que foram inspecionados na ferramenta Elementos ou aos últimos cinco objetos de área dinâmica para dados JavaScript que foram selecionados na ferramenta Memória .
Sintaxe
$0
Exemplo
Para abrir o DevTools, clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.
Na ferramenta Elementos , selecione um elemento, por exemplo, um
<input>
elemento.Abra a ferramenta Consola no painel Vista Rápida , na parte inferior de DevTools.
Escreva
$0
a ferramenta Consola e, em seguida, prima Enter.A
$0
variável devolve o elemento selecionado<input>
:Selecione um elemento diferente na ferramenta Elementos , por exemplo, um
<div>
elemento.Na ferramenta Consola , escreva
$0
e, em seguida, prima Enter.$0
refere-se ao elemento recentemente selecionado, que é o<div>
elemento .Digite
$1
e pressione Enter.$1
refere-se ao elemento selecionado anteriormente, que é o<input>
elemento:
Seletor de consultas: $(selector)
$(selector)
devolve a referência ao primeiro elemento DOM que corresponde ao seletor selector
CSS especificado.
Esta função é semelhante à função document.querySelector( ).
Se estiver a utilizar uma biblioteca como o jQuery que utiliza $
o , a funcionalidade é substituída e $
corresponde à implementação dessa biblioteca.
Sintaxe
$(selector, [parentElement])
Exemplo 1
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Na ferramenta Consola , escreva
$('input')
. É apresentado o primeiro elemento que corresponde aoinput
seletor CSS:Clique com o botão direito do rato no resultado devolvido e, em seguida, selecione Revelar no Painel de Elementos para encontrá-lo no DOM ou Desloque-se para Ver para o mostrar na página.
Exemplo 2
A $()
função aceita um segundo parâmetro, parentElement
, que especifica um elemento principal no qual procurar. O valor predefinido do parâmetro é document
, o que significa que toda a página Web é pesquisada por predefinição. Ao especificar um elemento principal, pode procurar elementos numa parte específica da página Web.
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Na ferramenta Consola , escreva
$('input', $('ul'))
O primeiro elemento que corresponde ao
input
seletor CSS encontrado no primeiroul
elemento é novamente utilizado:
Seletor de consultas: $$(seletor, [startNode])
$$()
devolve uma lista de elementos que correspondem ao seletor CSS especificado, como document.querySelectorAll()
.
Esta função é semelhante a document.querySelectorAll(), mas devolve um array
elemento, em vez de um NodeList
.
Sintaxe
$$(selector, [parentElement])
Exemplo 1
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Na ferramenta Consola , escreva
$$('button')
. São apresentados todos os<button>
elementos na página Web:
Exemplo 2
Esta $$()
função também suporta um segundo parâmetro, parentElement
, que especifica um elemento principal no qual procurar. O valor predefinido do parâmetro é document
, o que significa que toda a página Web é pesquisada por predefinição. Ao especificar um elemento principal, pode procurar elementos numa parte específica da página Web.
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Na ferramenta Consola , escreva
$$('button', $('li.task'))
. São apresentados todos os<button>
elementos descendentes do primeiro<li class="task">
elemento:
XPath: $x(caminho, [startNode])
$x(path)
devolve uma matriz de elementos DOM que correspondem à expressão path
XPath especificada.
Sintaxe
$x(path, [parentElement])
Exemplo 1
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Na ferramenta Consola , escreva
$x("//li")
. São apresentados todos os<li>
elementos na página Web:
Exemplo 2
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Na ferramenta Consola , escreva
$x("//li[button]")
. São apresentados todos os<li>
elementos que contêm<button>
elementos:
Semelhante aos outros comandos do seletor, $x(path)
tem um segundo parâmetro opcional, parentElement
, que especifica um elemento ou nó no qual procurar elementos.
clear()
clear()
limpa a consola do histórico.
Sintaxe
clear()
Exemplo
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Para criar o histórico na ferramenta Consola , introduza várias expressões JavaScript. Por exemplo:
for (let i = 0; i < 10; i++) { console.log(i); }
Para limpar o histórico, escreva
clear()
na ferramenta Consola e, em seguida, prima Enter:
copy(object)
copy(object)
copia uma representação de cadeia do objeto especificado para a área de transferência.
Sintaxe
copy(object)
Exemplo
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Introduza o seguinte código na ferramenta Consola e, em seguida, prima Enter:
copy($$('*').map(element => element.tagName));
O fragmento de código seleciona todos os elementos na página Web com a
$$(selector)
função e, em seguida, mapeia atagName
propriedade de cada elemento para uma matriz. Em seguida, a matriz é copiada para a área de transferência com acopy()
função .Cole o conteúdo da área de transferência num editor de texto. O conteúdo da área de transferência é uma lista de todas as etiquetas HTML na página Web, por exemplo:
["HTML", "HEAD", "META", "TITLE", "LINK", "BODY", "H1", "FORM", "DIV", "LABEL", ...]
depurar(função)
debug(function)
coloca em pausa dentro da função function
especificada na ferramenta Origens , quando essa função é chamada.
Depois de o depurador estar em pausa, pode percorrer o código e depurá-lo.
Sintaxe
debug(function)
Exemplo
Abra um novo separador ou janela e, em seguida, aceda a uma página que contém uma função JavaScript que pretende depurar. Por exemplo, aceda à página de demonstração da aplicação TODO .
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Na ferramenta Consola , escreva
debug(updateList)
.Na página Web composta, adicione um novo item TODO à lista ao escrever teste no campo Adicionar um texto de tarefa e, em seguida, premir Enter.
O depurador é colocado em pausa dentro da
updateList()
função na ferramenta Origens :
Utilize undebug(function)
para parar a interrupção da função ou utilize a IU para desativar todos os pontos de interrupção.
Para obter mais informações sobre pontos de interrupção, consulte Colocar o código em pausa com pontos de interrupção.
dir(objeto)
dir(object)
apresenta 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
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Na ferramenta Consola , introduza
document.head
e, em seguida, prima Enter.É apresentada uma representação HTML do
<head>
elemento.Introduza
dir(document.head)
e, em seguida, prima Enter.É apresentada uma listagem de estilo de objeto de todas as propriedades do
<head>
elemento:
Para obter mais informações, veja console.dir() na API da Consola.
dirxml(objeto)
dirxml(object)
imprime uma representação XML do objeto especificado, conforme apresentado na ferramenta Elementos , como console.dirxml()
.
Esta 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 Origens .
- Para um elemento DOM, esta função é aberta e seleciona o elemento DOM especificado na ferramenta Elementos .
- Para uma função JavaScript, esta função abre a função JavaScript especificada na ferramenta Origens .
Sintaxe
inspect(element/function)
Exemplo
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Na ferramenta Consola , introduza
inspect(document.body)
e, em seguida, prima Enter.A ferramenta Elementos é aberta e o
<body>
elemento está selecionado:
Ao transmitir uma função para inspecionar, a função abre a página Web na ferramenta Origens para que possa inspecionar.
getEventListeners(objeto)
getEventListeners(object)
devolve os serviços de escuta de eventos que estão registados no objeto especificado.
O valor devolvido é um objeto que contém uma matriz para cada tipo de evento registado (como click
ou keydown
). Os itens em cada matriz são objetos que descrevem o serviço de escuta registado para cada tipo.
Sintaxe
getEventListeners(object)
Exemplo
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Na ferramenta Consola , introduza
getEventListeners($('form'))
e, em seguida, prima Enter.São apresentados os serviços de escuta de eventos registados no primeiro
<form>
elemento:
Se estiver registado mais do que um serviço de escuta no objeto especificado, a matriz contém um membro para cada serviço de escuta. Na figura seguinte, são registados dois serviços de escuta de eventos no document
elemento do click
evento:
chaves(objeto)
keys(object)
devolve uma matriz que contém os nomes das propriedades que pertencem ao objeto especificado.
Para obter os valores associados das mesmas propriedades, veja valores(objeto), abaixo.
Sintaxe
keys(object)
Exemplo
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Na ferramenta Consola , introduza o seguinte código e, em seguida, prima Enter:
var player1 = {"name": "Ted", "level": 42}
O fragmento de código acima define um objeto no espaço de nomes global com o nome
player1
, que contém duas propriedades.Para obter os nomes das propriedades que pertencem ao
player1
objeto, introduzakeys(player1)
na ferramenta Consola e, em seguida, prima Enter:Para obter os valores das propriedades que pertencem ao
player1
objeto, introduzavalues(player1)
na ferramenta Consola e, em seguida, prima Enter:
monitor(função)
monitor(function)
regista uma mensagem na consola sempre que a função especificada é chamada. A mensagem indica o nome da função e os argumentos transmitidos à função.
Sintaxe
monitor(function)
Exemplo
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Na ferramenta Consola , introduza o seguinte código e, em seguida, prima Enter:
function sum(x, y) { return x + y; }
O fragmento de código acima define uma função chamada
sum
, que aceita dois argumentos.Para iniciar a monitorização da
sum
função, introduzamonitor(sum)
na ferramenta Consola e, em seguida, prima Enter:Para chamar a função, introduza
sum(1, 2)
e prima Enter. É apresentada uma mensagem a indicar que asum
função foi chamada e os argumentos transmitidos à função:
Para terminar a monitorização, utilize unmonitor(function)
.
monitorEvents(object[, events])
monitorEvents(object[, events])
regista um objeto de evento na consola sempre que os eventos especificados ocorrem no objeto especificado.
Pode especificar um único evento para monitorizar, 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 monitorizar um único evento:
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Na ferramenta Consola , introduza o seguinte código e, em seguida, prima Enter:
monitorEvents(window, "resize");
O fragmento de código anterior monitoriza todos os eventos de redimensionamento no objeto de janela.
Redimensione a janela, por exemplo, ao aumentar ou diminuir as DevTools. Os eventos de redimensionamento são apresentados na ferramenta Consola :
Exemplo 2
Para monitorizar vários eventos:
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Na ferramenta Consola , introduza o seguinte código e, em seguida, prima Enter:
monitorEvents(window, ["resize", "scroll"]);
O fragmento de código anterior define uma matriz de nomes de eventos para monitorizar e
resize
eeventsscroll
no objeto de janela.Redimensione a janela, por exemplo, ao torná-la mais curta e, em seguida, desloque-se na página Web composta. Os eventos de redimensionamento e deslocamento são apresentados na ferramenta Consola :
Exemplo 3
Também pode especificar uma coleção de eventos com um dos conjuntos predefinidos de eventos. A tabela seguinte 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 |
"blur", "change", "focus", "reset", "resize", "scroll", "select", "submit", "zoom" |
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Na ferramenta Consola , introduza o seguinte código e, em seguida, prima Enter:
monitorEvents(window, "key");
O fragmento de código anterior monitoriza todos os eventos de teclado no objeto da janela.
Na página Web composta, prima quaisquer teclas. Os eventos de teclado são apresentados na ferramenta Consola :
profile([name])
profile([name])
inicia uma sessão de criação de perfis da CPU javaScript com um nome opcional.
Para concluir o perfil e apresentar os resultados na ferramenta Desempenho , chame profileEnd([name]).
Sintaxe
profile([name])
Exemplo
Abra a página que pretende criar num novo separador ou janela. Por exemplo, aceda à página de demonstração Animação Lenta .
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Para começar a criar perfis, na ferramenta Consola , escreva
profile("My profile)
e, em seguida, prima Enter.Para parar a criação de perfis, depois de passar algum tempo, escreva
profileEnd("My profile")
e, em seguida, prima Enter.Os resultados do perfil são apresentados na ferramenta Desempenho :
Pode criar múltiplos perfis ao mesmo tempo e não é necessário terminar cada perfil por ordem de criação. Por exemplo, o código seguinte cria dois perfis e, em seguida, termina-os na ordem oposta:
profile('A');
profile('B');
profileEnd('B');
profileEnd('A');
profileEnd([name])
profileEnd([name])
conclui uma sessão de criação de perfis de CPU javaScript e apresenta os resultados na ferramenta Desempenho .
Para chamar esta função, tem de executar a função profile([name] ).
Sintaxe
profileEnd([name])
Para obter mais informações, veja profile([name]), acima.
queryObjects(construtor)
queryObjects(constructor)
devolve uma matriz dos objetos que foram criados pelo construtor especificado.
O âmbito de queryObjects()
é o contexto de runtime atualmente selecionado na Consola.
Sintaxe
queryObjects(constructor)
Exemplo
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Para devolver todas as instâncias de elementos HTML, introduza
queryObjects(HTMLElement)
na ferramenta Consola e, em seguida, prima Enter:
Outros exemplos:
- Utilize
queryObjects(Promise)
para devolver todas as instâncias dePromise
objetos se a sua página Web utilizarPromise
objetos. - Utilize
queryObjects(ClassName)
para devolver todas as instâncias da classe se aClassName
sua página Web utilizar classes JavaScript.
table(data[, columns])
table(data[, columns])
regista dados de objetos, formatados como uma tabela com cabeçalhos de coluna, para o objeto de dados especificado.
Esta função é um alias para console.table().
Sintaxe
table(data[, columns])
Exemplo
Para apresentar uma lista de nomes de pessoas como uma tabela, na Consola:
Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS). A ferramenta Consola é aberta em DevTools, junto à página Web.
Introduza o seguinte código na Consola e, em seguida, prima Enter:
var names = { 0: { firstName: "John", lastName: "Smith" }, 1: { firstName: "Jane", lastName: "Doe" } };
O fragmento de código acima define um objeto no espaço de nomes global com o nome
names
, que contém duas propriedades.Para apresentar o
names
objeto como uma tabela, introduzatable(names)
na Consola e, em seguida, prima Enter:
undebug(function)
undebug(function)
para a depuração da função especificada, para que, quando a função for executada, o depurador deixe de ser colocado em pausa na função.
Para obter mais informações, veja depurar(função), acima.
Sintaxe
undebug(function)
unmonitor(função)
unmonitor(function)
interrompe a monitorização da função especificada.
Para obter mais informações, veja monitor(function), acima.
Sintaxe
unmonitor(function)
unmonitorEvents(object[, events])
unmonitorEvents(object[, events])
interrompe a monitorização de eventos para o objeto e eventos especificados.
Para obter mais informações, veja monitorEvents(object[, events]), acima.
Sintaxe
unmonitorEvents(object[, events])
valores(objeto)
values(object)
devolve uma matriz que contém os valores de todas as propriedades pertencentes ao objeto especificado.
Para obter as chaves associadas das mesmas propriedades, veja keys(object), acima.
Sintaxe
values(object)
Exemplo
Veja o exemplo em keys(object), acima.
Confira também
- Referência de funcionalidades da consola
- Referência -
console.*
da API de objeto da consola funções, comoconsole.log()
econsole.error()
.
Observação
Partes desta página são modificações baseadas no trabalho criado e partilhado pela Google e utilizado de acordo com os termos descritos na Licença Internacional Creative Commons Attribution 4.0. A página original é encontrada aqui e é da autoria de Kayce Bascos.
Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.