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?

google-chrome google-chrome-devtools code-inspection

— oneNiceFriend
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

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
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
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.

— Siva Prakash
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:

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
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
source