DevTools в браузере: как проверять HTML, CSS, JavaScript и ошибки сайта

Рублика: Программное обеспечение

Краткий план статьи

1. Что такое DevTools и как его открыть
2. Работа с HTML и CSS через Elements
3. Использование Console и поиск ошибок JavaScript
4. Проверка запросов через Network
5. Мобильная версия, cookies и другие полезные инструменты
6. Когда требуется помощь специалиста
7. Часто задаваемые вопросы

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

DevTools — встроенный набор инструментов браузера для анализа и отладки веб-страниц. Он позволяет увидеть структуру сайта, проверить стили, найти ошибки JavaScript, посмотреть обращения к серверу и временно изменить отображение страницы.

Инструменты разработчика доступны в большинстве современных браузеров, включая Chrome, Edge и Firefox. Названия отдельных пунктов могут немного отличаться, но основные возможности похожи.

Открыть DevTools можно несколькими способами:

• нажать F12;
• использовать Ctrl + Shift + I;
• нажать правой кнопкой мыши по странице и выбрать просмотр или исследование элемента;
• использовать Ctrl + Shift + C для выбора конкретного элемента страницы.

После открытия обычно становятся доступны вкладки Elements, Console, Sources, Network, Application, Performance и другие.

Начинающему разработчику в первую очередь достаточно освоить четыре раздела:

• Elements — HTML и CSS;
• Console — JavaScript и ошибки;
• Network — запросы браузера;
• режим мобильного устройства — проверка адаптивности.

Важно понимать, что обычное изменение страницы через DevTools не редактирует файлы сайта на сервере.

Например, если заменить:

html <h1>Наш магазин</h1>

на:

html <h1>Интернет-магазин техники</h1>

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

DevTools удобен для поиска решения и экспериментов. Чтобы сохранить результат постоянно, изменения необходимо перенести в исходный HTML, CSS, JavaScript, CMS или файлы проекта.

Как работать с HTML и CSS через Elements

Основная вкладка для исследования страницы называется Elements.

В ней браузер показывает DOM — текущую HTML-структуру страницы.

Например:

```html <body> <header> <h1>Мой сайт</h1> </header>

<main> <p>Добро пожаловать</p> </main> </body> ```

Чтобы быстро найти нужный блок, нажмите:

Ctrl + Shift + C

После этого наведите указатель на страницу. Браузер будет подсвечивать элементы и показывать их размеры.

Нажмите, например, на кнопку. DevTools автоматически найдёт соответствующий HTML:

html <button class="order-button">Заказать</button>

Текст, классы и некоторые атрибуты можно редактировать прямо в дереве HTML.

Это удобно, когда нужно проверить:

• другой заголовок;
• длинный текст кнопки;
• новую подпись;
• дополнительный класс;
• временное удаление элемента.

Как изменить CSS

При выбранном элементе рядом отображается раздел Styles.

Предположим, кнопка имеет стиль:

css .order-button { background: blue; color: white; padding: 10px; }

Можно временно заменить:

css background: blue;

на:

css background: green;

или изменить:

css padding: 10px;

на:

css padding: 20px;

Результат отображается мгновенно.

Можно также добавить новое свойство:

css border-radius: 12px;

или временно отключить существующее, сняв отметку рядом с ним.

Такой способ особенно полезен при подборе:

• размеров;
• цветов;
• отступов;
• ширины блоков;
• расположения элементов;
• свойств display, position, flex и grid.

Если CSS-свойство отображается зачёркнутым, оно обычно переопределено другим правилом или не применяется в текущих условиях.

DevTools также показывает, из какого файла пришёл стиль. Например:

text style.css:125

Это означает, что правило следует искать примерно на 125-й строке файла style.css.

Что показывает Box Model

Для выбранного элемента DevTools отображает модель блока:

text margin border padding content

Она помогает понять, почему элемент занимает определённое место.

Например, большая пустая область может появляться не из-за ширины блока, а из-за:

css margin-top: 50px;

или:

css padding: 40px;

Изменяя значения непосредственно в DevTools, можно быстро подобрать подходящий вариант, а затем перенести его в CSS проекта.

Как пользоваться Console и искать ошибки JavaScript

