Отладка и инструменты веб-разработки - Учим JavaScript

Когда скрипт, работающий с DOM, ведёт себя неправильно, самый быстрый способ выяснить почему — посмотреть на страницу с точки зрения браузера. Инструменты разработчика (DevTools) позволяют просматривать живое дерево DOM, приостанавливать выполнение JavaScript в середине работы и точно отслеживать, что каждая строка кода делает со страницей.

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

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

Инспектирование DOM

Инструменты разработчика браузера — это утилиты, встроенные в современные браузеры для инспектирования и редактирования живого DOM, отладки JavaScript, мониторинга сетевых запросов и измерения производительности. Наиболее полезные панели для работы с DOM:

Elements (Firefox: Inspector) — живое дерево DOM и CSS, применяемый к каждому узлу.
Console — логи, ошибки и REPL, где можно выполнять JavaScript на текущей странице.
Sources (Firefox: Debugger) — ваши скрипты, где вы ставите точки останова и выполняете код пошагово.

Важный момент, в который часто путаются новички: панель Elements показывает живой DOM, а не HTML, который вы написали. Если скрипт добавляет, удаляет или перезаписывает узлы, панель Elements отражает результат после выполнения скрипта — что именно и нужно при отладке манипуляций с DOM.

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

Chrome: Щёлкните правой кнопкой мыши по странице и выберите «Просмотр кода», или нажмите Ctrl+Shift+I (Windows/Linux) или Cmd+Opt+I (Mac).
Firefox: Щёлкните правой кнопкой мыши по странице и выберите «Исследовать элемент», или нажмите Ctrl+Shift+I (Windows/Linux) или Cmd+Opt+I (Mac).
Safari: Включите меню «Разработка» в настройках, затем выберите «Показать Web Inspector» из этого меню.

Инспектирование элементов

Панель «Elements» позволяет инспектировать и редактировать HTML и CSS веб-страницы в реальном времени.

<!DOCTYPE html>
<html>
<head>
    <title>Inspecting Elements</title>
    <style>
        .highlight {
            color: red;
        }
    </style>
</head>
<body>
    <div class="content">This is some content.</div>
    <script>
        document.querySelector('.content').classList.add('highlight');
    </script>
</body>
</html>

Попробуйте сами »

Используйте панель Elements (нажмите F12, чтобы открыть инспектор, затем перейдите на вкладку Elements), чтобы проверить элемент <div class="content"> и убедиться, что к нему применён класс .highlight.

Отладка JavaScript, работающего с DOM

Использование консоли

Консоль — это самый быстрый инструмент отладки: добавьте оператор логирования, перезагрузите страницу и прочитайте вывод. Помимо базового console.log(), существует несколько методов, делающих отладку DOM намного удобнее:

console.log() — общий вывод; передайте несколько аргументов, и они выведутся рядом.
console.error() / console.warn() — стилизованные красные/жёлтые сообщения, которые легко заметить и отфильтровать.
console.dir(node) — выводит DOM-узел как объект JavaScript, чтобы можно было раскрыть его свойства, а не как HTML (что показывает console.log(node)).
console.table(data) — отображает array и object в виде сортируемой таблицы.
console.assert(condition, msg) — выводит сообщение только когда условие равно false, идеально для проверки корректности.
console.count(label) — считает, сколько раз выполнялась строка, полезно для обнаружения обработчика событий, срабатывающего слишком часто.

const items = [
  { id: 1, name: 'Alpha' },
  { id: 2, name: 'Beta' },
];

console.log('Loaded items:', items.length); // Loaded items: 2
console.table(items);                        // sortable table of both rows
console.assert(items.length > 0, 'No items!'); // silent: condition is true
console.assert(items.length > 5, 'Too few items'); // logs the assertion message

При логировании DOM-узла предпочитайте console.dir(el) для проверки его свойств (например, el.dataset или el.classList) и console.log(el) для проверки отрендеренного HTML — они показывают два разных представления одного элемента.

Установка точек останова

Точки останова позволяют приостановить выполнение JavaScript в определённых строках кода для проверки переменных и стека вызовов.

Как установить точки останова

Откройте панель «Sources» в Chrome или «Debugger» в Firefox.
Перейдите к JavaScript-файлу, который хотите отладить.
Щёлкните на номере строки, где хотите поставить точку останова.

Когда выполнение приостанавливается, используйте элементы управления шаговой отладкой: Step over (выполнить текущую строку), Step into (войти в вызываемую функцию) и Step out (завершить текущую функцию). Панель Scope показывает локальные переменные, а Call Stack — как вы оказались в этой строке.

Оператор `debugger`

