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?

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

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

57

0 USD zwraca ostatnio wybrany element lub obiekt JavaScript, 1 USD zwraca drugi ostatnio wybrany i tak dalej.

Patrz: Dokumentacja interfejsu API wiersza poleceń

— Ani Menon
źródło

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.

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

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