Инструменты разработчика

Узнайте, что могут дать Вам инструменты разработчика Chrome DevTools и научитесь использовать весь их потенциал.

Из всех компьютерных дисциплин, связанных с программированием, веб-разработка, безусловно, имеет самый низкий порог вхождения. Практически всё, что нужно для создания простой веб-странички – Блокнот и браузер.

Однако, с усложнением вёрстки уследить за изменениями в коде страниц в обычном Блокноте становится всё сложнее и сложнее. По себе знаю, что начинающий веб-разработчик может потратить не один час, просто пытаясь найти в таблице стилей правило для изменения внешнего вида того или иного элемента...

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

Подобие таких инструментов появилось ещё в Internet Explorer. В старой Opera для этих целей использовалась панель Dragonfly и даже имелся собственный встроенный аналог Блокнота с подсветкой кода, что позволяло верстать прямо в среде браузера:

Сегодня от подобной практики отошли и снабдили веб-обозреватели специальными инспекторами кода. Наиболее функциональным инструментарием разработчиков могут похвастаться браузеры на базе движка Chromium, а конкретнее в Google Chrome. На его примере всё и рассмотрим.

Вызов инструментов разработчика и представления страницы

Вызвать инструменты разработчика в Хроме можно несколькими способами:

1. Из основного меню. Кликаем по кнопке меню (три точки в правом верхнем углу окна браузера), наводим курсор на выпадающий список "Дополнительные инструменты" и в нём нажимаем пункт "Инструменты разработчика".
2. Горячими клавишами. Для вызова можно нажать кнопку F12 или комбинацию CTRL+SHIFT+I.
3. Из контекстного меню (наиболее удобно для инспекции конкретных элементов страницы). Нажимаем правой кнопкой мыши по нужному объекту на веб-страничке и выбираем пункт "Просмотреть код" (или "Исследовать элемент" в некоторых более ранних версиях Хрома).

Панель инструментов разработчика представляет собой набор вкладок, на которых размещены те или иные функциональные модули, а также кнопки управления и настройки. Первым делом стоит обратить внимание на общие кнопки. Слева можно найти кнопку выбора элемента страницы и кнопку выбора представления страницы:

Поведение первой мы ещё изучим, а, что касается второй, то она позволяет эмулировать отображение веб-страницы на экране одного из доступных мобильных устройств (например, iPhone) или на дисплее заданного разрешения в пикселях. Всё, что нужно для этого – нажать её и выбрать желаемое устройство:

В правой части также имеется несколько кнопок и индикаторов. Индикаторы отображают количество ошибок (красным) и предупреждений (жёлтым) в работе скриптов. Основной же кнопкой здесь можно назвать меню настроек. Она позволяет изменять привязку самой панели относительно фрейма со страницей, а также включать и отключать дополнительные вкладки с инструментами (раздел "More tools"). По умолчанию она находится внизу под инспектируемой страницей, но её также можно разместить сбоку или даже открепить в отдельное окно:

В меню также есть раздел "Settings", открывающий доступ к многочисленным настройкам инструментов разработчиков. Но для начала они Вам вряд ли понадобятся, поэтому достаточно просто о них знать. А мы рассмотрим основные вкладки с полезными функциями.

Вкладка Elements

По умолчанию Chrome DevTools открывается на вкладке "Elements". Это одна из самых полезных вкладок, поскольку позволяет просматривать и быстро менять HTML и CSS-код различных элементов веб-страницы. Чтобы выбрать элемент, достаточно активировать первую кнопку в левой части панели ("Select an element in the page to inspect it") и курсором мышки ткнуть в нужный фрагмент страницы. На самой страничке вокруг выбранного элемента отобразится выделение и размеры блока в пикселях, а во вкладке "Elements" HTML-код развернётся до строки, описывающей выбранный фрагмент:

