Отладка и отладчик

Последнее обновление: 05.09.2023

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

Что касательно отладчиков для программ на языке JavaScript, то мы можем использоваться отладчиками, встроенными в веб-браузеры. Многие распространенные веб-браузеры предоставляют возможность отладки. В данном же случае для отладки мы будем использовать встроенный отладчик в Chrome DevTools, так как Google Chrome представляет наиболее распростраенный браузер. Однако работа с отладчиками в других браузерах будет во многом похожей.

Рассмотрим следующую программу:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <script>
const numbers = [5, 3, 6, 2, 5, 1];

for(let i=0; i < numbers.length-1; i++){

    for(let j=i+1; j < numbers.length; j++){

        if(numbers[i] > numbers[j]){

            const temp = numbers[j];
            numbers[j] = numbers[i];
            numbers[i] = temp;
        }
    }
}

console.log("numbers:", numbers);
    </script>
</body>
</html>

Здесь в коде JavaScript определена простейшая сортировка массива чисел. Сначала в цикле по i проходим по всем элементам массива вплоть до последнего (не включая), и сравниваем текущий элемент по i со всеми последующими элементами в цикле по j. Если один из последующих элементов (numbers[j]) меньше текщего элемента (numbers[i]), то меняем их местами. После того, как мы сравнивали текущий элемент numbers[i] со всеми последующими (numbers[j]) и поместили в numbers[i] наименьший элемент, увеличиваем значение i и переходим к сравнению следующего элемента со всеми последующими.

И чтобы детально посмотреть, как программа сортируем массив, воспользуемся отладкой. Для этого загрузим страницу с кодом JavaScript в Google Chrome и перейдем к инструментам разработчика (можно сделать с помощью комбинации клавиш Ctrl+Shift+I). Далее в панели инструментов разработчика откроем вкладку Sources

Отладка кода JavaScript в Chrome DevTools

А в левом древовидном меню найдем файл, где у нас расположен код JavaScript (в моем случае это веб-страница index.html). И этот файл будет открыт в центральной части.

Установка точек прерывания

Чтобы иметь возможность инспектировать программу в определенной строке кода, надо на эту строку установить точку прерывания (breakpoint). В Chrome DevTools для этого достаточно нажать на номер нужной строки. После установки точки прерывания строка кода будет отмечена синий меткой:

Установка точки прерывания в коде JavaScript в Chrome DevTools

Так, на скришншоте видно, что у меня точка прерывания установлена в файле index.html на 17-й строке:

const temp = numbers[j];

В качестве альтернативы можно нажать на номер строки кода и в появившемся контекстном меню выбрать пункт "Add breakpoint" для установки на указанную строку точки прерывания.

Установка точки прерывания в Chrome DevTools

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

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

Выполнение программы JavaScript и точки прерывания в коде в Chrome DevTools

И в этой точке мы можем исследовать состояние программы на текущий момент.

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

Проверка состояния переменных JavaScript при отладке в Chrome DevTools

Например, из вышеприведенного скриншота видно, что при первом выполнении 17-й строки значение переменной i равно 0, а значение переменной j равно 1.

С помощью кнопок над правой колонкой можно управлять ходом отладки:

Управление ходом отладки JavaScript в Chrome DevTools

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

Кроме обычных точек прерывания Chrome DevTools позволяет устанавливать и другие типы точек прерывания. Так, условные точки прерывания позволяют остановить выполнение программы, если соблюдается некоторое условие. Точки прерывания DOM позволяют остановить выполнение при динамическом изменении содержимого веб-страницы. Точки преырвания обработчиков событий позволяют остановить выполнение, если сработало определенное событие веб-страницы. Точки прерывания XHR позволяют остановить программу при выполнении Ajax-запроса. И таким образом, мы можем детально исследовать различные аспекты работы программы.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850