Що означає == $ 0 (вдвічі дорівнює нулю долара) в Інструментах для розробників Chrome?

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

— Mukesh

2

Я думаю, що лише іншого кольору фону в натиснутій лінії повинно бути достатньо ... Я не бачу необхідності додавати == $ 0 до джерела html ... Погана ідея. Chrome вказує на 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()

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

— тупик
джерело

9

В чому користь / користь від цього?

— joe_young

6

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

— тупик

6

Отже, що добра завжди відображається == $0в інтерфейсі? Той, хто знає про те $0, вже буде знати, що це за елемент, і це безглуздо для тих, хто цього не робить.

— BlueRaja - Danny Pflughoeft

6

@joe_young, я думаю, що користь - це можливість швидко отримати доступ до елементів консолі під час налаштування речей. Ось відео, яке я зібрав, демонструючи це! youtu.be/AKLdx8z6aDk

— RoccoB

1

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

— Варун Шарма

57

$ 0 повертає нещодавно вибраний елемент або об’єкт JavaScript, $ 1 повертає другий останній обраний елемент тощо.

Посилання: Посилання на API командного рядка

— Ані Менон
джерело

26

Інші відповіді тут чітко пояснювали, що це означає. Я люблю пояснювати його використання.

Ви можете вибрати елемент на elementsвкладці і перейти на consoleвкладку в хромі. Просто введіть $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) у консолі - це величезна економія часу протягом дня

— мальбармаві
джерело