0Pricing
Frontend Academy · Урок

Инструменты разработчика: открытие и использование DevTools

Открывайте Chrome DevTools, проверяйте элементы, читайте консоль, отслеживайте сетевые запросы и редактируйте CSS прямо в браузере.

«Инструменты разработчика: открытие и использование DevTools» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Что такое DevTools браузера?

Каждый современный браузер поставляется со встроенным набором инструментов разработчика. DevTools позволяют исследовать HTML и CSS, отлаживать JavaScript, анализировать производительность, отслеживать сетевые запросы и многое другое — не покидая браузер.

Открытие DevTools

Откройте DevTools с помощью F12 (Windows/Linux) или Cmd+Option+I (Mac). Также можно щёлкнуть правой кнопкой мыши любой элемент и выбрать пункт Просмотреть. Сочетание Ctrl+Shift+J / Cmd+Option+J сразу открывает Console.

Панель Elements

Панель Elements показывает актуальное дерево DOM. Щёлкните любой элемент, чтобы выбрать его и увидеть вычисленные стили на панели Styles. Дважды щёлкнув, можно в реальном времени изменить HTML или значения CSS — изменения применяются сразу, но не сохраняются в файле.

Изменение CSS в реальном времени

На панели Styles щёлкните значение любого свойства, чтобы изменить его. Добавляйте новые правила с помощью кнопки +. Используйте флажки-переключатели, чтобы отключать правила. Это самый быстрый способ создавать прототипы CSS, не переключаясь в редактор.

Панель Console

Console показывает записанные сообщения, предупреждения и ошибки. Вы также можете вводить JavaScript напрямую и выполнять его. Используйте console.log(), console.warn(), console.error() и console.table(), чтобы выводить данные во время отладки.

// Log different types
console.log('value:', myVar);
console.table([{name:'Alice'}, {name:'Bob'}]);
console.error('Something went wrong');

Панель Network

Панель Network показывает каждый HTTP-запрос, который выполняет страница. Выберите запрос, чтобы просмотреть его заголовки, предварительно просмотреть тело ответа и проверить временную диаграмму. Фильтруйте запросы по типу: XHR/Fetch, JS, CSS, изображения, шрифты.

Чтение времени выполнения запроса

Для каждого запроса показываются этапы: поставлен в очередь, поиск DNS, начальное соединение, SSL, отправка запроса, ожидание (TTFB) и загрузка содержимого. TTFB (Time To First Byte) отражает время ответа сервера.

Ограничение скорости сети

Используйте раскрывающийся список ограничения скорости на панели Network, чтобы имитировать медленное соединение 3G или отсутствие сети. Это выявляет проблемы производительности, незаметные при быстром широкополосном соединении, и помогает создавать интерфейсы, работающие у пользователей с плохим соединением.

Режим устройства

Щёлкните значок устройства (Ctrl+Shift+M / Cmd+Shift+M), чтобы перейти в режим устройства. Имитируйте мобильные области просмотра, DPR, сенсорные события и условия сети. Выбирайте готовые варианты, например iPhone 14, или задавайте пользовательскую ширину.

Панель Sources

Панель Sources позволяет читать файлы JavaScript и устанавливать в них точки останова. Точка останова приостанавливает выполнение, чтобы Вы могли проверить значения переменных и стек вызовов, а также пошагово просматривать код с помощью F10 (перейти через) и F11 (перейти внутрь).

Точки останова и отладчик

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

// You can also trigger a breakpoint in code:
debugger; // execution pauses here when DevTools is open

Быстрая проверка

Какая панель DevTools показывает все HTTP-запросы, которые выполняет страница, включая их коды состояния и время ответа?

Итоги: ваш набор инструментов DevTools

Элементы: проверка и редактирование DOM в реальном времени. Консоль: ведение журнала и выполнение JavaScript. Сеть: мониторинг HTTP-трафика. Источники: установка точек останова и отладка. Режим устройства: тестирование адаптивных макетов. Освоение этих четырёх панелей полностью изменит ваш процесс отладки.

Часто задаваемые вопросы

Урок «Инструменты разработчика: открытие и использование DevTools» бесплатный?

Да — полный текст урока «Инструменты разработчика: открытие и использование DevTools» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Инструменты разработчика: открытие и использование DevTools»?

Открывайте Chrome DevTools, проверяйте элементы, читайте консоль, отслеживайте сетевые запросы и редактируйте CSS прямо в браузере. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Инструменты разработчика: открытие и использование DevTools»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

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

Все уроки этого курса

  1. DNS и HTTP в браузерах: жизненный цикл запроса
  2. HTML, CSS и JavaScript: задачи каждого слоя
  3. Как отрисовывается страница: разбор, DOM, CSSOM, компоновка и рисование
  4. Инструменты разработчика: открытие и использование DevTools
← Назад к Frontend Academy