JavaScript с нуля

Журналирование сообщений

Мы уже почти закончили с темой инструментов разработчика. В финале рассмотрим возможность консоли журналировать сообщения из кода. Помните, как мы уже делали нечто подобное?

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 — это один из тех языков, где проблемы могут возникнуть даже тогда, когда все вроде бы в порядке. В очень простых примерах, которые вы встретите в книге, обнаружить ошибки легко. Но когда вы сами начнете работать над крупными и более сложными приложениями, наличие правильных инструментов для определения неполадок сэкономит вам много времени и усилий.

Чтобы узнать больше об инструментах разработчика (или Dev Tools, как их называют крутые ребята), обратитесь к следующим ресурсам:

• Обзор Chrome Dev Tools: http://bit.ly/kirupaChromeDevTools

• Обзор IE/Edge F12 Dev Tools: http://bit.ly/kirupaIEDevTools

• Обзор Firefox Dev Tools: http://bit.ly/kirupaFFDevTools

• Обзор Safari Web Inspector: http://bit.ly/kirupaSafariDevTools

ЧАСТЬ IV. Полны событиями