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

консоль, сеть, элементы

Что это

Инструменты разработчика — встроенная в браузер панель, которая показывает, что на самом деле происходит на странице. Открывается клавишей F12 (или Ctrl+Shift+I, на macOS — Cmd+Option+I).

Для фронтенда это то же, что логи для сервера (статья 4.2): единственный способ узнать, что произошло, вместо того чтобы гадать.

Вкладок много, нужны три.

Как выглядит в коде

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

[сеть ✗]  https://example.invalid/style.css — net::ERR_TUNNEL_CONNECTION_FAILED
[консоль error]   Failed to load resource: net::ERR_TUNNEL_CONNECTION_FAILED
[консоль log]     приложение стартовало
[консоль warning] ключ API не задан, работаю в демо-режиме
[консоль log]     получено: {"main":null}
[ошибка страницы] Cannot set properties of null (setting 'textContent')

Шесть строк, и в них три разные истории:

1. Файл стилей не загрузился. Страница при этом показалась — просто без оформления. Это та самая четвёртая причина «стиль не применился» из статьи 8.1, и увидеть её можно только здесь.
2. Предупреждение о демо-режиме. Не ошибка, но объясняет, почему данные выглядят странно.
3. Cannot set properties of null — код искал элемент #missing, не нашёл, получил null и попытался записать в него текст. Знакомо: это тот же класс ошибки, что KeyError в Python и 'temp' is possibly null в TypeScript.

Вкладка «Консоль»

Что здесь смотреть:

• ошибки — красным, с местом в коде;
• предупреждения — жёлтым, часто объясняют причину;
• вывод console.log из кода.

Консоль не только показывает, но и принимает команды. Прямо в ней можно проверить, есть ли элемент:

document.querySelector('.card')      // null — значит, не нашёлся
document.querySelectorAll('.card').length

Это самый быстрый ответ на вопрос «элемент вообще есть в DOM?» из статьи 8.1.

Вкладка «Сеть»

Список всех запросов: файлы стилей, скрипты, картинки, обращения к API. Смотреть на три колонки:

Клик по запросу показывает заголовки и тело — то же, что отдавал curl в главе 7, только для живой страницы.

Самая частая находка: запрос к API ушёл, ответ 200, но данные не те. Значит, дело не во фронтенде, а в бэкенде, — и дальше статья 7.8.

Вкладка «Элементы»

Показывает DOM, а не исходный HTML. Разница принципиальная: здесь видно то, что получилось после разбора и работы скриптов (статья 8.1).

Справа — панель стилей выбранного элемента. Там видно:

• какие правила применились;
• какие перечёркнуты — то есть перебиты другими (статья 8.3);
• откуда каждое правило пришло: файл и строка.

Перечёркнутое правило — готовый ответ на вопрос «почему стиль не применился».

Как сказать ИИ

Главная польза инструментов для работы с ИИ — они превращают «не работает» в факты (статья 4.3):

стили не применяются, почини

В консоли: Failed to load resource — style.css, net::ERR_...
Во вкладке «Сеть»: запрос к /style.css, статус 404.
Путь в разметке: <link rel="stylesheet" href="/style.css">.
Файл лежит в static/style.css. Как должен выглядеть путь?

Ошибка: Cannot set properties of null (setting 'textContent').
Вот код: <код>. Элемент #missing в разметке есть.
Почему querySelector возвращает null?

Во вкладке «Элементы» правило color из .card перечёркнуто.
Вот оба правила: <код>. Какое побеждает и почему?

На что смотреть

Консоль не открывали. Самая частая причина долгих поисков: ошибка всё это время была написана текстом.

Ошибки «чужие». Расширения браузера сыплют в ту же консоль. Проверяй файл и строку: если это не твой файл — не твоя проблема.

console.log остался в коде. Для фронтенда это ещё и утечка: видно всем, кто откроет консоль. Перед выкладкой — поиск по диффу (статья 4.5).

Смотрят в исходный код вместо DOM. Ctrl+U показывает то, что пришло с сервера; вкладка «Элементы» — то, что есть сейчас. При работе скриптов это разные вещи.

Кеш. Правка не видна, потому что браузер взял старый файл. Обновление с очисткой — Ctrl+Shift+R.

Шпаргалка