Привет, Хаброчане!

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

❯ Как открыть инструменты: все способы

Самый быстрый способ использовать горячие клавиши. Нажмите F12 или Ctrl+Shift+I для Windows и Linux. Для Mac используйте Cmd+Option+I. Другой вариант кликнуть правой кнопкой мыши по элементу на странице и выбрать пункт «Просмотреть код». Также можно найти инструменты через меню браузера в разделе «Дополнительные инструменты».

Запомните удобную комбинацию Ctrl+Shift+C. Она сразу активирует режим выбора элемента на странице.

❯ Первое знакомство с интерфейсом

После открытия панели вверху вы увидите основные вкладки: Elements, Console, Sources и другие. Рабочая область под ними меняется в зависимости от выбранного раздела. Справа или внизу обычно отображаются дополнительные панели, например, со стилями.

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

Ниже представлена панель для переключения вкладок DevTools:

Если у вас не будет каких либо из перечисленных вкладок, вы можете их найти нажав на три точки и выбрать More Tools.

❯ Глава 1: Вкладка Elements

Эта вкладка главный инструмент для работы с разметкой. Здесь вы разбираетесь в структуре страницы и вносите быстрые правки во внешний вид.

1.1. DOM-дерево: навигация и структура

Слева расположено DOM дерево. Это не исходный HTML код, а то, как браузер построил страницу в своей памяти. Здесь видны все изменения, которые внес JavaScript, например, новые элементы или другой текст.

Чтобы выбрать элемент, нажмите на иконку с курсором в левом углу панели или используйте Ctrl+Shift+C. Курсор превратится в прицел. Наведите его на нужный элемент на странице и кликните. Дерево автоматически развернется и подсветит соответствующий тег.

По дереву удобно перемещаться клавишами «Вверх» и «Вниз». Чтобы открыть или закрыть вложенные блоки, кликайте по треугольникам рядом с тегами. Для поиска по дереву нажмите Ctrl+F прямо в этой панели. Можно искать по тексту, названию тега, классу или идентификатору.

Любой код в дереве можно редактировать. Дважды кликните по тегу, атрибуту или тексту, измените значение и нажмите Enter. Для отмены нажмите Esc. Это позволяет быстро проверять, как страница отреагирует на изменения в разметке. Помните, что после перезагрузки страницы все правки пропадут.

1.2. Панель Styles

Справа от дерева находится панель Styles. Здесь собраны все CSS правила, которые применяются к выбранному элементу. Правила расположены в порядке их приоритета.

Каждое правило подписано своим селектором и именем файла. Это помогает понять, откуда берется тот или иной стиль.

Панель интерактивна. Вы можете кликнуть по любому значению свойства, например, по размеру шрифта, и изменить его. Страница обновится сразу же.

Иногда свойства перечеркнуты серой линией. Это означает, что их переопределило другое, более приоритетное правило. Если навести курсор на такое свойство, часто появляется подсказка с названием правила, которое победило.

Чтобы добавить свое правило для элемента, найдите внизу панели блок element.style { }. Кликните между фигурными скобками и начните вводить название свойства. DevTools будет предлагать варианты автодополнения.

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

1.3. Фильтр по классам и состоянию

Над панелью Styles есть две небольшие, но очень полезные кнопки: .cls и :hov.

Кнопка .cls помогает работать с CSS классами. Нажмите на нее и введите название класса. Вы увидите, какие стили применяются к элементу с этим классом. Появятся чекбоксы для добавления или удаления класса у элемента. Изменения на странице будут видны сразу.

Кнопка :hov решает проблему просмотра стилей для состояний вроде :hover. Обычно для этого нужно удерживать курсор на элементе. Эта кнопка позволяет зафиксировать элемент в нужном состоянии. Поставьте галочку напротив :hover, :focus или другого состояния, и в панели Styles появятся соответствующие стили для редактирования.

1.4. Панель Computed

Рядом со вкладкой Styles находится вкладка Computed. Если в Styles показаны все правила, то здесь только конечный результат. Это финальные стили, которые браузер применил к элементу.

