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

В этом уроке познакомимся с инструментами разработчика (DevTools, «девтулзы») — набором утилит, встроенным прямо в браузер.

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

Разберём на примере двух браузеров — Firefox и Chrome: их инструменты похожи по устройству, но называются немного по-разному, поэтому полезно иметь представление об обоих.

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

Есть несколько способов — выбирайте любой:

• клавиша F12 (на некоторых ноутбуках — Fn+F12);
• сочетание Ctrl+Shift+I;
• правый клик по любому месту страницы → «Исследовать» (Chrome) или «Исследовать элемент» (Firefox);
• через меню браузера — ищите пункт с названием вроде «Инструменты разработчика».

На macOS вместо Ctrl используется Cmd: например, Cmd+Opt+I.

Панель откроется сбоку или снизу окна — как именно и где, можно настроить (за это отвечает кнопка с тремя точками или шестерёнкой на самой панели).

Главные вкладки: как они называются в Firefox и Chrome

• Elements (Chrome) / Инспектор (Firefox) — HTML-код страницы и CSS-стили любого элемента;
• Console / Консоль — сообщения браузера (в том числе об ошибках) и место, где можно выполнять код на JavaScript;
• Network / Сеть — все запросы, которыми браузер обменивается с серверами; самая важная для нас вкладка;
• Application (Chrome) / Хранилище (Firefox) — cookie и другие данные, которые сайты оставляют в браузере.

Точных названий не заучивайте: в разных версиях браузеров они слегка различаются — ориентируйтесь на смысл.

Инспектор: заглядываем «под капот» страницы

Правый клик по любому элементу страницы → «Исследовать» — и инспектор сразу покажет HTML этого места и его CSS-стили.

Стили и текст можно менять прямо здесь: поменяли цвет — он поменялся на экране. Важно понимать: эти изменения живут только в вашем браузере и исчезают после обновления страницы — сайт для остальных посетителей при этом не меняется. Так что смело экспериментируйте: сломать таким образом ничего нельзя.

Консоль

Во вкладке Консоль/Console браузер пишет свои сообщения: обычные, предупреждения и ошибки (красные строки). Красная ошибка — сигнал, что что-то на странице не работает: например, какой-то скрипт не смог загрузиться. Пока от вас требуется одно — не пропускать красные сообщения мимо глаз.

Вкладка «Сеть» — самое главное для нас

Именно здесь видно то сетевое общение, о котором мы говорили в предыдущих уроках:

 БРАУЗЕР                                      СЕРВЕР
    |                                            |
    |         запросы и ответы (HTTP)            |
    |<------------------------------------------>|
    |               ^^
    |               всё это видно во вкладке
    |               «Сеть» (Network) DevTools

Как ей пользоваться:

1. откройте вкладку Сеть/Network — скорее всего, она пуста: браузер уже успел всё загрузить;
2. обновите страницу (F5) — появятся строки, где каждая строка — один запрос-ответ;
3. посмотрите на колонки: Имя (что запрашивали), Статус (код ответа), Тип, Размер, Время;
4. кликните по любой строке — откроются детали: заголовки (Headers) запроса и ответа, а на вкладке Ответ/Response — само тело ответа;
5. кнопки-фильтры над списком (HTML, CSS, JS, Img...) позволяют показать только нужные типы запросов.

В Firefox сеть можно открыть и отдельным сочетанием: Ctrl+Shift+E.

Практикум

В вашем браузере (Firefox или Chrome):

1. Откройте страницу нашего курса, вызовите DevTools и перейдите на вкладку «Сеть».
2. Обновите страницу и найдите самый первый документ (тип html/document): какой у него статус? Какой у него размер?
3. Посмотрите, сколько всего запросов ушло на загрузку одной страницы.
4. Кликните по этому документу: найдите заголовки запроса и ответа — просто взгляните на них пока, без вникания.
5. В инспекторе поменяйте текст любого заголовка на странице, а затем обновите страницу — убедитесь, что всё вернулось как было.

Контрольные вопросы

• Назовите три способа открыть инструменты разработчика.
• Какая вкладка в Chrome называется Elements и как она же называется в Firefox?
• Где увидеть все запросы, которыми браузер получает страницу, и коды ответов сервера?
• Изменится ли сайт для других посетителей, если вы поменяли заголовок в инспекторе? Почему?
• О чём говорит красное сообщение в консоли?

В следующем уроке — введение в HTTP: разберём, что именно написано в тех самых запросах и ответах, которые вы только что видели на вкладке «Сеть».