Выбрав элемент, мы можем править его и относящиеся к нему стили как нам нужно. К примеру, мы хотим изменить текст и внешний вид блока-"облачка" с фразами Фриды на нашем сайте. Для этого выберем сам блок и посмотрим его содержимое:

Как видим, внутри него находится три блока с разными репликами и скрипт, который эти реплики переключает через определённые отрезки времени. Чтобы написать что-то своё, мы можем остановить работу скрипта и прописать в одном из блоков наш текст (правка HTML доступна после двойного клика по элементу). Хотя, чего мелочиться? Можем убрать все лишние блоки, оставив только один (а заодно можно и скрипт снести :)):

Итак, текст в блоке мы изменили, но он выглядит как-то мелковато... Нужно, чтобы масштабы нашего "злодеяния" было видно с первого взгляда :) И здесь нам поможет функция правки стилей, которая имеется в дополнительной части вкладки "Elements". Выделяйте в коде нужный блок и двойным кликом в боковой панельке можете как править те стили, которые уже есть, так и добавлять новые. Таким образом можно добиться весьма заметных результатов :)

Обратите внимание, что все элементы, которые мы добавляем в панели работы со стилями, автоматически прописываются в качестве инлайновых стилей (параметры атрибута "style") выбранного блока HTML-кода. При этом каждый из них можно быстро отключить, сняв галочку слева (в коде отключённый параметр автоматически убирается в комментарий).

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

Стоит также напоследок отметить, что панель для правки стилей имеет целый ряд собственных вкладок, в которой "Styles", лишь первая. Вот, какие дополнительные разделы там имеются:

