Используйте инструмент «проверять элемент», чтобы сделать глобальную переменную Javascript

Question

В современных браузерах (и Firefox + firebug) вы можете открыть свои инструменты для разработчиков и либо перейти на вкладку HTML/Elements, либо вы можете inspect an element, чтобы получить интерактивный DOM-дисплей.

Здесь вы можете делать кучи полезного материала, и одна вещь, которую мне нужно часто делать, - это манипулировать/взаимодействовать с определенным элементом с помощью Javascript (на вкладке console).

Что я делаю, это использовать интерактивный DOM, чтобы добавить атрибут id, например «bob», а затем сделать все, что мне нужно сделать в консоли, с помощью document.getElementById('bob') (или $('#bob')).

В идеале я хотел бы сделать, это правой кнопкой мыши на элементе и выберите опцию как make JS variable так в console я могу просто использовать переменную bob,
Кто-нибудь знает любой такой скрытая функция/аддон/быстрее метод?

Answer 1

Теперь вы можете использовать переменную $0 в Devtools получить ссылку Dóm до последнего элемента, выбранного в Elements панели.

https://developer.chrome.com/devtools/docs/commandline-api#0-4

_{NB Это работает в Firefox, тоже!}

Answer 2

Используйте контекстное меню XPath в качестве ярлыка. Вот процесс:

• Щелкните правой кнопкой мыши на элементе с вкладки DOM Inspector
• Выберите Copy XPath из контекстного меню
• Селектор Вставить в консоли
• Заключите селектор в одинарные кавычки
• Включить селектор в методе консоли $x() API
• Добавить индекс массива соответствия селектора

• Append требуемое значение свойства/метода

  $x('//*[@id="header"]')[0].innerText