На этом заканчивается наша быстрая экскурсия, посвященная использованию функции отладки. Еще раз повторюсь: я показал все достаточно поверхностно. Ресурсы в конце главы помогут продвинуться дальше.
Знакомство с консолью
Еще один важный инструмент отладки — это консоль. Она позволяет совершать несколько действий — видеть сообщения, журналируемые кодом, а также передавать команды и проверять любой объект, находящийся в текущей области видимости.
Чтобы вызвать ее, просто перейдите на вкладку Console:
Не пугайтесь пустоты, которую видите, лучше просто насладитесь этой свободой и свежим воздухом.
Инспектирование объектов
Там, где находится ваш курсор, напечатайте window и нажмите Enter:
Вы увидите интерактивный список всех элементов, находящихся в объекте window. Можно ввести любое действующее имя объекта или свойства, и если он окажется в области видимости, то к нему можно обратиться, изучить его значение или даже выполнить его:
Это ни в коем случае не песочница «только для чтения». Здесь легко можно учинить всяческие беспорядки. Например, если набрать document.body.remove() и нажать Ввод, то весь ваш документ просто исчезнет. Если вы случайно удалили body, тогда просто обновите страницу, чтобы вернуться к предыдущему состоянию. Инструменты разработчика работают напрямую с представлением страницы в оперативной памяти и не производят запись в исходный код. Поэтому ваши эксперименты без ущерба для всех останутся в промежуточной реальности.
Консоль позволяет проверять или вызывать любой объект, существующий в любой области, где в данный момент выполняется приложение. Если не установлено точек останова, тогда запуск консоли переводит вас в глобальное состояние.
Журналирование сообщений
Мы уже почти закончили с темой инструментов разработчика. В финале рассмотрим возможность консоли журналировать сообщения из кода. Помните, как мы уже делали нечто подобное?
function doesThisWork() {
console.log("It works!!!");
}
Это «нечто» мы делали, когда использовали инструкцию alert для вывода значения или подтверждения выполнения кода. Что ж, теперь можем перестать это делать. Консоль предоставляет нам гораздо менее раздражающий способ вывода сообщений, без прерывания всего процесса всплывающими диалоговыми окнами. Вы можете использовать функцию console.log для вывода нужной информации в консоль:
function doesThisWork() {
console.log("It works!!!")
}
еще раз об области видимости и состоянии
Я уже несколько раз упоминал о том, что консоль позволяет проверять текущую область видимости. По сути, все то, что мы обсуждали в главе 8 «Область видимости переменных», также относится и к поведению консоли.
Предположим, вы установили точку останова на следующей выделенной строке:
let oddNumber = false;
function calculateOdd(num) {
if (num % 2 == 0) {
oddNumber = false;
} else {
oddNumber = true;
}
}
calculateOdd(3);
Когда код при выполнении достигает этой точки, значение oddNumber по-прежнему остается false. Строка, на которой произошло прерывание, еще не была выполнена, и вы можете проверить это, протестировав значение oddNumber в консоли. А теперь предположим, что вы выполняете код, достигаете точки останова и совершаете шаг к следующей строке.
В этот момент значение oddNumber уже установлено как true. Теперь консоль будет отражать уже новое значение, так как именно оно определено для переменной oddNumber согласно представлению в оперативной памяти. Главный вывод здесь в том, что представление в консоли напрямую связано с той частью кода, на которой вы в данный момент фокусируетесь. Это становится особенно заметно, когда вы шагаете по коду и области видимости сменяются часто.
При выполнении этого кода вы увидите указанные вами данные в консоли:
Далее вы увидите, что в некоторых случаях я начну использовать console.log вместо alert.
КОРОТКО О ГЛАВНОМ
Если вы еще не использовали инструменты разработчика, то настоятельно рекомендую выделить время на ознакомление с ними. JavaScript — это один из тех языков, где проблемы могут возникнуть даже тогда, когда все вроде бы в порядке. В очень простых примерах, которые вы встретите в книге, обнаружить ошибки легко. Но когда вы сами начнете работать над крупными и более сложными приложениями, наличие правильных инструментов для определения неполадок сэкономит вам много времени и усилий.