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

Что это такое

DevTools — это набор инспекторов, встроенных в браузер: дерево документа и его стили, журнал сети, консоль и отладчик JavaScript, запись производительности, просмотр хранилищ и дерево доступности. Полную картину того, что браузер на самом деле сделал с вашим кодом, даёт только он.

Почему это важно

Всё остальное, чем можно отлаживать фронтенд, остаётся догадкой: исходники говорят о том, что вы написали, но не о том, что загрузил браузер. Логирование в консоль говорит лишь о том, что вам пришло в голову залогировать. DevTools же показывает вычисленные стили на реальном элементе, байты, которые действительно прошли по сети, стек, который действительно упал, и миллисекунды, которые действительно прошли. Почти каждое «у меня работает» заканчивается в тот момент, когда кто-то открывает инструмент и смотрит на запрос, который так и не был отправлен.

Что в этом треке

Elements и стили (02-frontend/27-browser-devtools/01-elements-and-styles) — инспекция живого дерева и каскада, породившего каждое вычисленное значение.
Network и производительность (02-frontend/27-browser-devtools/02-network-and-performance) — чтение журнала запросов и запись того, на что главный поток потратил время.

Предварительные требования

JavaScript (02-frontend/06-javascript)

Что читать дальше

Lighthouse (02-frontend/31-lighthouse) — автоматизированный аудит, который запускается внутри этих инструментов.
Веб-производительность (Core Web Vitals) (02-frontend/26-web-performance-core-web-vitals) — показатели, для диагностики которых используют панель производительности.
Каскадные таблицы стилей (CSS) (02-frontend/05-css) — панель Cascade — самый быстрый способ узнать, какое правило побеждает.