Как оперативно открыть элемент DOM в VSC?

Question

[Darya Shvakh]

Добрый день.
Скажите существует-ли какой-нибудь плагин для VSC который бы помогал ориентироваться в HTML странице в редакторе кода при просмотре её в браузере ?
А именно...
У меня открыта HTML страница в редакторе и она-же отображает в браузере (лайв-релод). Используя панель разработчика (дев толс) я выделяю какой-нибудь объект на странице в браузере. И как мне этот объект ОПЕРАТИВНО найти в редакторе ? Ведь классы могут повторяться ? В идеале какой-нибудь плагин в Хроме, и при нажатии на ПКМ ты просто выбираешь - "открыть элемент DOM в редакторе" ну или что-нибудь похожее?
Может есть какие-нибудь другие решения ?
Спасибо!

Comments

[Алексей Ярков]

И как мне этот объект ОПЕРАТИВНО найти в редакторе?

В теории, наверное, можно, но на практике это геморрой. А если у вас DOM строится силами JS? Что и где искать будем?

[Darya Shvakh]

Алексей Ярков, Добрый день.
Ну - да, если какой-нибудь элемент dom на JS то ни как.
Но большинство структурных элементов dom наверно всё-таки создаются по средствам HTML.)
Спасибо!

Answer 1

[Boris Köln]

"Фарш невозможно провернуть назад, и мясо из котлет не восстановишь..."
HTML/DOM может строиться динамически с помощью различных ЯП (js. php и пр.).

Максимум можно в IDE открыть статичный HTML-файл и переключаться между исходником и предпросмотром.

Comments

[Darya Shvakh]

Boris Korobkov, Добрый день.

"Фарш невозможно провернуть назад, и мясо из котлет не восстановишь..."

Ну-да, это - универсальная константа))

Answer 2

[profesor08]

Если файл статический и не генерируется, то смотришь на имя файла, смотришь на номер строки, а потом открываешь этот файл в редакторе и переходить на тот номер строки. Аналогично происходит и с файлами стилей и скриптов. Хром показывает что и где, а ты открываешь это в редакторе.

Comments

[Darya Shvakh]

profesor08, Добрый день. А где на скриншоте в DOM - номера строк?