JavaScript с нуля

Отладка JavaScript

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

В панели инструментов разработчика перейдите на вкладку Sources:

Sources дает доступ ко всем файлам вашего документа. Вы видите сырое содержимое этих файлов, а не сгенерированную версию DOM, которая, как вы помните, ваш лучший друг.

Убедитесь, что в представлении дерева слева выбран файл randomColorGenerator.htm. Это гарантия того, что содержимое этого файла будет отображено справа и вы сможете его просмотреть. Промотайте вниз до тега script, содержащего две строки кода, которые вы видели ранее. Судя по нумерации строк, указанной в столбце слева, наши строки идут под номерами 20 и 21.

Нужно проверить, что происходит, когда код в строке 21 начинает выполнение. Чтобы это сделать, нужно сообщить браузеру о необходимости остановиться перед началом выполнения кода этой строки. Делается это с помощью установки так называемой точки останова (прерывания). Щелкните на ярлык строки 21 в столбце слева, чтобы установить точку останова.

Так вы выделите строку 21:

Теперь точка останова установлена. В следующем шаге браузер должен наткнуться на эту точку или, говоря более мягко, достиг точки прерывания. В нашем случае достаточно нажать F5, чтобы обновить страницу.

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

Сейчас вы находитесь в режиме отладки. Точка останова, которую вы установили на строке 21, была достигнута, и вся страница с визгом остановила свою загрузку. Браузер попадает в режим приостановки анимации, и у вас есть возможность разобраться со всем происходящим на странице. Это как если бы остановилось время и только вы имели возможность двигаться, изучать и изменять окружение. Если об этом еще не сняли кино, то кто-нибудь обязательно должен этим заняться.

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

Можно взаимодействовать с этой справкой, делать прокрутку по объектам и даже углубиться в сложные объекты, содержащие в себе другие объекты. Так как bodyElement по сути является JavaScript/DOM-представлением элемента body, то вы увидите множество свойств, с которыми косвенно столкнулись при рассмотрении HTMLElement несколько глав назад.

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

Не стану объяснять возможности всех этих категорий, но просто скажу, что с их помощью можно изучать текущее состояние всех переменных и объектов JavaScript.

Помимо этого, точка останова предоставляет очень полезную возможность проследовать по коду так же, как это делает браузер. Мы остановились на строке 21. Чтобы проследовать далее, щелкните по кнопке Step into function call справа:

Помните, что вы сейчас находитесь на этой строке:

bodyElement.style.backgroundColor = getRandomColor();

Щелкните по указанной кнопке и посмотрите, что произойдет. Вы окажетесь внутри randomColor.js, где была определена функция getRandomColor. Нажмайте на Step into function call, чтобы двигаться по коду и проходить каждую строку функции getRandomColor. Обратите внимание, что теперь вы видите, как объекты в памяти браузера обновляются по мере выполнения кода при вашем продвижении от строки к строке. Если вы устали от этого, сделайте шаг назад, щелкнув на кнопку Step out of current function (она расположена справа от предыдущей кнопки), которая выведет вас из этой функции. В нашем случае выход произойдет обратно на строку 21 в randomColorGenerator.htm.

Если вы просто хотите запустить приложение, не продолжая прогулку по коду, то щелкните на кнопке Play, расположенной несколькими пикселями левее кнопки Step into:

Когда вы нажмете Play, код продолжит выполнение. Если у вас где-то еще определена точка останова, то она также сработает. При остановке на каждой такой точке можно совершать шаг внутрь, выход или просто возвращаться к выполнению, нажав Play. Так как мы установили только одну точку останова, то нажатие Play приведет к выполнению кода до завершения и появлению случайного цвета фона для элемента body:

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

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