• Computed – отображает модель выбранного блока и вычисленные для него автоматически стили, которые явно не заданы или были унаследованы от родительских блоков;
• Event Listeners – выводит список функций, "слушающих" определённые события для всей страницы или конкретно выбранного блока (нужно снять галочку ;
• DOM Breakpoints – содержит так называемые "точки остановки" DOM (сокр. англ. "Document Object Model" – "объектная модель документа"), которые можно создавать из контекстного меню HTML-кода (группа "Break on") при его модификации для быстрой отмены/применения внесённых правок;
• Properties – позволяет просмотреть полный список JavaScript-свойств для выбранного блока на страничке;
• Accessibility – показывает иерархический уровень вложенности для выбранного блока без учёта типов блоков, их классов, идентификаторов или иных характеристик.

Наличие всех этих дополнительных инструментов отнюдь не обязывает Вас их использовать. Обычно, достаточно возможности правки HTML и CSS-кода. Однако, если Вам нужно работать с JavaScript, то список "слушания", точки остановки DOM и свойства блоков Вам могут очень пригодиться!

Консоль

Раз уж речь зашла о JavaScript, то нельзя не сказать о таком инструменте, встроенном в Chrome DevTools, как консоль. Найти её можно на отдельной вкладке "Console", а также она по умолчанию отображается в качестве дополнительной нижней панели на всех других вкладках (отключить отображение можно в настройках, выбрав пункт "Hide console drawer" или нажав кнопку ESC):

Консоль может выполнять сразу две функции: мониторинг событий на странице с отображением предупреждений и ошибок, а также исполнение JavaScript-команд, введённых пользователем. Явно выполняется первая функция. В выводе консоли все события группируются на три категории с разным цветом фона:

1. Белый – "отстуки" об успешно выполненных событиях.
2. Жёлтый – предупреждения о возможных некритических ошибках и сбоях.
3. Красный – ошибки в выполнении скриптов или в доступе к определённым запрашиваемым ресурсам.

Ошибки и предупреждения содержат в себе краткое описание проблемы и ссылку на файл и строку в нём, которая эту проблему вызывает. Зная точный адрес возникновения неполадки (при условии, что она возникает в файле на Вашем сервере), Вы можете быстро локализовать и устранить ошибку.

Что касается выполнения пользовательского кода, то данная возможность применяется очень часто для быстрой отладки кода и проведения различных экспериментов с JavaScript. Например, при изучении этого языка Вам не всегда нужен отдельный Блокнот или даже полновесная среда разработки. Простенькие скрипты Вы можете выполнять прямо в консоли (тем более, что она поддерживает автодополнение команд).

Для программирования в консоли лучше всего открывать в Хроме несуществующую внутреннюю страницу (например, chrome://blank/) или новую пустую вкладку (chrome://newtab/). Это позволит избежать накладок в выполнении уже работающих на странице скриптов. По сути и всё – можем писать код в консоли и выполнять его нажатием Enter. Единственное, что нужно помнить, для вывода, вместо традиционного "document.write("");", используется конструкция "console.log("");". Вот Вам самый примитивный пример для вывода текстовой строки:

Консоль поддерживает ряд спецификаторов, позволяющих явно определить тип вывода (строка/число/элемент DOM/объект JavaScript), выполнить подстановку данных обозначенного типа или применить форматирование:

Спецификатор	Назначение
%s	Определяет результат вывода как строку
%d	Определяет результат вывода как любое число
%i	Определяет результат вывода как целое число
%f	Определяет результат вывода как десятичную дробь (число с плавающей запятой)
%o	Определяет результат вывода как элемент DOM, аналогичный тому, который отображался на панели "Elements"
%O	Определяет результат вывода как JavaScript-объект
%c	Позволяет применить к результату вывода CSS-правила, которые указываются в формате инлайн-стилей в качестве второго параметра

Вот несколько примеров применения спецификаторов:

Как видим, консоль можно с успехом использовать не только для инспектирования существующего кода, но и в качестве среды для изучения JavaScript. Она поддерживает как однострочные выражения, так и более сложные многострочные конструкции с переменными, массивами и циклами. Для перевода строки в консоли вместо Enter нужно нажимать SHIFT+ENTER, а для перевода строк в результатах вывода пользуйтесь символом перевода строки – "\n".

Вкладка Sources

На первый взгляд назначение третьей вкладки инструментов разработчика "Sources" не совсем понятно. По умолчанию в центре рабочего пространства здесь также открывается исходный код страницы, который, почему-то, нельзя править. По бокам расположено две панели: "Page" (слева) и "Threads" (справа). И вот как раз левая панель и является основным "богатством" вкладки "Sources"!

Эта панель позволяет просмотреть все ресурсы, которые подгружаются вместе со страницей. Картинки, скрипты, таблицы стилей – всё это можно выделить и просмотреть в рабочей области (а скрипты можно ещё и править):

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

Аналогично можно скачивать, например, понравившиеся шрифты SVG-графику и подобные ресурсы, прямое сохранение которых может быть недоступно.

Инструменты тестирования и аудита

Рассмотренные выше три вкладки являются, можно сказать, основными в инструментах разработки. Состав же и количество остальных от версии к версии Google Chrome может меняться (как это, например, происходит с вкладкой "Memory", которая то появляется, то исчезает). К тому же, количество вкладок может увеличиваться за счёт устанавливаемых расширений, которые добавляют собственные панели инструментов.

На данный момент актуальной версией Google Chrome является недавно обновлённая 69-я ветка. Поэтому рассматривать дополнительные вкладки будем на её примере.

Вкладка "Network"

Вкладка "Network" позволяет просмотреть статистику загрузки всех элементов инспектируемой веб-страницы, а также наблюдать за запросами, отправляемыми ею во время работы. Для начала отслеживания нужно нажать кнопку записи в левой части вкладки и перезагрузить страничку (F5). Остановить запись можно в любой момент, однако, целесообразно делать это после полной загрузки страницей всех требуемых ресурсов:

Полученные результаты можно изучить, используя фильтрацию событий по типы передаваемых данных, по их размеру, времени загрузки и т.п. Кроме того, можно эмулировать загрузку страницы с искусственным ограничением скорости, соответствующим тем или иным мобильным сетям (выпадающий список "Online"). Всё это можно использовать для выявления самых "тяжеловесных" файлов и оптимизации их загрузки (или вообще исключения) для экономии трафика и ускорения Вашего сайта.

Вкладка "Performance"

Если предыдущая вкладка позволяла нам отследить сугубо сетевую активность страницы, то "Performance", работая по схожим принципам (запись действий), позволяет оценить, какую нагрузку создаёт веб-ресурс на компьютер пользователя. Чтобы получить достаточное для анализа количество данных, достаточно записывать работу страницы в течении минуты, после чего останавливаем и смотрим результаты:

Графики имеют разноцветные метки, позволяющие видеть, какие процессы отнимают больше всего времени и ресурсов компьютера на ротяжении всей проверки. А обобщить полученные данные можно, взглянув на круговую диаграмму внизу, которая отображает общее время теста, а также процент, затраченный на работу скриптов, рендеринг элементов страницы, прорисовку изображений, загрузку иных элементов (например, сторонних скриптов) и простой. Все эти данные также можно использовать для оптимизации веб-страниц.

Вкладка "Memory"

Одна из самых непостоянных вкладок Google DevTools, которая то есть, то пропадает. Работать она может в двух режимах. По умолчанию на ней отображается обобщённое текущее потребление памяти открытой страницей. Если же Вам нужен детальный отчёт, можете запустить процесс записи, аналогичный тому, который был на предыдущих вкладках. В результате Вы получите данные обо всех процессах, потребляющих оперативную память компьютера:

Что интересно, отображается потребление памяти не только самой страницей, её скриптами и подгружаемыми ресурсами, но также расширениями Хрома, которые активны в данный момент! Это может пригодиться в тех случаях, когда браузер стал сильно тормозить из-за "обрастания" лишними плагинами. Зная основных "пожирателей" ресурсов, Вы сможете их удалить, вернув своему Хрому былую лёгкость.

Вкладка "Application"

Если Вам нужно узнать, что хранит веб-страница в сессиях, cookie-файлах или иных локальных хранилищах, Вам на вкладку "Application". Здесь всё максимально просто – в левой панели выбираем интересующее нас хранилище данных, а в основной области смотрим его содержимое. И, что характерно, здесь же мы можем сразу это содержимое править и даже полностью удалять (кнопки "Clear all" и "Delete selected"):

Вкладка "Security"

Сейчас стало практически необходимо использовать на сайтах защищённый HTTPS-протокол. Чтобы оценить эффективность его работы и потенциальные бреши в безопасности веб-страниц, можно воспользоваться вкладкой "Security". Здесь после перезагрузки страницы мы увидим отчёт о безопасных и опасных ресурсах и, соответственно, сможем принять дальнейшие меры для устранения выявленных недостатков:

Вкладка "Audits"

Наконец, в довершение ко всему, Google Chrome может дать нам практические советы по улучшению работы сайта. Для этого нужно перейти на вкладку "Audits", запустить тестирование и дождаться его завершения. По результатам аудита будут сформированы графики и конкретные рекомендации по дальнейшей оптимизации страниц:

Выводы

Google Chrome предоставляет пользователю довольно хороший набор инструментов разработчика. В нём есть практически всё, что может потребоваться для инспектирования и оптимизации веб-страниц. В Вашем распоряжении средства для правки HTML-кода, управления стилями и даже полного контроля над скриптами. Кроме того, в Chrome DevTools Вы найдёте инструменты для тестирования производительности сайта, что позволит наметить пути для дальнейшей оптимизации.

И всё это не требует установки каких-либо дополнительных программ или расширений. Хотя, некоторые расширения могут добавлять свои инструменты в и без того богатый арсенал Хрома. Если Вы освоите хотя бы половину из того, что даёт DevTools, то сможете существенно повысить производительность своего труда и улучшить качество создаваемых Вами веб-страниц!

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.