O console do DevTools permite conhecer o estado dos itens da sua página de maneira específica para esse fim. Avalie qualquer expressão que puder digitar usando uma combinação do seu conhecimento de JavaScript e diversos recursos de apoio.
TL;DR
- Avalie uma expressão apenas digitando-a.
- Selecione elementos usando um dos atalhos.
- Inspecione elementos de DOM e objetos de pilha JavaScript usando
inspect(). - Acesse elementos e objetos selecionados recentemente usando $0 - 4.
Navegar expressões
O console avalia qualquer expressão JavaScript que você fornecer ao pressionar Enter. Conforme você digita uma expressão, são exibidas sugestões de nomes de propriedades; o console também oferece preenchimento automático e de tabulação.
Caso haja várias correspondências, ↑ e ↓ passam por elas. Pressionar → seleciona a sugestão atual. Se houver uma única sugestão, selecione-a com a tecla Tab.
Selecionar elementos
Use os seguintes atalhos para selecionar elementos:
| Atalho & descrição | |
|---|---|
| $() | Retorna o primeiro elemento que corresponde ao seletor de CSS especificado. Atalho para document.querySelector(). |
| $$() | Retorna uma matriz de todos os elementos que correspondem ao seletor de CSS especificado. Alias para document.querySelectorAll(). |
| $x() | Retorna uma matriz de elementos que corresponde ao XPath especificado. |
Exemplos de seleção de destino:
$('code') // Returns the first code element in the document.
$$('figure') // Returns an array of all figure elements in the document.
$x('html/body/p') // Returns an array of all paragraphs in the document body.
Inspecionar elementos de DOM e objetos de pilha JavaScript
A função inspect() aceita um elemento de DOM ou uma referência JavaScript
como parâmetro.
Se você fornecer um elemento de DOM,
o DevTools acessará o painel Elements e exibirá esse elemento.
Se você fornecer uma referência JavaScript,
ele acessará o painel Profile.
Quando esse código é executado no seu console nesta página,
ele captura esse valor e o exibe no painel Elements.
Isso aproveita a propriedade $_
para obter a saída da última expressão avaliada.
$('[data-target="inspecting-dom-elements-example"]')
inspect($_)
Acessar elementos e objetos selecionados recentemente
O console armazena os cinco últimos elementos e objetos usados em variáveis para facilitar o acesso. Use $0 - 4, para acessar esses elementos pelo console. Lembre-se de que computadores começam a contar do 0; isso significa que o item mais recente é $0 e o mais antigo é $4.