Вкладка Console предназначена для сообщений браузера и выполнения JavaScript.

В неё можно ввести:

javascript 2 + 2

и получить:

text 4

Также можно обратиться к элементам страницы:

javascript document.querySelector('h1')

или:

javascript document.querySelector('.order-button')

Для изменения текста:

javascript document.querySelector('h1').textContent = 'Новый заголовок'

После выполнения заголовок страницы изменится до её обновления.

Как увидеть ошибку JavaScript

Если кнопка, форма или другой интерактивный элемент не работает, откройте Console и повторите проблемное действие.

Ошибка может выглядеть так:

text Uncaught ReferenceError: userName is not defined

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

Другой распространённый вариант:

text Cannot read properties of null

Такое сообщение часто появляется, когда JavaScript пытается работать с HTML-элементом, которого не удалось найти.

Рядом с ошибкой обычно указывается файл и строка:

text app.js:87

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

Для чего используется console.log

Во время разработки полезно добавлять:

javascript console.log('Функция запущена');

или:

javascript console.log(user);

Так можно проверить:

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

Например:

```javascript function calculateTotal(price, count) { console.log('Цена:', price); console.log('Количество:', count);

return price * count; } ```

После вызова функции значения появятся в Console.

Важное правило безопасности

Не вставляйте в Console неизвестный код из сообщений, комментариев или случайных сайтов.

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

Особенно опасно экспериментировать таким способом на страницах:

• электронной почты;
• социальных сетей;
• интернет-магазинов;
• административных панелей;
• облачных сервисов.

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

Как проверять запросы сайта через Network

Вкладка Network показывает сетевые обращения браузера.

Здесь можно увидеть загрузку:

• HTML;
• CSS;
• JavaScript;
• изображений;
• шрифтов;
• API;
• видео;
• других ресурсов.

Откройте Network и обновите страницу.

В списке появятся запросы с их статусами.

Наиболее распространённые HTTP-коды:

• 200 — запрос выполнен успешно;
• 301 или 302 — перенаправление;
• 400 — некорректный запрос;
• 401 — требуется авторизация;
• 403 — доступ запрещён;
• 404 — ресурс не найден;
• 500 — ошибка серверной части.

Например, если изображение не отображается, в Network может быть:

text logo.png 404

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

Как проверить API

Для современных сайтов особенно полезен фильтр:

Fetch/XHR

Он показывает запросы JavaScript к серверу.

Предположим, пользователь отправляет форму. В Network появляется:

text POST /api/contact

Нажав на запрос, можно изучить:

• Headers — адрес, метод и заголовки;
• Payload — отправленные данные;
• Preview — удобное представление ответа;
• Response — фактический ответ сервера;
• Timing — время выполнения.

Например, в Payload может находиться:

json { "name": "Иван", "email": "user@example.com" }

А в Response:

json { "success": true }

Если вместо этого сервер возвращает статус 500, проблема, вероятнее всего, находится уже в backend-коде, базе данных или серверной конфигурации.

Как диагностировать неработающую форму

Полезна простая последовательность.

Если после нажатия кнопки запрос вообще не появился, сначала проверяйте JavaScript через Console.

Если запрос появился, но получил 400, проверьте отправляемые данные.

Если получен 404, возможно, указан неправильный адрес API.

При 500 необходимо изучать серверное приложение и его журналы.

Так DevTools позволяет быстро отделить ошибку браузерной части от серверной.

Как проверять мобильную версию, cookies и производительность

Для проверки адаптивного дизайна используется режим устройства.

В браузерах Chromium его обычно можно включить сочетанием:

Ctrl + Shift + M

После этого задайте ширину экрана, например:

text 375 px

или выберите готовый профиль устройства.

Проверьте:

• меню;
• размеры кнопок;
• формы;
• изображения;
• расположение карточек;
• отсутствие горизонтальной прокрутки;
• читаемость текста.

Постепенно меняя ширину окна, удобно искать момент, когда интерфейс начинает ломаться.

Например, если блок имеет:

css width: 900px;

на небольшом экране он может создавать горизонтальную прокрутку.

Через DevTools можно проверить вариант:

css max-width: 100%;

