Что означает == $ 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 (); в консоли для отладки при необходимости.
Варун Шарма
26

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

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

скриншот инструментов Chrome Dev

Шива Пракаш
источник
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
источник