Что означает == $ 0 (двойное значение равно нулю доллара) в Chrome Developer Tools?

310

В инструментах разработчика Google Chrome, когда я выбираю элемент, я вижу ==$0рядом с выбранным элементом. Что это значит?

google-chrome google-chrome-devtools code-inspection

— oneNiceFriend
источник

28

Это выбранный идентификатор узла DOM. попробуйте выбрать любой узел и написать $0в консоли и посмотреть, что произойдет;)

— тупик

33

Это очень запутанно. Похоже, кто-то написал какой-то javascript, который они забыли вставить в тег скрипта. Я потратил добрых десять минут, пытаясь выяснить, где я испортил свой код ...

— Кип

2

проверьте следующее developer.chrome.com/devtools/docs/commandline-api#0-4

— Мукеш

2

Я думаю, что только другой цвет фона в нажатой строке должен быть достаточным ... Я не вижу необходимости добавлять == $ 0 к источнику HTML ... Плохая идея. Chrome doind Chrome-ish материал.

— Серхио Абреу

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

— Pacerier,

286

Это последний выбранный индекс узла DOM. Chrome назначает индекс каждому выбранному вами узлу DOM. Так $0что всегда будет указывать на последний узел, который вы выбрали, в то время как $1будет указывать на узел, который вы выбрали до этого. Думайте об этом как о стеке самых последних выбранных узлов.

В качестве примера рассмотрим следующее

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

Теперь вы открыли консоль devtools и выбрали #sunday, #mondayи #tuesdayв указанном порядке вы получите идентификаторы:

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

Примечание. Может быть полезно знать, что узел выбирается в ваших сценариях (или консоли), например, одним из популярных способов использования этого является угловой элемент выбора, так что вы можете просто выбрать свой узел и запустить это:

angular.element($0).scope()

Вуаля, вы получили доступ к области видимости узла через консоль.

— тупик
источник

9

Какая польза / польза от этого?

— joe_young

6

Я считаю, что это может быть полезно при отладке. Возможность доступа к проверяемому элементу с помощью простого селектора может помочь во многих ситуациях во время отладки.

— тупик

6

Так что хорошего всегда показывает == $0в пользовательском интерфейсе? Любой, кто знает об $0этом, уже знает, какой это элемент, и это бессмысленно для тех, кто этого не знает.

— BlueRaja - Дэнни Пфлугхофт

6

@joe_young, я думаю, что преимущество заключается в возможности быстрого доступа к элементам консоли при настройке. Вот видео, которое я собрал, демонстрирующее это! youtu.be/AKLdx8z6aDk

— RoccoB

1

@LucaDeNardi Да, это вредно в работе, и каждый разработчик Angular добавляет эту строку: - $ compileProvider.debugInfoEnabled (false); в конфигурации их приложения, для повышения производительности. Однако вы можете легко запустить angular.reloadWithDebugInfo (); в консоли для отладки при необходимости.

— Варун Шарма

57

$ 0 возвращает последний выбранный элемент или объект JavaScript, $ 1 возвращает второй последний выбранный элемент и т. Д.

См .: Справочник по API командной строки

— Ани Менон
источник

26

Другие ответы здесь ясно объяснили, что это значит. Мне нравится объяснять его использование.

Вы можете выбрать элемент на elementsвкладке и переключиться на consoleвкладку в Chrome. Просто введите $0 or $1или любой другой номер и нажмите Enter, и элемент будет отображаться в консоли для вашего использования.

— Шива Пракаш
источник

13

Это подсказка Chrome, чтобы сказать вам, что если вы наберете $ 0 на консоли, это будет эквивалентно этому конкретному элементу.

Внутри Chrome поддерживает стек, где $ 0 - выбранный элемент, $ 1 - последний выбранный элемент, $ 2 - тот, который был выбран до $ 1, и так далее.

Вот некоторые из его приложений:

Доступ к элементам DOM из консоли: $ 0
Доступ к их свойствам из консоли: $ 0.parentElement
Обновление их свойств из консоли: $ 1.classList.add (...)
Обновление элементов CSS из консоли: $ 0.styles.backgroundColor = "aqua"
Запуск событий CSS из консоли: $ 0.click ()
И делать намного более сложные вещи, такие как: $ 0.appendChild (document.createElement ("div"))

Смотреть все это в действии:

Заявление о поддержке:

Да, я согласен, что есть более эффективные способы выполнения этих действий, но эта функция может оказаться полезной в некоторых сложных сценариях , например, когда нужно щелкнуть элемент DOM, но это невозможно сделать из пользовательского интерфейса, поскольку он покрыт другие элементы или, по какой-то причине, не видны в пользовательском интерфейсе в этот момент.

— Сагар
источник

2

Я скажу, что это просто сокращенный синтаксис для получения ссылки на элемент html во время отладки, обычно такие задачи будут выполняться этим методом.

document.getElementById , document.getElementsByClassName , document.querySelector

поэтому нажатие на элемент html и получение справочной переменной ($ 0) в консоли - это огромная экономия времени в течение дня

— malbarmavi
источник