Co oznacza == 0 USD (podwójne równe zero dolarów) w Narzędziach dla programistów Chrome?

310

W narzędziach programistycznych Google Chrome, gdy wybieram element, widzę go ==$0obok wybranego elementu. Co to znaczy?

Zrzut ekranu

google-chrome google-chrome-devtools code-inspection oneNiceFriend
źródło
28
Jest to wybrany identyfikator węzła DOM. spróbuj wybrać dowolny węzeł i napisz $0w konsoli i zobacz, co się pojawi;)
impas
33
To bardzo mylące. Wygląda na to, że ktoś napisał javascript, o którym zapomniał wstawić tag skryptu. Spędziłem dobre dziesięć minut próbując dowiedzieć się, gdzie popełniłem błąd w moim kodzie ...
Kip
2
sprawdź następujące developer.chrome.com/devtools/docs/commandline-api#0-4
Mukesh
2
Myślę, że powinien wystarczyć tylko inny kolor tła w klikniętej linii ... Nie widzę potrzeby dodawania == 0 $ do źródła HTML ... Zły pomysł. Chrome robi Chrome-ish.
Sergio Abreu,
developers.google.com/web/tools/chrome-devtools/console/…
Pacerier

Odpowiedzi:

286

Jest to ostatni wybrany indeks węzła DOM. Chrome przypisuje indeks do każdego wybranego węzła DOM. $0Zawsze będzie więc wskazywał na ostatni wybrany węzeł, a $1wskazywał na wybrany wcześniej węzeł. Pomyśl o tym jak o stosie ostatnio wybranych węzłów.

Jako przykład rozważ następujące

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

Teraz otworzyłeś konsolę devtools i wybrałeś #sunday, #mondayi #tuesdaywe wspomnianej kolejności otrzymasz id:

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

Uwaga: Przydatna może być informacja, że ​​węzeł jest wybierany w skryptach (lub konsoli), na przykład jednym z popularnych zastosowań do tego jest selektor elementów kątowych, więc możesz po prostu wybrać węzeł i uruchomić to:

angular.element($0).scope()

Voila, masz dostęp do zasięgu węzła za pośrednictwem konsoli.

impas
źródło
9
Jakie jest z tego wykorzystanie / korzyść?
joe_young
6
Uważam, że może to być pomocne w debugowaniu. Możliwość dostępu do kontrolowanego elementu za pomocą prostego selektora może pomóc w wielu sytuacjach podczas debugowania.
impas
6
Więc co zawsze pokazuje się == $0w interfejsie użytkownika? Każdy, kto wie o tym, $0będzie już wiedział, który to element i nie ma to znaczenia dla każdego, kto tego nie wie .
BlueRaja - Danny Pflughoeft
6
@joe_young, myślę, że korzyścią jest szybki dostęp do elementów konsoli podczas poprawiania rzeczy. Oto wideo, które przygotowałem, demonstrując to! youtu.be/AKLdx8z6aDk
RoccoB
1
@LucaDeNardi Tak, jest szkodliwy w produkcji i każdy programista Angular dodaje tę linię: - $ compileProvider.debugInfoEnabled (false); w konfiguracji ich aplikacji, dla zwiększenia wydajności. Jednak możesz łatwo uruchomić angular.reloadWithDebugInfo (); w konsoli do debugowania w razie potrzeby.
Varun Sharma
26

Pozostałe odpowiedzi jasno wyjaśniły, co to znaczy. Lubię wyjaśnić jego użycie.

Możesz wybrać element na elementszakładce i przejść do consolezakładki w chrome. Po prostu wpisz $0 or $1dowolny numer i naciśnij klawisz Enter, a element zostanie wyświetlony w konsoli do użytku.

zrzut ekranu narzędzi chrome dev

Siva Prakash
źródło
13

Jest to wskazówka Chrome, która informuje, że jeśli wpiszesz 0 USD na konsoli, będzie to równoważne z tym konkretnym elementem.

Wewnętrznie Chrome utrzymuje stos, gdzie 0 USD to wybrany element, 1 USD to element, który został ostatnio wybrany, 2 USD to ten, który został wybrany przed 1 USD i tak dalej.

Oto niektóre z jego aplikacji:

  • Dostęp do elementów DOM z konsoli: 0 USD
  • Dostęp do ich właściwości z konsoli: $ 0.parentElement
  • Aktualizacja ich właściwości z konsoli: $ 1.classList.add (...)
  • Aktualizowanie elementów CSS z konsoli: $ 0.styles.backgroundColor = "aqua"
  • Wyzwalanie zdarzeń CSS z konsoli: 0,0 USD kliknij ()
  • I robienie dużo bardziej skomplikowanych rzeczy, takich jak: $ 0.appendChild (document.createElement ("div"))

Zobacz to wszystko w akcji:

wprowadź opis zdjęcia tutaj

Oświadczenie:

Tak, zgadzam się, że są lepsze sposoby wykonywania tych działań, ale ta funkcja może się przydać w niektórych skomplikowanych scenariuszach , na przykład gdy trzeba kliknąć element DOM, ale nie jest to możliwe z poziomu interfejsu użytkownika, ponieważ jest objęty inne elementy lub z jakiegoś powodu nie są widoczne w interfejsie użytkownika w tym momencie.

Sagar
źródło
2

Powiem, że to tylko skrócona składnia, aby uzyskać odwołanie do elementu html podczas debugowania, normalnie tego rodzaju zadania będą wykonywane tą metodą

document.getElementById , document.getElementsByClassName , document.querySelector

więc kliknięcie elementu HTML i uzyskanie w konsoli zmiennej referencyjnej (0 USD) to ogromna oszczędność czasu w ciągu dnia

malbarmavi
źródło