Was bedeutet == $ 0 (doppelt gleich Dollar null) in Chrome Developer Tools?

310

Wenn ich in den Entwicklertools von Google Chrome ein Element auswähle, wird es ==$0neben dem ausgewählten Element angezeigt. Was bedeutet das?

Bildschirmfoto

google-chrome google-chrome-devtools code-inspection oneNiceFriend
quelle
28
Dies ist die ausgewählte DOM-Knoten-ID. versuche einen beliebigen Knoten auszuwählen und $0in die Konsole zu schreiben und zu sehen, was kommt;)
Deadlock
33
Es ist sehr verwirrend. Es sieht so aus, als hätte jemand Javascript geschrieben, das er vergessen hat, in ein Skript-Tag einzufügen. Ich verbrachte gut zehn Minuten damit, herauszufinden, wo ich meinen Code durcheinander gebracht hatte ...
Kip
2
Überprüfen Sie folgende developer.chrome.com/devtools/docs/commandline-api#0-4
Mukesh
2
Ich denke, dass nur die unterschiedliche Hintergrundfarbe in der angeklickten Zeile ausreichen sollte ... Ich sehe keine Notwendigkeit, == $ 0 zur HTML-Quelle hinzuzufügen ... Schlechte Idee. Chrome doind Chrome-ish Zeug.
Sergio Abreu
developer.google.com/web/tools/chrome-devtools/console/…
Pacerier

Antworten:

286

Dies ist der zuletzt ausgewählte DOM-Knotenindex. Chrome weist jedem ausgewählten DOM-Knoten einen Index zu. Zeigt also $0immer auf den zuletzt ausgewählten Knoten, während er $1auf den zuvor ausgewählten Knoten zeigt. Stellen Sie sich das wie einen Stapel der zuletzt ausgewählten Knoten vor.

Betrachten Sie als Beispiel Folgendes

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

Nun öffnete man die devtools trösten und ausgewählt #sunday, #mondayund #tuesdayin der genannten Reihenfolge, werden Sie ids erhalten wie:

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

Hinweis: Es kann hilfreich sein zu wissen, dass der Knoten in Ihren Skripten (oder in der Konsole) auswählbar ist. Eine beliebte Verwendung hierfür ist beispielsweise die Winkelelementauswahl, sodass Sie einfach Ihren Knoten auswählen und Folgendes ausführen können:

angular.element($0).scope()

Voila Sie haben Zugriff auf den Knotenbereich über die Konsole.

Sackgasse
quelle
9
Was ist der Nutzen / Nutzen davon?
Joe_young
6
Ich glaube, es kann beim Debuggen hilfreich sein. Die Möglichkeit, mit einem einfachen Selektor auf das inspizierte Element zuzugreifen, kann in vielen Situationen beim Debuggen hilfreich sein.
Deadlock
6
Was nützt es also immer == $0in der Benutzeroberfläche zu zeigen? Jeder, der etwas weiß, weiß $0bereits, um welches Element es sich handelt, und es ist für jeden, der es nicht tut, bedeutungslos.
BlueRaja - Danny Pflughoeft
6
@joe_young, ich denke, der Vorteil ist, dass man schnell auf Elemente in der Konsole zugreifen kann, wenn man Dinge optimiert. Hier ist ein Video, das ich zusammengestellt habe, um es zu demonstrieren! youtu.be/AKLdx8z6aDk
RoccoB
1
@LucaDeNardi Ja, es ist schädlich in der Produktion und jeder Angular-Entwickler fügt diese Zeile hinzu: - $ compileProvider.debugInfoEnabled (false); in der Konfiguration ihrer App für eine Leistungssteigerung. Sie können jedoch leicht angle.reloadWithDebugInfo () ausführen. in der Konsole zum Debuggen bei Bedarf.
Varun Sharma
57

$ 0 gibt das zuletzt ausgewählte Element oder JavaScript-Objekt zurück, $ 1 gibt das zuletzt ausgewählte Element zurück und so weiter.

Siehe: Befehlszeilen-API-Referenz

Ani Menon
quelle
26

Die anderen Antworten hier haben klar erklärt, was es bedeutet. Ich möchte seine Verwendung erklären.

Sie können ein Element in der elementsRegisterkarte auswählen und zur consoleRegisterkarte in Chrom wechseln . Geben Sie einfach eine $0 or $1beliebige Zahl ein und drücken Sie die Eingabetaste. Das Element wird in der Konsole angezeigt.

Screenshot von Chrome Dev Tools

Siva Prakash
quelle
13

Dies ist der Hinweis von Chrome, der besagt, dass wenn Sie $ 0 in die Konsole eingeben, dies dem jeweiligen Element entspricht.

Intern verwaltet Chrome einen Stapel, in dem $ 0 das ausgewählte Element ist, $ 1 das zuletzt ausgewählte Element ist, $ 2 dasjenige ist, das vor $ 1 ausgewählt wurde, und so weiter.

Hier sind einige seiner Anwendungen:

  • Zugriff auf DOM-Elemente über die Konsole: $ 0
  • Zugriff auf ihre Eigenschaften über die Konsole: $ 0.parentElement
  • Aktualisieren ihrer Eigenschaften über die Konsole: $ 1.classList.add (...)
  • Aktualisieren von CSS-Elementen über die Konsole: $ 0.styles.backgroundColor = "aqua"
  • Auslösen von CSS-Ereignissen über die Konsole: $ 0.click ()
  • Und viel komplexere Dinge tun, wie: $ 0.appendChild (document.createElement ("div"))

Beobachten Sie dies alles in Aktion:

Geben Sie hier die Bildbeschreibung ein

Hintergrunderklärung:

Ja, ich bin damit einverstanden, dass es bessere Möglichkeiten gibt, diese Aktionen auszuführen. Diese Funktion kann jedoch in bestimmten komplexen Szenarien nützlich sein , z. B. wenn auf ein DOM-Element geklickt werden muss, dies jedoch nicht über die Benutzeroberfläche möglich ist, da es von abgedeckt wird andere Elemente oder aus irgendeinem Grund auf der Benutzeroberfläche derzeit nicht sichtbar.

Sagar
quelle
2

Ich werde sagen, es ist nur eine Kurzsyntax, um die Referenz des HTML-Elements während der Debugging-Zeit abzurufen. Normalerweise wird diese Art von Aufgabe mit dieser Methode ausgeführt

document.getElementById , document.getElementsByClassName , document.querySelector

Wenn Sie also auf ein HTML-Element klicken und eine Referenzvariable ($ 0) in der Konsole abrufen, sparen Sie tagsüber viel Zeit

malbarmavi
quelle