Отладка и отладчик
Отладка и отладчик
Отладка – неотъемлемая часть процесса разработки программного обеспечения, представляющая собой метод поиска и устранения ошибок и багов в коде.
Для эффективного проведения отладки применяются специальные инструменты, такие как отладчики. Однако, помимо выявления проблем, отладка и использование отладчика являются мощным средством для понимания потока выполнения программы, ее внутренних механизмов и обогащения навыков разработки.
В контексте JavaScript часто используют встроенные отладчики в веб-браузерах. Многие популярные браузеры предоставляют инструменты отладки, и в данном случае мы рассмотрим встроенный отладчик в Chrome DevTools, учитывая популярность браузера Google Chrome. Однако процесс работы с отладчиками в других браузерах будет аналогичным.
Рассмотрим пример кода, представленный ниже:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Coursme.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 в Google Chrome и перейдем к инструментам разработчика (можно сделать с помощью комбинации клавиш Ctrl+Shift+I). Далее в панели инструментов разработчика откроем вкладку Sources
А в левом древовидном меню найдем файл, где у нас расположен код JavaScript (в моем случае это веб-страница index.html). И этот файл будет открыт в центральной части.
Установка точек прерывания
Чтобы иметь возможность инспектировать программу в определенной строке кода, надо на эту строку установить точку прерывания (breakpoint). В Chrome DevTools для этого достаточно нажать на номер нужной строки. После установки точки прерывания строка кода будет отмечена синий меткой:
Так, на скришншоте видно, что у меня точка прерывания установлена в файле index.html на 13-й строке
numbers[i] = temp;
В качестве альтернативы можно нажать на номер строки кода и в появившемся контекстном меню выбрать пункт "Add breakpoint" для установки на указанную строку точки прерывания.
Чтобы удалить точку прерывания, достаточно нажать на синюю метку на номере строки
При остановке на точке прерывания мы можем увидеть часть информации непосредственно в после с исходным кодом файла, например, навести на нужную нам переменную, и нам образится ее значение. Но для более подробной информации предназначена правая колонка, где можно посмотреть текущие значения глобальных и локальных переменных, значения параметров, стек вызова функций и прочую информацию:
Кроме обычных точек прерывания Chrome DevTools позволяет устанавливать и другие типы точек прерывания. Так, условные точки прерывания позволяют остановить выполнение программы, если соблюдается некоторое условие.
Точки прерывания DOM позволяют остановить выполнение при динамическом изменении содержимого веб-страницы. Точки преырвания обработчиков событий позволяют остановить выполнение, если сработало определенное событие веб-страницы. Точки прерывания XHR позволяют остановить программу при выполнении Ajax-запроса. И таким образом, мы можем детально исследовать различные аспекты работы программы.
Заключение
Отладка и использование отладчика в JavaScript, особенно в Chrome DevTools, не только помогают обнаруживать и устранять ошибки, но и предоставляют возможность глубже понять работу программы, ее поток выполнения и внутренние механизмы. Это важный инструмент для разработчиков, способствующий повышению качества кода и навыков программирования.
Будьте первым