Que signifie == 0 $ (double égal à zéro) dans les outils de développement Chrome?

310

Dans les outils de développement de Google Chrome, lorsque je sélectionne un élément, je vois à ==$0côté de l'élément sélectionné. Qu'est-ce que ça veut dire?

Capture d'écran

google-chrome google-chrome-devtools code-inspection oneNiceFriend
la source
28
Il s'agit de l'ID du nœud DOM sélectionné. essayez de sélectionner n'importe quel nœud et écrivez $0dans la console et voyez ce qui se passe;)
impasse
33
C'est très déroutant. Il semble que quelqu'un ait écrit du javascript qu'il a oublié de mettre dans une balise de script. J'ai passé une bonne dizaine de minutes à essayer de comprendre où j'avais gâché mon code ...
Kip
2
consultez développeur.chrome.com
devtools
2
Je pense que seule la couleur de fond différente dans la ligne cliquée devrait suffire ... Je ne vois pas la nécessité d'ajouter == $ 0 à la source html ... Mauvaise idée. Chrome fait des trucs Chrome-ish.
Sergio Abreu
developers.google.com/web/tools/chrome-devtools/console/…
Pacerier

Réponses:

286

Il s'agit du dernier index de noeud DOM sélectionné. Chrome attribue un index à chaque nœud DOM que vous sélectionnez. Ainsi $0pointera toujours vers le dernier nœud que vous avez sélectionné, tandis que $1pointera vers le nœud que vous avez sélectionné avant cela. Considérez-le comme une pile de nœuds les plus récemment sélectionnés.

À titre d'exemple, considérons les éléments suivants

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

Maintenant, vous avez ouvert la console devtools et sélectionné #sunday, #mondayet #tuesdaydans l'ordre mentionné, vous obtiendrez des identifiants comme:

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

Remarque: Il pourrait être utile de savoir que le nœud est sélectionnable dans vos scripts (ou console), par exemple une utilisation populaire pour cela est le sélecteur d'élément angulaire, vous pouvez donc simplement choisir votre nœud et exécuter ceci:

angular.element($0).scope()

Voila, vous avez accès à la portée du nœud via la console.

impasse
la source
9
Quel est l'utilité / l'avantage de cela?
joe_young
6
Je pense que cela peut être utile pour le débogage. La possibilité d'accéder à l'élément inspecté à l'aide d'un simple sélecteur peut aider dans de nombreuses situations lors du débogage.
impasse
6
Alors, à quoi bon montre toujours == $0dans l'interface utilisateur? Quiconque connaît sait $0déjà de quel élément il s'agit, et cela n'a aucun sens pour quiconque ne le sait pas.
BlueRaja - Danny Pflughoeft
6
@joe_young, je pense que l'avantage est de pouvoir accéder rapidement aux éléments de la console lors des ajustements. Voici une vidéo que j'ai mise en place pour le démontrer! youtu.be/AKLdx8z6aDk
RoccoB
1
@LucaDeNardi Oui, c'est nuisible en production et chaque développeur Angular ajoute cette ligne: - $ compileProvider.debugInfoEnabled (false); dans la configuration de leur application, pour une amélioration des performances. Cependant, vous pouvez facilement exécuter angular.reloadWithDebugInfo (); dans la console pour déboguer si nécessaire.
Varun Sharma
57

$ 0 renvoie le dernier élément ou objet JavaScript sélectionné, $ 1 renvoie le deuxième dernier élément sélectionné, etc.

Voir: Référence de l'API de ligne de commande

Ani Menon
la source
26

Les autres réponses ici expliquent clairement ce que cela signifie. J'aime expliquer son utilisation.

Vous pouvez sélectionner un élément dans l' elementsonglet et passer à l' consoleonglet en chrome. Tapez simplement $0 or $1ou n'importe quel numéro et appuyez sur Entrée et l'élément sera affiché dans la console pour votre usage.

capture d'écran des outils de développement Chrome

Siva Prakash
la source
13

C'est l'indice de Chrome pour vous dire que si vous tapez 0 $ sur la console, ce sera équivalent à cet élément spécifique.

En interne, Chrome gère une pile, où $ 0 est l'élément sélectionné, $ 1 est le dernier élément sélectionné, $ 2 serait celui qui a été sélectionné avant $ 1 et ainsi de suite.

Voici certaines de ses applications:

  • Accès aux éléments DOM à partir de la console: 0 $
  • Accès à leurs propriétés à partir de la console: $ 0.parentElement
  • Mise à jour de leurs propriétés à partir de la console: $ 1.classList.add (...)
  • Mise à jour des éléments CSS depuis la console: $ 0.styles.backgroundColor = "aqua"
  • Déclenchement des événements CSS à partir de la console: $ 0.click ()
  • Et faire des trucs beaucoup plus complexes, comme: $ 0.appendChild (document.createElement ("div"))

Regardez tout cela en action:

entrez la description de l'image ici

Déclaration de soutien:

Oui, je suis d'accord qu'il existe de meilleures façons d'effectuer ces actions, mais cette fonctionnalité peut s'avérer utile dans certains scénarios complexes , comme lorsqu'un élément DOM doit être cliqué, mais il n'est pas possible de le faire à partir de l'interface utilisateur car il est couvert par d'autres éléments ou, pour une raison quelconque, n'est pas visible sur l'interface utilisateur à ce moment.

Sagar
la source
2

Je dirai que c'est juste une syntaxe abrégée pour obtenir la référence de l'élément html pendant le temps de débogage, normalement ce genre de tâche sera exécuté par ces méthodes

document.getElementById , document.getElementsByClassName , document.querySelector

donc cliquer sur un élément html et obtenir une variable de référence ($ 0) dans la console est un énorme gain de temps pendant la journée

malbarmavi
la source