и сразу увидеть результат.

Раздел Application

Во вкладке Application можно исследовать данные сайта, сохранённые браузером:

• cookies;
• Local Storage;
• Session Storage;
• IndexedDB;
• Cache Storage;
• Service Workers.

Например, Local Storage может содержать:

text theme = dark language = ru

Через Console значение можно получить:

javascript localStorage.getItem('theme')

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

Как искать тяжёлые файлы

Откройте:

Network → Img

и обновите страницу.

Если одно изображение занимает несколько мегабайт, оно может заметно замедлять загрузку сайта.

Аналогично можно проверить:

• JavaScript;
• CSS;
• шрифты;
• видео.

Вкладка Timing помогает определить, сколько времени занимает конкретный запрос.

Если API долго ожидает ответа, проблема может быть связана с сервером, базой данных или внешним сервисом.

Раздел Performance

Performance используется для более глубокой диагностики.

Он позволяет записать работу страницы и определить:

• какой JavaScript выполняется слишком долго;
• почему интерфейс зависает;
• какие операции вызывают задержки;
• где возникают проблемы с отрисовкой.

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

Когда требуется помощь специалиста

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

Помощь разработчика или системного администратора может потребоваться, если:

• сервер постоянно возвращает ошибки 500;
• сайт перестал работать после обновления;
• API недоступен;
• возникают ошибки авторизации;
• страница загружается очень медленно без очевидной причины;
• проблема связана с базой данных;
• появляются ошибки HTTPS или сертификата;
• сайт работает локально, но не работает на сервере;
• требуется изменение backend-кода;
• необходимо исследовать production-систему.

Не изменяйте рабочий сервер и базу данных наугад только на основании сообщения из DevTools.

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

Чек-лист работы с DevTools

При поиске неисправности сайта используйте последовательный подход:

• откройте DevTools через F12;
• выберите проблемный элемент;
• проверьте его HTML;
• изучите применённые CSS-стили;
• обратите внимание на зачёркнутые свойства;
• откройте Console и найдите JavaScript-ошибки;
• перейдите в Network;
• обновите страницу;
• проверьте HTTP-коды;
• изучите запросы Fetch/XHR;
• проверьте Payload и Response;
• включите мобильный режим;
• протестируйте несколько размеров экрана;
• проверьте размер тяжёлых ресурсов;
• не передавайте другим людям cookies и токены;
• найденное исправление перенесите в реальный код проекта.

Периодически проверять DevTools полезно не только при появлении ошибок, но и после изменения сайта, установки новых модулей и обновления frontend-кода.

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

Сохраняются ли изменения, сделанные через DevTools?

Обычные изменения HTML и CSS действуют только в текущей странице. После обновления браузер снова получает исходные данные сайта. Постоянное исправление необходимо вносить в код проекта или CMS.

Как посмотреть ошибки JavaScript?

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

Как узнать, почему не загружается изображение?

Откройте Network, обновите страницу и найдите запрос изображения. Статус 404 обычно означает, что сервер не нашёл файл по указанному адресу.

Как проверить мобильную версию сайта?

Используйте Ctrl + Shift + M, после чего выберите профиль устройства или задайте ширину экрана вручную. Обязательно дополнительно проверяйте важные страницы на настоящем смартфоне.

Можно ли через DevTools проверить ответ API?

Да. Откройте Network, выберите Fetch/XHR, найдите нужный запрос и изучите Headers, Payload, Preview и Response.

Заключение

DevTools значительно упрощает диагностику веб-сайтов. Начинающему разработчику прежде всего стоит освоить Elements, Console, Network и режим мобильного устройства.

Через Elements удобно исследовать HTML и временно изменять CSS. Console помогает искать ошибки JavaScript, а Network показывает реальные запросы браузера, ответы API и проблемы загрузки файлов.

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

Не вставляйте в Console неизвестный код и не публикуйте cookies, токены и другие данные авторизованной сессии.

Поддержка проекта

Понравился материал?

Можно поддержать проект чашкой кофе - это помогает выпускать новые статьи, подборки и видео.

Угостить кофе

Е

Автор материала

Елена Зотова

Тема

Программное обеспечение

Дата

08.08.26