Вы наверняка слышали о простом, довольно популярном и быстром браузере Google Chrome. Но знаете ли вы, что этот браузер обладает одной очень интересной возможностью, а точнее, целым набором возможностей, скрытых в одном пункте меню?

Итак открываем страничку, которую мы хотим исследовать в браузере и идем в меню (кнопка с гаечным ключом). Там в пункте "Инструменты" есть подпункт "Инструменты разработчика", при нажатии которого текущая страница разделяется горизонтально пополам. И происходит волшебство!...

В нижней части отображается код в виде вложенной и очень наглядной иерархии элементов, причем каждый уровень можно свернуть/развернуть, а при наведении на тег, область в верхней части, где этот тег находится, подсвечивается. Если использовать кнопку с лупой, то можно проделать и обратное: щелкнув по элементу на странице найти его определение в коде. Можно также видеть runtime стиль любого элемента и некоторые другие свойства элементов в панели справа. См картинку ниже (здесь и далее - щелчок для увеличения).



На следующей картинке представлен другой раздел этого инструмента: Ресурсы (предыдущий назывался "Элементы"). Тут можно посмотреть диаграмму-эстафету времени загрузки различных ресурсов страницы (картинки, скрипты, таблицы стилей и прочее) и диаграмму их размеров. Причем элементы диаграмм становятся информативнее при наведении на них курсором мыши.



Также можно посмотреть каждый ресурс детально: его хидеры и содержимое



Также есть средства отладки скриптов, на соответствующей закладке, средство отслеживания событий во времени и прочее. Некоторое представление можно получить по следующим картинкам:

http://mttm.ucoz.ru/images/ChromeAdvance/Pic8.png
http://mttm.ucoz.ru/images/ChromeAdvance/Pic9.png
http://mttm.ucoz.ru/images/ChromeAdvance/PicA.png
http://mttm.ucoz.ru/images/ChromeAdvance/PicB.png
http://mttm.ucoz.ru/images/ChromeAdvance/PicC.png