345 votes

Que signifie ==$0 (le double équivaut à un dollar zéro) dans Chrome Developer Tools ?

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

Screenshot

33 votes

C'est l'identifiant du nœud DOM sélectionné. Essayez de sélectionner n'importe quel nœud et d'écrire $0 dans la console et voyez ce qui s'affiche ;)

36 votes

C'est très confus. On dirait que quelqu'un a écrit du javascript qu'il a oublié de mettre dans une balise script. J'ai passé dix bonnes minutes à essayer de trouver où je m'étais trompé dans mon code...

2 votes

314voto

deadlock Points 2587

Il s'agit de l'indice du dernier nœud du DOM sélectionné. Chrome attribue un index à chaque nœud du DOM que vous sélectionnez. Ainsi, $0 pointera toujours vers le dernier nœud que vous avez sélectionné, alors que $1 pointera vers le nœud que vous avez sélectionné avant celui-ci. Pensez-y comme à une pile de nœuds sélectionnés le plus récemment.

À titre d'exemple, considérez ce qui suit

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

Maintenant vous avez ouvert la console devtools et sélectionné #sunday , #monday et #tuesday dans l'ordre mentionné, vous obtiendrez des ids comme :

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

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

angular.element($0).scope()

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

11 votes

Quelle en est l'utilité/le bénéfice ?

7 votes

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 être utile dans de nombreuses situations lors du débogage.

8 votes

Alors à quoi bon montrer toujours == $0 dans l'interface utilisateur ? Toute personne qui connaît $0 saura déjà de quel élément il s'agit, et cela n'a aucun sens pour ceux qui ne le savent pas.

59voto

Ani Menon Points 5876

$0 renvoie l'élément ou l'objet JavaScript le plus récemment sélectionné, $1 renvoie le deuxième élément ou objet sélectionné le plus récemment, et ainsi de suite.

Référer : Référence de l'API en ligne de commande

27voto

Siva Prakash Points 2070

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

Vous pouvez sélectionner un élément dans le elements et passer à l'onglet console dans Chrome. Tapez simplement $0 or $1 ou tout autre numéro et appuyez sur la touche Entrée. L'élément sera affiché dans la console pour votre usage.

screenshot of chrome dev tools

17voto

Sagar Points 775

Il s'agit d'une indication de Chrome pour vous dire que si vous tapez $0 sur la console, il sera équivalent à cet élément spécifique.

En interne, Chrome maintient 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 quelques-unes de ses applications :

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

Regardez tout cela en action :

enter image description here

Déclaration de soutien :

Oui, je suis d'accord qu'il y a de meilleures façons d'effectuer ces actions, mais cette fonction peut s'avérer pratique dans certains scénarios complexes. Par exemple, lorsqu'un élément du DOM doit être cliqué mais qu'il n'est pas possible de le faire à partir de l'interface utilisateur parce qu'il est couvert par d'autres éléments ou, pour une raison ou une autre, n'est pas visible sur l'interface à ce moment-là.

3voto

malbarmawi Points 3885

Je dirais que c'est juste une syntaxe raccourcie 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 cette méthode.

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 gain de temps énorme pendant la journée

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X