Программирование • 27 января 2023 • 5 мин чтения
Разбираем базовые возможности DevTools: на какие вкладки-панели лучше обратить внимание сразу, а какие можно отложить на будущее.
Что такое DevTools в браузере
DevTools (от англ. Development tools) — это встроенные в браузер инструменты, которые помогают разработчику быстро редактировать, тестировать и находить проблемы в сайтах. В этой статье выясним, из чего состоят и чем могут быть полезны девтулзы браузера Google Chrome — в других браузерах названия, функциональность и внешний вид инструментов могут немного отличаться.
Так выглядит веб-страница в браузере Google Chrome, когда открыто окно DevTools
Кому и зачем нужны такие инструменты:
● верстальщику, чтобы писать и чинить разметку и стили прямо в браузере, подбирать параметры анимации;
● разработчику, чтобы набрасывать прототип кода и исследовать его поведение, воспроизводить и исправлять ошибки, оптимизировать приложение;
● тестировщику, чтобы проверять работу приложения, эмулировать, или воссоздавать, разные условия, устройства и браузеры.
Разберём подробнее, как вызвать инструменты разработчика DevTools.
Материал по теме:
Почему стоит попробовать себя в веб‑разработке
Как открыть в браузере
Чтобы открыть DevTools, нужно вызвать контекстное меню, в нём будет один из пунктов:
● «Исследовать элемент»,
● «Проверить объект»,
● «Просмотреть код»,
● Inspect element.
Контекстное меню вызывается кликом правой кнопки мыши. После выбора пункта «Просмотреть код» в браузере появится окно со всеми необходимыми для работы вкладками
Другой способ — использовать горячие клавиши:
Cmd+Alt+I — macOS;
F12 — Windows;
Ctrl+Alt+I — Linux.
DevTools занимает много пространства, и часто перед началом работы нужно разобраться, в какой части экрана его закрепить. В каждом браузере для этого окна своё место:
● Google Chrome и Firefox — позволяют закрепить DevTools снизу, справа, слева, вынести в отдельное окно;
● Microsoft Edge — только отдельно или снизу;
● Safari — снизу, справа или открыть в отдельном окне.
Удобнее всего вынести и закрепить окно DevTools на отдельном мониторе, чтобы оно всегда было перед глазами. Такая возможность есть в Google Chrome
Основные возможности DevTools
Интерфейс DevTools состоит из набора вкладок-панелей, и на первый взгляд может показаться, что их слишком много. Стоит потратить время на знакомство с основными элементами консоли разработчика, чтобы разрабатывать сайты гораздо быстрее.
Elements
Самая первая и часто используемая панель — Elements, в которой можно посмотреть текущее дерево элементов, или представление HTML-документа в виде дерева тегов, с применёнными к ним стилями, обработчиками событий и свойствами.
Слева расположена HTML-разметка, а справа — CSS-код, который используется для стилизации веб-страницы
Разметка. Чтобы отредактировать любой элемент на странице, открытой в браузере, достаточно кликнуть по нему правой кнопкой мыши и выбрать пункт Edit as HTML (редактировать как HTML). Это удобно, когда нужно проверить компонент на переполнение, применить или убрать какой-нибудь CSS-класс.
Разработчик видит все изменения сразу в браузере, а другие пользователи — только когда он внесёт правки в исходные файлы
CSS. Информация о стилях в консоли разработчика находится на вкладке Styles. В ней можно отключать и редактировать любые CSS-правила, а для некоторых свойств даже предусмотрены помощники — например, при изменении цвета появляется палитра уже используемых на сайте цветов и пипетка. Эту вкладку разработчики используют чаще всего, она помогает проектировать раскладку и внешний вид элементов, а потом переносить все правки в код.
Color picker позволяет в режиме реального времени изменить цвет стиля, например цвета шрифта или заливки фона
Панель Elements предлагает три удобных способа получить информацию о любом элементе на странице:
1. Через инспектор. Этот способ подходит, даже если DevTools пока ещё не открыт, но элемент хорошо видно. Если кликнуть по нему правой кнопкой мыши, появится контекстное меню, где нужно выбрать Inspect или «Просмотреть код».
После клика сразу откроется панель инструментов разработчика с фокусом на выбранном элементе
2. Поиск по элементам. Когда инструменты разработчика уже открыты, достаточно нажать Ctrl+F/Cmd+F, и под разметкой внизу появится окно поиска по тегу, атрибуту, классу или текстовому содержимому элемента.
Если в поле ввести класс div, то в коде контрастным цветом выделяются все подходящие элементы
3. Указка, или прицел. Специальная кнопка в левом верхнем углу DevTools позволяет войти в режим выбора элемента, где можно водить курсором по странице в поисках нужного элемента и кликать по нему, чтобы обнаружить кусочек кода в разметке.
При наведении на объект в небольшом окошке появляется краткая справка по стилям. Кроме указанного размера логотипа, это ещё может быть размер и стиль шрифта, цвет фона
Михаил Воробьёв
Чтобы работать с DevTools было удобно, в настройках можно изменить внешний вид окошка. Например, выбрать тёмное или светлое оформление интерфейса в зависимости от времени суток. В настройках есть список горячих клавиш, которые могут значительно ускорить работу.
Console
В панель Console браузеры выводят ошибки и предупреждения. Если на странице не подгрузились шрифты, картинки или стили, здесь появятся сообщения с подробным описанием проблемы.
Консоль не обязательно должна быть открыта, чтобы разработчик узнал о проблеме. Если в разметке какие-то погрешности, то DevTools выведет в верхнем правом углу экрана иконки-предупреждения. Кликнув по ним, можно будет узнать детали
Консоль разработчика позволяет исполнять код для тестирования и отладки страницы. Разработчик может открыть страницу в браузере и написать код там. Если ввести команду на языке JavaScript, то она выполнится и код будет взаимодействовать с разметкой.
С помощью кода удалось найти заголовок на странице и покрасить его фон в жёлтый цвет
Sources
Во вкладке отображаются загруженные из всех источников файлы, к которым в разное время обращался сайт. Чаще всего к этой панели разработчики обращаются при отладке кода, она позволяет увидеть все файлы, просмотреть их содержимое и поставить в нужных местах точки останова (breakpoint), чтобы посмотреть значения нужных переменных в любой момент. Если получить доступ к локальным файлам через Workspaces, Sources можно использовать в качестве полноценного редактора кода.
Чаще всего файлы на сайтах «минифицированы» — из них удалены все лишние символы для экономии трафика
Чтобы посмотреть файл в более привычном виде, достаточно нажать на иконку с фигурными скобками внизу окна консоли в браузере.
Так CSS-код выглядит после форматирования
Network
С помощью этой вкладки можно выяснить, сколько времени заняла загрузка страницы, какие ресурсы подключились или не подключились. Network используют при оптимизации скорости загрузки страницы и для мониторинга выполняемых запросов. Если при первом открытии вкладка будет пустой, то нужно перезагрузить страницу.
После перезагрузки внизу появится таблица всех ресурсов с данными по всем запросам. Например, можно узнать тип запроса, который отправили для получения ресурса, его размер и статус ответа
Если нажать кнопку фильтра, можно посмотреть, как загружаются определённые ресурсы, например картинки, шрифты или заголовки.
Если щёлкнуть по любой позиции, появится окно с подробной технической информацией об элементе. Например, данные о типе контента и сервере, где он был размещён
В этой статье описаны только четыре панели, но в DevTools их больше, а их функциональность шире. Один из важных навыков, которым должен владеть разработчик, — это умение работать с документацией. Для глубокого погружения в возможности инструмента рекомендуем изучить официальную документацию по Chrome DevTools от Google.
Полезные функции DevTools для новичков
1. В панели Console можно нажать на специальный значок и ввести выражение на JavaScript, результат которого сразу появится на экране. Так можно отследить, как переменная меняется от действий пользователя или выводить координаты элементов при анимации.
Так, с помощью выражения на JavaScript разработчик выводит текущее время анимации логотипа на главной странице
2. Если добавить новые CSS-правила на вкладке Styles, в панели Elements можно находить проблемные места в вёрстке, например обвести все элементы на странице:
*{ outline: 1px solid magenta !important; }
Или раскрасить страницу в зависимости от вложенности:
- { background-color: rgba(255,0,0,.05) !important; }
3. На вкладке Styles можно эмулировать светлую или тёмную тему устройства — это полезная опция, если нужно опираться на пользовательские предпочтения из операционной системы и разработчику приходится часто между ними переключаться.
Значок «кисти с краской» можно найти в правом углу вкладки Styles
Совет эксперта
Михаил Воробьёв
DevTools постоянно обновляются. Быть в курсе изменений помогут материалы от Google Chrome Developers и короткие видеообзоры на YouTube. Полезно установить версию Chrome для разработчиков — в ней новые функции появляются раньше, чем в пользовательской версии браузера.
Дайджест блога: ежемесячная подборка лучших статей от редакции
Читать также:
