• доступно о веб-разработке
09.10.2012 Инструменты

Панель разработки

Мало кто догадывается, что современные браузеры оснащены таким необходимым каждому веб-мастеру инструментом, как панель разработки. Речь в данном материале пойдет преимущественно о самом популярном из них — Google Chrome. Исследовать другие браузеры и их возможности вы можете самостоятельно по аналогии.

В прошлых уроках вы уже научились смотреть код страницы через сочетание горячих клавиш CTRL+U.

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

Поэтому пару лет назад к браузеру FireFox появилось дополнение под название FireBug, которое считалось неотъемлемым инструментом каждого разработчика.

По прошествии времени, вышедший на браузерный пьедестал и воссиявший на нем Google Chome обладал уже схожим встроенным функционалом.

Но что мы все слова, да слова? К делу!

Типичная задача. Вам нужно просмотреть код определенного элемента. Что делать? Как быть? Искать его в полном коде странице по Ctrl+U? Это путь для джедаев.

Нам, простым людям, нужен инструмент понадежнее.

Внимание, фокус.

Просто наводите мышку на любой элемент страницы и нажимаете правой кнопкой. В контекстном меню выбираете «Просмотр кода элемента». Вуаля.

Появляется следующего вида панель:

Вверху панели закладки пунктов меню. Внизу — строка контекстной информации.

А основная часть зависит от выбранного пункта меню.

Всего их семь:

Elements

HTML-структура страницы.  Незаменимая вещь. Вы можете копировать или править код каждого конкретного элемента.

Также можно сразу видеть все стили, которые на элемент влияют, в правой колонке. И, соответственно, править их.

Resources

Здесь вы найдете все ресурсы, то есть хранимые данные. К примеру, файлы cookie, которые хранят ваши настройки на сайтах.

Network

Данная вкладка работает с момента её активации. То есть, если вы хотите проследить какие элементы загрузились с начала загрузки страницы, то сначала активируйте вкладку, а после — перезагружайте страницу.

Также можно посмотреть заголовки всех запросов и отфильтровать их по типу (изображения, скрипты, асинхронная передача данных и так далее).

Sources

Исходники скриптов. Для работы с JavaScript. Можно посмотреть, с каких сайтов какие скрипты загружаются и дополнительно протестировать их.

Timeline

Также как и в случае с Network, здесь необходимо перезагружать страницу. Отображает исполнение разных скриптов в проекции на временную шкалу.

Profiles

Позволяет производить замер скорости выполнения скриптов и другие измерения.

Audits

Аудит страницы подскажет, как можно её оптимизировать.

Console

Консоль для непосредственного исполнения JavaScript. Выводит ошибки. Не все из которых, кстати, являются критичным. Но это отдельная тема для разговора.

Вы можете в это окошко набрать без тегов <script> код, и он сработает по нажатию Enter. Попробуйте.

Итак, задание на этот урок — исследовать панель разработки самостоятельно.

Поделиться

Комментарии Правила дискуссии

Читайте ранее:
Работа над ошибками

Друзья, веб-разработка -- это путь, на котором вам постоянно придется сталкиваться с ошибками. Самые опытные специалисты отличаются преимущественно тем, что...

Закрыть