Просмотр топографической информации в Chrome

На панели инструментов веб-разработчика Firefox в разделе «Информация» была опция для просмотра топографической информации о странице: что внутри чего. Есть ли способ увидеть это с помощью Chrome Dev Tools?

Я установил панель инструментов веб-разработчика в Chrome, но не вижу способа включить панель инструментов. Затем я нашел кое-что из 2013 года об отключении панелей инструментов Google.

Итак, есть ли способ увидеть, какие элементы находятся внутри каких элементов с помощью Chrome?

Я использую Хром 34.0.

Спасибо


person Steve    schedule 02.05.2014    source источник
comment
Непонятно, что вы имеете в виду под топографической информацией. Вам нужна сама структура DOM (в виде дерева) или ее графическое представление (разметка страницы)?   -  person Alexander Pavlov    schedule 03.05.2014
comment
Я полагаю, что любой подход может сработать. Я хочу иметь возможность сразу увидеть, например, что DIV A и B являются братьями и сестрами внутри DIV C и что DIV C находится внутри DIV D.   -  person Steve    schedule 10.05.2014
comment
@AlexanderPavlov, Firefox предлагает трехмерное представление иерархии DOM, где дочерний элемент отображается поверх родительского элемента. При отображении это топологическая карта, основанная на сложности макета страницы.   -  person William Price    schedule 17.05.2014


Ответы (2)


Расширение Pendule для Chrome имеет Топографический вид, который работает как Firefox.

Снимок экрана Pendule

А что касается расширения веб-разработчика в Chrome, после его установки вы сможете включить его из chrome://extensions/, оно покажет кнопку со значком шестеренки в правом верхнем углу экрана.

person DiegoG    schedule 16.05.2014

Согласно комментарию Уильяма Прайса, имеется в виду то, что когда-то называлось «Tilt» в FireFox. Мы думали сделать то же самое, но поскольку было невозможно правильно отобразить содержимое перекрывающихся элементов (такая же проблема была у IIRC, Tilt), мы отказались от этой идеи. Вместо этого у нас есть панель Layers, на которой отображаются слои компоновки (см. Композиция слоев в инструментах разработчика Chrome).

person Alexander Pavlov    schedule 18.05.2014