Инструменты разработчика: Chrome DevTools для начинающих

Как правило, frontend-специалисты любуются результатами своей работы в браузере. Браузер предоставляет возможность на лету отслеживать и изменять код страницы с помощью инструментов разработчика, (development tools, сокращённо DevTools). Это программы, по значимости не уступающие языкам. Возможности инструментов очень широки и глубоки, эффективно применять их могут, наверное, только сами создатели. Но знать основные моменты важно как начинающим, так и опытным специалистам на серьезных проектах.

Поскольку Google Chrome является популярнейшим браузером, в этой статье мы рассмотрим Chrome DevTools. Описанные практики также будут актуальны для любого браузера на основе Chromium.

Отметим, что использование DevTools, понимание приемов работы с Network и Application полезно не только фронтендерам. Всем членам команды на проекте требуется отслеживать процессы обмена данными.

Введение: инструменты разработчика

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

— Клавишей F12 (на ноутбуках fn + f12)

— ctrl+shift+j (в ОС Windows)

— кликнуть на странице правой кнопкой мыши и выбрать пункт “Inspect” (если язык браузера английский) или «Посмотреть код» (если язык браузера русский).

Рекомендация: переводите свои IDE и браузеры на английский язык. Это поможет прокачать скилы английского языка и не теряться при просмотре англоязычных туториалов.

Будем разбираться на примере корпоративного сайта SimbirSoft:

Многие называют этот инструмент «консоль», хотя, строго говоря, консолью называется одна из многих его панелей. По умолчанию окно открывается справа, можно перенести его вниз, влево или отобразить в отдельном окне (правый верхний угол, три точки).

Панель Elements

Elements используется для дебаггинга HTML и CSS, просмотра и редактирования стилей:

В верхней части можно увидеть собственно DOM — модель вашего HTML в виде элементов, которые отрисовывает браузер. Если наводить курсор на строки DOM, соответствующий элемент на странице выделяется с указанием размеров блока (отметка 1 на рисунке 3). Можно, наоборот, указать элемент, описание которого вы хотите увидеть: либо кликнуть на элементе правой кнопкой и выбрать Inspect, либо указать элемент стрелкой из левого верхнего угла панели (отметка 2 на рисунке 3).

Можно дописывать атрибуты тегам или менять текстовое содержимое элементов.

В нижней части — CSS указанного элемента. Значения свойств можно менять прямо здесь, можно дописывать новые свойства или отключать старые.

С помощью кнопки :hov можно переключать состояние элемента (псевдоклассы). Рядом кнопка .cls — можно добавить новый класс (отметка 3 на рисунке 3).

Незаменимая функциональность для адаптивной верстки расположена в верхней строке над страницей (отметка 4 на рисунке 3). Можно изменять размер экрана, указывать размеры конкретных гаджетов, изменять скорость загрузки, менять ориентацию экрана. Эту функциональность можно расширить, используя настройки.

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

Панель Console

Консоль — это «живой чат» разработчика и JS-кода. Тут мы можем видеть все сообщения об ошибках или сообщения, которые мы прописываем в коде для его отладки. На самом деле, у этой вкладки еще вагон и маленькая тележка полезных функций. Но сейчас мы познакомимся с базовыми фишками, которые пригодятся вам уже на старте погружения во frontend.

1. Во-первых, в консоль выводят сообщения. Если в коде написать console.log («что-нибудь») и этот код запустить в браузере, то когда исполнение дойдет до соответствующей строки, в определенной вкладке консоли (user message) увидим сообщение из скобок.

Часто сообщения выводят для того, чтобы увидеть — заходит исполнение кода в определенный блок или нет.

Еще один кейс — подсчитать количество рендеров страницы: пишем console.log («что-нибудь») в коде компонента React и по количеству выведенных сообщений определяем количество отрисовок. По умолчанию настроено так, что одинаковые сообщения выводятся один раз, но количество выполнений команды указывается рядом.

Кроме того, вы можете посмотреть, как выглядят данные в определенный момент исполнения кода. Вместо «что-нибудь» в скобках console.log надо написать имя переменной, значение которой хотите посмотреть. Сложные данные можно выводить в разном виде:

1. console.log(x)
2. console.log({x})
3. вывести данные в виде таблицы: console.table(x)
4. вывести количество миллисекунд, которое заняло исполнение кода между командами console.time()и console.timeEnd()
5. вывести сообщение в закладке Errors с соответствующим оформлением console.error («Ай-яй-яй»).

Много других вариантов вывода сообщений можно найти в документации.

1. Во-вторых, в консоли можно писать код, который будет исполнен после нажатия клавиши Enter (так что переход на новую строку — shift+Enter).