Главная полезная функция возможность узнать источник любого свойства. Рядом с каждым значением есть маленький треугольник. Нажмите на него, чтобы увидеть список всех CSS правил, которые пытались задать это свойство. Будет видно, какое правило сработало и почему.

Вверху панели нарисована такая же схема блочной модели, как и в Styles.

1.5. Панель Layout

Эта панель упрощает работу с CSS Grid и Flexbox. Когда вы выбираете элемент, который использует Grid или Flexbox, в этой панели появляются специальные инструменты.

Для Grid вы можете включить отображение номеров линий и названий областей. Это помогает быстро ориентироваться в сложной сетке. Для Flexbox можно увидеть направление основной оси и выравнивание элементов.

1.6. Панель Event Listeners

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

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

Также есть возможность удалить обработчик прямо из этой панели для тестирования.

1.7. Панель Properties

В этой панели отображаются все свойства выбранного DOM элемента как JavaScript объекта. Вы увидите не только стандартные свойства вроде className или id, но и методы, прототипную цепочку.

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

1.8. Панель Accessibility

Немного ниже находится панель Accessibility. Она показывает, как ваш элемент воспримут вспомогательные технологии, например, скринридеры.

Здесь вы увидите роль элемента, такую как button или link. Рядом указано его доступное имя, то есть текст, который будет озвучен. Это может быть текст внутри элемента, атрибут alt у картинки или атрибут aria label. Также здесь перечислены все дополнительные ARIA атрибуты.

Эта панель помогает быстро проверить, правильно ли вы разметили интерфейс с точки зрения доступности. Если вы сделали кликабельный div, но не указали для него роль и имя, проблема будет видна сразу.

❯ Глава 2: Вкладка Console

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

2.1. Вывод информации

Простой console.log() знают все. В него можно передать переменную или текст, чтобы увидеть текущее значение.

let price = 100;
console.log('Текущая цена:', price);
// В консоли будет: Текущая цена: 100

Для заметных сообщений используйте console.warn() для предупреждений и console.error() для ошибок. Их проще найти в общем потоке логов.

console.warn('Проверьте подключение к сети');
// В консоли появится желтое предупреждение

console.error('Ошибка авторизации');
// В консоли появится красное сообщение об ошибке

Чтобы оформить сообщение, попробуйте %c с CSS стилями.

console.log('%c Важное сообщение', 'color: white; background: blue; padding: 4px;');
// В консоли будет синее сообщение с белым текстом

Для работы с данными в виде таблицы пригодится console.table(). Она структурирует массивы и объекты.

let users = [
  {id: 1, name: 'Алексей', role: 'admin'},
  {id: 2, name: 'Мария', role: 'user'}
];
console.table(users);
// В консоли появится таблица с пользователями

2.2. Консоль как интерактивная среда

В консоли можно выполнять любой JavaScript код для текущей страницы. Это удобно для проверки идей без изменения исходных файлов.

Например, можно узнать размер экрана или изменить текст на странице.

// Узнаём ширину окна
window.innerWidth;
// Консоль покажет число, например: 1920

// Меняем заголовок страницы
document.title = 'Новый заголовок';
// Заголовок вкладки браузера изменится

После выбора элемента во вкладке Elements к нему можно обращаться через $0. Предыдущие выбранные элементы хранятся в $1, $2 и так далее.

// Допустим, вы выбрали кнопку в Elements
$0.textContent = 'Новый текст';
// Текст на кнопке изменится

$0.style.backgroundColor = '#4CAF50';
// Фон кнопки станет зеленым

Выделяем кнопку через Ctrl+Shift+C:

Изменяем ее текст на новый:

Функция monitorEvents() показывает все события выбранного элемента. Это помогает понять, какие действия происходят.

// Начинаем отслеживать события для выбранного элемента
monitorEvents($0);

// Теперь в консоли будут появляться сообщения при кликах, движении мыши и т.д.
// Пример вывода: click, mousemove, mouseenter

// Чтобы остановить отслеживание:
unmonitorEvents($0);

