O que significa == $ 0 (o dobro é igual a dólar zero) nas Ferramentas de Desenvolvedor do Chrome?

310

Nas ferramentas de desenvolvedor do Google Chrome, quando seleciono um elemento, vejo ==$0ao lado do elemento selecionado. O que isso significa?

Captura de tela

google-chrome google-chrome-devtools code-inspection oneNiceFriend
fonte
28
É o ID do nó DOM selecionado. tente selecionar qualquer nó e escrever $0no console e ver o que surge;)
impasse
33
É muito confuso. Parece que alguém escreveu algum javascript que esqueceu de colocar em uma tag de script. Passei um bom dez minutos tentando descobrir onde eu tinha foi cancelada no meu código ...
Kip
2
verifique seguinte developer.chrome.com/devtools/docs/commandline-api#0-4
Mukesh
2
Penso que apenas a cor de fundo diferente na linha clicada deve ser suficiente ... Não vejo necessidade de adicionar == $ 0 à fonte html ... Má ideia. Chrome doind Chrome-ish stuff.
Sergio Abreu
developers.google.com/web/tools/chrome-devtools/console/...
Pacerier

Respostas:

286

É o último índice de nó DOM selecionado. O Chrome atribui um índice a cada nó do DOM que você selecionar. Portanto $0, sempre apontará para o último nó selecionado, enquanto $1apontará para o nó selecionado antes disso. Pense nisso como uma pilha dos nós selecionados mais recentemente.

Como exemplo, considere o seguinte

<div id="sunday"></div>
<div id="monday"></div>
<div id="tuesday"></div>

Agora você abriu as devtools consolar e selecionados #sunday, #mondaye #tuesdayna ordem mencionada, você vai ter ids como:

$0 -> <div id="tuesday"></div> 
$1 -> <div id="monday"></div>
$2 -> <div id="sunday"></div>

Nota: Pode ser útil saber que o nó é selecionável em seus scripts (ou console), por exemplo, um uso popular para isso é o seletor de elemento angular, para que você possa simplesmente escolher seu nó e executar o seguinte:

angular.element($0).scope()

Voila, você tem acesso ao escopo do nó via console.

impasse
fonte
9
Qual é o uso / benefício disso?
9136 joe_young
6
Eu acredito que pode ser útil na depuração. A capacidade de acessar o elemento inspecionado usando um seletor simples pode ajudar em muitas situações durante a depuração.
impasse
6
Então, o que de bom está sempre aparecendo == $0na interface do usuário? Quem conhece $0já sabe qual é o elemento e não faz sentido para quem não conhece.
BlueRaja - Danny Pflughoeft 16/09
6
@joe_young, acho que o benefício é poder acessar rapidamente elementos no console ao ajustar as coisas. Aqui está um vídeo que eu demonstrei! youtu.be/AKLdx8z6aDk
RoccoB
1
@LucaDeNardi Sim, é prejudicial na produção e todo desenvolvedor Angular adiciona esta linha: - $ compileProvider.debugInfoEnabled (false); na configuração do aplicativo, para aumentar o desempenho. No entanto, você pode executar facilmente angular.reloadWithDebugInfo (); no console para depurar quando necessário.
Varun Sharma
57

$ 0 retorna o elemento ou objeto JavaScript selecionado mais recentemente, $ 1 retorna o segundo item selecionado mais recentemente e assim por diante.

Consulte: Referência da API da linha de comandos

Ani Menon
fonte
26

As outras respostas aqui explicaram claramente o que isso significa. Gosto de explicar seu uso.

Você pode selecionar um elemento na elementsguia e alternar para a consoleguia no chrome. Basta digitar $0 or $1ou qualquer número e pressionar enter e o elemento será exibido no console para seu uso.

captura de tela das ferramentas de desenvolvimento do chrome

Siva Prakash
fonte
13

Esta é a dica do Chrome para informar que, se você digitar $ 0 no console, será equivalente a esse elemento específico.

Internamente, o Chrome mantém uma pilha, onde $ 0 é o elemento selecionado, $ 1 é o elemento que foi selecionado pela última vez, $ 2 seria o que foi selecionado antes de $ 1 e assim por diante.

Aqui estão algumas de suas aplicações:

  • Acessando elementos DOM no console: $ 0
  • Acessando suas propriedades no console: $ 0.parentElement
  • Atualizando suas propriedades do console: $ 1.classList.add (...)
  • Atualizando elementos CSS do console: $ 0.styles.backgroundColor = "aqua"
  • Acionando eventos CSS do console: $ 0.click ()
  • E fazer coisas muito mais complexas, como: $ 0.appendChild (document.createElement ("div"))

Assista a tudo isso em ação:

insira a descrição da imagem aqui

Declaração de apoio:

Sim, concordo que existem maneiras melhores de executar essas ações, mas esse recurso pode ser útil em certos cenários complexos , como quando um elemento DOM precisa ser clicado, mas não é possível fazê-lo na interface do usuário porque está coberto por outros elementos ou, por algum motivo, não estiver visível na interface do usuário naquele momento.

Sagar
fonte
2

Eu direi que é apenas uma sintaxe abreviada para obter referência do elemento html durante o tempo de depuração, normalmente esse tipo de tarefa será executada por esse método

document.getElementById , document.getElementsByClassName , document.querySelector

então clicar em um elemento html e obter uma variável de referência ($ 0) no console economiza bastante tempo durante o dia

malbarmavi
fonte