Удобно выводить содержимое DOM-элементов, тестировать скрипты. Можно использовать как калькулятор, а можно легко решать задачи на приведение типов в JS.

Панель Sources

Sources (источники) — панель, которая отображает файлы, с помощью которых построена страница. Можно открыть любые файлы проекта — js, ts, jsx, css, html, отслеживать выполнение и вносить изменения.

Отслеживать, как меняются значения переменных, удобно, используя точки останова — breakpoints. В этом случае не приходится прописывать лишние команды в коде.

Надо открыть файл проекта, код которого будем дебажить: жмите ctrl+O или ctrl+P, затем начинайте вводить название файла.

Кликаем возле строки, где происходят интересующие нас изменения, появится синяя стрелка — breakpoint.

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

Чтобы выполнение кода продолжилось, надо нажать треугольную кнопку — play (отметка 2 на рисунке 7). В этой же панели есть возможность пропустить все breakpoints (отметка 4 на рисунке 7) и выполнять код по шагам.

Снять breakpoint — кликнуть по синей отметке возле строки (отметка 5 на рисунке 7).

Кроме того, breakpoints можно поставить на событие. Это называется Event Listener Breakpoints. Ставьте галочки возле тех событий, на которых хотите остановить код, и смотрите, что получится. Надо сказать, что в приложениях, созданных с помощью React, эта опция может вести себя некорректно, так как React особенным образом работает с событиями.

Во вкладке Scope (отметка 3 на рисунке 7) можно наблюдать значения всех переменных кода. Во вкладке Watch можно наблюдать за конкретной переменной. Ее имя надо добавить, нажав на плюс.

Бывает так, что выполнение функции перебрасывает вас в служебный файл библиотеки. Чтобы этого не происходило, можно добавить файл в ignore list, и такого перехода происходить не будет.

Нажав правую кнопку мыши и вызвав контекстное меню в поле breakpoints, можно переместить код в ignore list, а также добавить breakpoint по условию или такой breakpoint, который не останавливает код, а выводит сообщение в консоль.

Панель Network

Эта панель позволяет анализировать, что именно и с какой скоростью загружается на страницу — файлы, картинки, запросы.

Чаще всего используется для просмотра api-запросов.

Клик по строке с запросом открывает окно с подробностями:

Во вкладке Headers можно увидеть url запроса, насколько успешно выполнен запрос, причины невыполнения и так далее.

Во вкладке Response отображаются полученные по запросу данные в текстовом виде. А во вкладке Preview эти же данные в виде изображения (если запрашивали изображение) или в виде объекта, если пришел JSON.

Кликнув на определенный запрос правой кнопкой и выбрав Block Request, можно заблокировать отправку запроса и тем самым проверить поведение страницы, если запрос не выполняется.

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

Панель фильтров позволяет фильтровать запросы — отображать запросы указанного типа.

Панель Application

Для просмотра данных, которые сохраняются в браузерных хранилищах (Local Storage, Session Storage и Cookies) используется панель Application. Там очень много полезной информации, достаточно выбрать нужный пункт из списка.

Интересный кейс: если надо воспроизвести какой-то запрос через сторонний сервис (например, Postman), данные для авторизации можно взять как раз с помощью этой вкладки devtools. Как правило, в Cookies сохраняется токен авторизации, и его можно оттуда скопировать для заголовков запроса в Postman.

Данные, которые сохраняются в кэш, также можно просматривать и редактировать с помощью этой вкладки.

Заключение

Конечно, Chrome DevTools имеет гораздо больше возможностей, чем мы перечислили. Например, осталась не упомянутой важная вкладка Performance, которая позволяет оценить эффективность и скорость работы приложения. Есть и другие. На описанных вкладках есть десятки и сотни фишек, про которые коротко не расскажешь, и со многими из них разработчик не сталкивается ни разу за всю свою карьеру, так как задач, которые требовали бы их использования, просто не возникает. Нашей целью было подсветить основные моменты, важные для начинающих frontend-разработчиков и других специалистов.

Расскажи в комментариях к посту ВКонтакте https://vk.com/wall-45285702_6458, какими функциями Chrome DevTools ты пользуешься чаще всего?

____________________________________________________________________________

В наших соцсетях и блоге мы регулярно публикуем интересные кейсы, новости, анонсы онлайн-мероприятий и вдохновляющие истории успеха. Подписывайся:

ВКонтакте: https://vk.com/simbirsoft_team

Habr: https://habr.com/ru/company/simbirsoft/blog/

YouTube: https://www.youtube.com/user/SimbirSoft/