2.3. Фильтрация и настройки

Если в консоли много сообщений, используйте фильтры над ней. Можно оставить только ошибки или выполнить поиск по тексту.

Чтобы логи не пропадали после обновления страницы, включите опцию «Preserve log» в настройках консоли.

2.4. Работа с ошибками

Когда в консоли появляется ошибка, обратите внимание на ссылку справа от текста. Она ведет на файл и строку, где произошла проблема.

Например, при ошибке:

Uncaught TypeError: Cannot read properties of undefined at app.js:25

Кликните на app.js:25. DevTools откроет этот файл и выделит нужную строку.

Ссылка на файл с ошибкой

Если ошибка происходит в минифицированном коде, нажмите на иконку {} внизу панели Sources, чтобы его форматировать и сделать читаемым.

Глава 3: Вкладка Sources

Вкладка Sources нужна для отладки JavaScript. Здесь можно не только смотреть код, но и исправлять его прямо в браузере.

3.1. Навигация по исходным файлам

Слева находится список всех файлов проекта. Там будут ваши JavaScript, HTML и CSS файлы. Можно открыть любой файл и посмотреть его содержимое.

Если вы не видите нужный файл, попробуйте развернуть папки. Часто код лежит в директориях вроде src или js.

Иногда на продакшене код идет в сжатом виде. В таком случае нажмите на иконку с фигурными скобками {} внизу редактора. Код станет читаемым.

3.2. Отладчик: брейкпоинты и пошаговое выполнение

Брейкпоинт это точка остановки. Чтобы ее поставить, нажмите на номер строки слева от кода. Появится синий маркер.

Когда код дойдет до этой строки, выполнение остановится. Вы сможете посмотреть текущие значения переменных.

Для управления есть кнопки:

• Продолжить (F8) — работает до следующего брейкпоинта

• Шаг с обходом (F10) — выполняет строку, не заходя в функции

• Шаг с заходом (F11) — выполняет строку и заходит в функцию

• Шаг с выходом (Shift+F11) — выходит из текущей функции

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

3.3. Наблюдение за переменными

Когда выполнение остановлено, справа появятся панели с переменными.

В Scope видно все переменные в текущей области видимости. Можно развернуть объекты и посмотреть их свойства.

В Watch можно добавить любые выражения для отслеживания. Нажмите плюс и введите, например, user.name или count > 5. Значения обновляются при каждом шаге.

Call Stack показывает цепочку вызовов функций. Это помогает понять, как вы оказались в текущей точке кода.

3.4. Snippets (Фрагменты кода)

Snippets это способ сохранить куски кода прямо в браузере. Они не пропадают после закрытия вкладки.

Чтобы создать сниппет, откройте панель Snippets слева. Нажмите "New snippet", дайте ему имя и напишите код.

// Пример сниппета
function hello() {
    console.log("Привет от сниппета");
}

hello();
// В консоли будет: Привет от сниппета

Запустить сниппет можно через Ctrl+Enter. Это удобно для лайв тестирования.

3.5. Работа с локальными файлами (Workspaces)

Обычно изменения в DevTools пропадают после обновления. Workspaces позволяет сохранять их в реальные файлы.

1. Откройте панель Filesystem

2. Нажмите "Add folder to workspace"

3. Выберите папку с вашим проектом

4. Подтвердите доступ

Теперь при сохранении (Ctrl+S) изменения запишутся в файлы на диске.

Это работает только с локальными серверами (localhost). Для обычных сайтов такой возможности нет.

Глава 4: Вкладка Network

Вкладка Network показывает всё, что браузер загружает с сервера. Здесь видны запросы к API, картинки, скрипты и стили. Как пример, с её помощью можно понять, почему страница грузится медленно.

4.1. Панель запросов и «водопад»

Когда вы открываете вкладку Network и обновляете страницу, появляется список всех запросов. Каждая строка это отдельный файл или запрос к серверу.

Есть шкала времени «водопад». Она показывает, когда началась и закончилась загрузка каждого ресурса. Длинные полоски означают долгую загрузку.