Вы также можете поставить паузу прямо из кода. Когда DevTools открыт, оператор debugger; действует как точка останова, живущая в вашем исходном коде — удобно для кода, который генерируется во время выполнения или на который не удобно нажимать в панели Sources:

function updateTitle(text) {
  debugger; // execution pauses here when DevTools is open
  document.title = text;
}

Если DevTools закрыт, debugger ничего не делает, поэтому его безопасно оставлять во время разработки (но удалите перед релизом).

Условные точки останова и логпоинты

Для обработчика, который срабатывает много раз, щёлкните правой кнопкой на номере строки и выберите Add conditional breakpoint, чтобы пауза происходила только когда выражение истинно (например, count > 100). Logpoint выводит сообщение без остановки выполнения — как console.log(), который можно добавить без редактирования исходного кода.

Пример отладки манипуляций с DOM

<!DOCTYPE html>
<html>
<head>
    <title>Debugging Example</title>
</head>
<body>
    <div id="content">Hello, World!</div>
    <button id="change-text">Change Text</button>
    <p id="log"></p>

    <script>
        document.getElementById('change-text').addEventListener('click', function() {
            const content = document.getElementById('content');
            const log = document.getElementById('log');
            log.textContent = 'Current text: ' + content.textContent;
            content.textContent = 'Hello, Developer!';
            log.textContent += ' | Updated text: ' + content.textContent;
        });
    </script>
</body>
</html>

Попробуйте сами »

Этот пример демонстрирует, как отлаживать манипуляции с DOM, отображая изменения в DOM.

Распространённые проблемы и решения

Устранение типичных проблем при манипуляции DOM

Элемент не найден

Самая распространённая ошибка DOM — TypeError: Cannot read properties of null. Она означает, что селектор вернул null, потому что элемент не существует (опечатка в id или неверный селектор). Всегда проверяйте результат перед использованием. Смотрите Поиск: getElement, querySelector для понимания разницы между методами поиска.

const element = document.getElementById('nonexistent');
if (element) {
    element.textContent = 'Found!';
} else {
    document.body.insertAdjacentHTML('beforeend', '<p>Element not found</p>');
}

Неверное время выполнения

Если <script> в <head> выполняется до парсинга тела документа, искомые элементы ещё не существуют — что приводит к той же ошибке null, что и выше. Запускайте DOM-код после разбора документа, подписавшись на событие DOMContentLoaded (или разместив скрипт в конце <body>).

document.addEventListener('DOMContentLoaded', function() {
    const element = document.getElementById('content');
    element.textContent = 'DOM fully loaded';
});

CSS не применяется

Если изменение стиля не имеет видимого эффекта, убедитесь в панели Elements, что класс действительно был добавлен (element.classList) и что более специфичное правило не переопределяет его — DevTools показывает переопределённые правила с зачёркиванием. По теме: Обработка событий в DOM.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Not Applied</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div id="content">This is visible</div>
    <button id="hide-content">Hide Content</button>

    <script>
        document.getElementById('hide-content').addEventListener('click', function() {
            const content = document.getElementById('content');
            content.classList.add('hidden');
        });
    </script>
</body>
</html>

Попробуйте сами »

Этот пример демонстрирует скрытие элемента контента путём добавления класса .hidden.

Информация

Используйте панель «Sources» в инструментах разработчика браузера для установки точек останова и пошагового выполнения кода JavaScript. Это позволяет проверять переменные, стек вызовов и состояние DOM на каждом шаге, значительно облегчая поиск и исправление ошибок.

Заключение

Инструменты разработчика браузера незаменимы для инспектирования DOM, отладки JavaScript и устранения типичных проблем. Овладев этими инструментами и техниками, вы сможете значительно улучшить рабочий процесс разработки и создавать более надёжные веб-приложения.

Практика

Какие из следующих утверждений об отладке и инструментах для манипуляции DOM верны?

Панель 'Elements' в инструментах разработчика браузера позволяет инспектировать и редактировать HTML и CSS в реальном времени.Установка точек останова позволяет приостановить выполнение JavaScript и проверить переменные и стек вызовов.Использование 'console.log()' — единственный способ отладки кода JavaScript.Панель 'Network' используется для инспектирования и манипуляции DOM.Можно устранять типичные проблемы манипуляции DOM, убеждаясь, что элементы существуют в DOM до работы с ними.

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

Инспектирование DOM

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

Инспектирование элементов

Отладка JavaScript, работающего с DOM

Использование консоли

Установка точек останова

Как установить точки останова

Оператор debugger

Условные точки останова и логпоинты

Пример отладки манипуляций с DOM

Распространённые проблемы и решения

Устранение типичных проблем при манипуляции DOM

Заключение

Практика

Оператор `debugger`