Che cosa significa == $ 0 (il doppio equivale a dollaro zero) in Chrome Developer Tools?

310

Negli strumenti per sviluppatori di Google Chrome, quando seleziono un elemento, vedo ==$0accanto all'elemento selezionato. Cosa significa?

google-chrome google-chrome-devtools code-inspection

— oneNiceFriend
fonte

28

È l'ID nodo DOM selezionato. prova a selezionare qualsiasi nodo e scrivi $0nella console e vedi cosa succede;)

— deadlock

33

È molto confuso. Sembra che qualcuno abbia scritto javascript che si sono dimenticati di inserire un tag di script. Ho trascorso dieci minuti buoni cercando di capire dove avevo sbagliato il mio codice ...

— Kip,

2

controllare seguendo developer.chrome.com/devtools/docs/commandline-api#0-4

— Mukesh

2

Penso che solo il diverso colore di sfondo nella riga selezionata dovrebbe essere sufficiente ... Non vedo la necessità di aggiungere == $ 0 alla fonte HTML ... Cattiva idea. Chrome fa cose di Chrome.

— Sergio Abreu,

developers.google.com/web/tools/chrome-devtools/console/…

— Pacerier

286

È l'ultimo indice nodo DOM selezionato. Chrome assegna un indice a ciascun nodo DOM selezionato. Quindi $0indicherà sempre l'ultimo nodo selezionato, mentre $1indicherà il nodo selezionato prima. Pensalo come uno stack degli ultimi nodi selezionati.

Ad esempio, considerare quanto segue

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

Ora hai aperto la console di devtools e selezionato #sunday, #mondaye #tuesdaynell'ordine indicato, otterrai ID come:

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

Nota: potrebbe essere utile sapere che il nodo è selezionabile nei tuoi script (o console), ad esempio un uso popolare per questo è il selettore di elementi angolari, quindi puoi semplicemente scegliere il tuo nodo ed eseguire questo:

angular.element($0).scope()

Hai ottenuto l'accesso all'ambito del nodo tramite console.

— punto morto
fonte

9

Qual è l'uso / beneficio di questo?

— joe_young,

6

Credo che possa essere utile nel debug. La possibilità di accedere all'elemento ispezionato utilizzando un semplice selettore può aiutare in molte situazioni durante il debug.

— deadlock

6

Quindi a che serve mostrare sempre == $0nell'interfaccia utente? Chiunque sappia $0già saprà quale elemento è, ed è insignificante per chiunque non lo sappia.

— BlueRaja - Danny Pflughoeft,

6

@joe_young, penso che il vantaggio sia poter accedere rapidamente agli elementi della console quando si modificano le cose. Ecco un video che ho messo insieme dimostrandolo! youtu.be/AKLdx8z6aDk

— RoccoB

1

@LucaDeNardi Sì, è dannoso nella produzione e ogni sviluppatore angolare aggiunge questa riga: - $ compileProvider.debugInfoEnabled (false); nella configurazione della loro app, per un aumento delle prestazioni. Tuttavia, puoi facilmente eseguire angular.reloadWithDebugInfo (); in Console per eseguire il debug quando richiesto.

— Varun Sharma,

57

$ 0 restituisce l'elemento o l'oggetto JavaScript selezionato più di recente, $ 1 restituisce il secondo elemento selezionato più di recente e così via.

Consultare: Riferimento API della riga di comando

— Ani Menon
fonte

26

Le altre risposte qui spiegano chiaramente cosa significa. Mi piace spiegarne l'uso.

Puoi selezionare un elemento nella elementsscheda e passare alla consolescheda in Chrome. Basta digitare $0 or $1o qualunque numero e premere invio e l'elemento verrà visualizzato nella console per l'uso.

— Siva Prakash
fonte

13

Questo è il suggerimento di Chrome per dirti che se digiti $ 0 sulla console, sarà equivalente a quell'elemento specifico.

Internamente, Chrome mantiene uno stack, dove $ 0 è l'elemento selezionato, $ 1 è l'elemento che è stato selezionato l'ultima volta, $ 2 sarebbe quello che è stato selezionato prima di $ 1 e così via.

Ecco alcune delle sue applicazioni:

Accesso agli elementi DOM dalla console: $ 0
Accedere alle loro proprietà dalla console: $ 0.parentElement
Aggiornamento delle loro proprietà dalla console: $ 1.classList.add (...)
Aggiornamento degli elementi CSS dalla console: $ 0.styles.backgroundColor = "aqua"
Attivazione di eventi CSS dalla console: $ 0.click ()
E fare cose molto più complesse, come: $ 0.appendChild (document.createElement ("div"))

Guarda tutto questo in azione:

Dichiarazione di supporto:

Sì, sono d'accordo che ci sono modi migliori per eseguire queste azioni, ma questa funzionalità può rivelarsi utile in alcuni scenari complessi , come quando è necessario fare clic su un elemento DOM ma non è possibile farlo dall'interfaccia utente perché è coperto da altri elementi o, per qualche motivo, non sono visibili sull'interfaccia utente in quel momento.

— Sagar
fonte

2

Dirò che è solo una sintassi abbreviata per ottenere il riferimento dell'elemento html durante il tempo di debug, normalmente questo tipo di attività eseguirà con questo metodo

document.getElementById , document.getElementsByClassName , document.querySelector

quindi fare clic su un elemento html e ottenere una variabile di riferimento ($ 0) nella console è un enorme risparmio di tempo durante il giorno

— malbarmavi
fonte