Посмотрите на колонки: Name (имя файла), Status (статус ответа), Type (тип), Size (размер) и Time (время). Если статус красный (например, 404 или 500), значит произошла ошибка.

4.2. Детали запроса

Кликните на любой запрос, чтобы увидеть подробности. Откроется панель с несколькими вкладками.

Headers показывают служебную информацию: URL, метод запроса (GET, POST), заголовки. Здесь можно проверить, правильно ли отправляются данные на сервер.

Preview отображает содержимое ответа в удобном виде. Для JSON данных это будет структурированное дерево, для картинок миниатюра.

Response показывает сырой ответ сервера, как есть в текстовом виде.

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

4.3. Фильтрация и поиск

Над списком запросов есть панель фильтров. Можно отобразить только определённые типы запросов. Например, нажмите «JS» чтобы увидеть только JavaScript файлы. Или «XHR» для API запросов.

Рядом есть текстовое поле для поиска. Введите часть URL или название файла, чтобы быстро его найти.

4.4. Эмуляция сетевых условий (Throttling)

По умолчанию запросы идут на максимальной скорости вашего интернета. Но у пользователей может быть медленное соединение.

В списке «No throttling» выберите «Fast 4G» или «Slow 4G». Теперь обновите страницу. Вы увидите, как она грузится при медленном интернете.

Это помогает находить проблемы, которые не видны на быстрой связи. Например, если большой файл блокирует загрузку страницы.

4.5. Блокировка запросов

Иногда нужно временно отключить какой то ресурс. Например, рекламный скрипт или тяжёлую аналитику.

Кликните правой кнопкой мыши на запрос и выберите «Block request domain». Все запросы к этому домену перестанут работать. После чего у вас откроется список всех заблокированных ресурсов. Чтобы разблокировать опять же кликните правой кнопкой мыши на запрос и выберите «Unblock …»

Это полезно для тестирования, как страница работает без несущественных ресурсов.

Глава 5: Вкладки Performance и Lighthouse

Эти вкладки показывают, насколько быстро работает сайт, и помогают найти причины тормозов.

Рассмотрим их в месте, так как их функционал довольно схож.

5.1. Performance: запись и анализ

Нажмите кнопку «Record» (Ctrl+E) для начала записи. Выполните на странице нужные действия, например, прокрутку или клик по кнопке. Затем нажмите Stop.

На шкале времени вы увидите цветные блоки. Каждый цвет показывает разный тип работы браузера: выполнение скриптов, обработка DOM или отрисовка.

Смотрите на показатель . Он отображает задержку перед выполнением действий на записи.

Инструмент выделяет ключевые точки загрузки:

• LCP (Largest Contentful Paint): загрузка самого большого элемента. Хорошо, если меньше 2.5s.

• CLS (Cumulative Layout Shift): показатель сдвига элементов. Должен быть меньше 10ms.

• INP (Interaction to Next Paint): измеряет общую отзывчивость сайта на действия пользователя, такие как клики или нажатия клавиш. Должен быть меньше 10ms.

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

5.2. Lighthouse: автоматизированный аудит

Lighthouse проверяет сайт по нескольким критериям и дает рекомендации.

Откройте вкладку Lighthouse, выберите необходимые настройки и нажмите «Analyze page load».

После проверки вы получите отчет с оценкой и списком советов. Начинайте с рекомендаций, помеченных как высокий приоритет.

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

❯ Глава 6: Вкладка Application

Вкладка Application показывает, что ваш сайт сохраняет в браузере пользователя. Здесь можно найти сохраненные данные авторизации, настройки и кеш.

6.1. Local Storage и Session Storage

В левой панели найдите раздел Storage. Там будут пункты Local Storage и Session Storage. Это места, где сайт хранит данные в виде ключей и значений.

Local Storage сохраняет данные на долгий срок, даже после закрытия браузера. Session Storage очищается при закрытии вкладки.

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

6.2. Куки (Cookies)

В том же разделе Storage есть пункт Cookies. Здесь отображаются все куки для текущего сайта.

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

6.3. IndexedDB и кэш

IndexedDB это база данных внутри браузера. В разделе IndexedDB можно просмотреть все хранилища и объекты, которые создало ваше приложение. Раскрывайте дерево, чтобы увидеть структуру данных.

Cache Storage показывает содержимое кэша, который создается сервис-воркером. Здесь хранятся статические ресурсы для работы оффлайн. Можно посмотреть, какие файлы закешированы, и при необходимости очистить кэш.

Глава 7: Вкладка Privacy and security

Эта вкладка позволяет быстро оценить, безопасно ли соединение с сайтом.

7.1. Общий статус безопасности

Откройте вкладку Security. В левой части вы увидите общую оценку безопасности текущей страницы. Чаще всего там будет один из двух статусов.

Если соединение защищено, вы увидите надпись «Secure» и зелёный замочек. Это означает, что сайт использует HTTPS, и данные передаются в зашифрованном виде.

Если соединение небезопасно, появится предупреждение «Not secure» и красный значок. Обычно это происходит на сайтах с HTTP. В этом случае данные передаются открытым текстом, и их могут перехватить.

7.2. Детали по сертификатам

Для защищённых сайтов можно посмотреть подробности сертификата. Нажмите на кнопку «View certificate». Откроется окно с технической информацией.

Здесь вы найдете данные о том, кто выпустил сертификат, на какое доменное имя он выдан и как долго действителен. Эта информация полезна, если нужно проверить подлинность сайта или решить проблемы с безопасным соединением.

❯ Глава 8: Прочие инструменты и настройки

В DevTools есть несколько дополнительных панелей, которые решают узкие, но важные задачи. А ещё здесь находятся настройки всего интерфейса.

8.1. Device Mode (Режим устройств)

Эта панель помогает посмотреть, как ваш сайт выглядит на телефонах и планшетах. Нажмите на иконку с ноутбуком и телефоном в левом верхнем углу DevTools, чтобы её открыть.

Сверху появится панель, где можно выбрать модель устройства, например iPhone 12. Страница изменит размер. Рядом есть кнопка для поворота экрана.

Здесь же можно включить эмуляцию сенсорных событий и выбрать тип сети, например Slow 4G. Это самый быстрый способ проверить адаптивность вёрстки.

8.2. Вкладка Rendering

Эту панель открывают через меню с тремя точками (More tools). Она содержит несколько инструментов для отладки отображения.

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

Ещё здесь есть эмуляция разных типов цветового зрения. Так вы проверите, как видят ваш интерфейс люди с дальтонизмом.

8.3. Вкладка Memory

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

Начните с кнопки «Take Snapshot». Нажмите на нее, чтобы создать первый снимок памяти. Затем выполните на странице действие, которое хотите проверить. Например, несколько раз откройте и закройте всплывающее окно. После этого создайте второй снимок.

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

Вы увидите список объектов, которые появились и остались в памяти. Если их количество и размер растут с каждым повтором, это явная утечка.

Есть и другой способ. Можно не делать снимки, а записывать все выделения памяти по времени. Выберите в меню пункт «Allocations on timeline».

Начните запись, выполните нужные действия на странице и остановитесь.

На появившейся временной шкале вы увидите синие вертикальные полоски. Каждая такая полоска это группа объектов, созданных в этот момент. Если кликнуть на полоску, внизу покажется, какие именно объекты были созданы и в какой строке вашего кода это произошло.

8.4. Настройки DevTools

Настройки открываются через клавишу F1 или иконку с тремя точками и пункт Settings.

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

Главное, здесь же можно восстановить настройки по умолчанию, если что то пошло не так.

---

❯ Заключение

Фух! Закончили. Надеюсь статья помогла вам разобраться с инструментарием DevTools. Конечно, в статье не разобрана КАЖДАЯ строчка или функция — оставил вам возможность утолить исследовательский интерес.

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

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

Удачи в разработке!

---

Новости, обзоры продуктов и конкурсы от команды Timeweb.Cloud — в нашем Telegram-канале ↩