JavaScript с нуля - [25]
Но если вы хотите немного потренироваться и увидеть некоторые из особенностей консоли, создайте HTML-документ и добавьте в него следующий код HTML, CSS и JavaScript:
Перед нами очень простая HTML-страница с кнопкой, по которой вы можете кликнуть. Когда вы это сделаете, появится диалоговое окно (такое же было описано ранее). Далее мы изменим этот пример, чтобы опробовать некоторые из возможностей консоли.
Журналирование в консоли
Первое, что мы сделаем, — прикажем нашей консоли вывести информацию на экран. Это аналогично тому, что мы ранее делали с помощью инструкции alert, и осуществляется почти так же легко. Ключом же в данном случае выступает API консоли. Этот протокол содержит множество свойств и методов, предоставляющих различные способы вывода данных на экран. Основным и, вероятно, наиболее популярным является метод log.
Знакомство с методом log
В самом базовом варианте использование этого метода выглядит так:
console.log("Look, ma! I'm logging stuff.")
Вы вызываете его через объект console и передаете ему текст, который хотите отобразить. Чтобы увидеть этот процесс в действии, можно заменить alert в нашем примере на следующее:
function doSomething(e) {
console.log("Is this working?");
}
После запуска кода щелкните по кнопке click me и загляните в консоль. Если все сработало как надо, вы увидите в ней текст «Is this working?» («Работает?»), как показано на рис. 11.6:
Рис. 11.6. Кнопка click me выведена на экран
Если вы продолжите щелкать по кнопке, то увидите, что количество экземпляров «Is this working?» увеличивается, как показано на рис. 11.7.
Рис. 11.7. Каждое нажатие на кнопку отображается в консоли
То, как это выглядит, будет зависеть от используемых инструментов разработки. Вы можете просто увидеть счетчик слева от сообщения, который будет увеличиваться, как показано на скриншоте. Вы также увидите повторение текста «Is this working?» в каждой строке. Не переживайте, если то, что вы видите в своей консоли, немного отличается от скриншотов. Важно то, что ваш вызов console.log работает и журналирует сообщения, которые вы видите в консоли. Более того, эти сообщения не только для чтения. Вы можете их выбирать, копировать и даже распечатать и повесить в рамочке на стене.
Предопределенный текст — не предел
Теперь, когда вы познакомились с основами, углубимся немного в тему. При использовании консоли ваши возможности не ограничены выводом только предопределенного текста. Например, распространенный случай — это вывод на экран значения чего-либо существующего только в качестве вычисления выражения или обращения к значению. Чтобы наглядно увидеть, что я имею в виду, внесите следующие изменения в вашу функцию doSomething:
function doSomething(e) {
console.log("We clicked on: " + e.target.id);
}
Тем самым мы даем команду консоли отобразить текст «We clicked on» в дополнение к значению id элемента, по которому мы щелкнули. Если вы выполните предпросмотр внесенных изменений в браузере и щелкните по кнопке click me, то в консоли увидите результат, соответствующий рис. 11.8.
Рис. 11.8. Отображен id кнопки, по которой мы кликнули
Значение id кнопки отображается в дополнение к предопределенному тексту. Конечно, вывод значения id элемента не самая потрясающая идея, но на деле вы вольны выводить практически все, что может быть представлено в виде текста. Так что это мощная возможность!
Отображение предупреждений и ошибок
Настало время рассмотреть метод log. Объект console предоставляет в наше распоряжение методы warn и error, которые позволяют выводить сообщения в формате предупреждений и ошибок, как это показано на рис. 11.9 соответственно.
Рис. 11.9. Мы можем делать предупреждения и указывать на ошибки… как босс!
Способ использования этих двух методов отличается от того, как вы использовали метод log. Просто передайте в них то, что нужно вывести на экран. В следующем листинге приведен пример их использования:
let counter = 0;
function doSomething(e) {
counter++;
console.log("Button clicked " + counter + " times!");
if (counter == 3) {
showMore();
}
}
function showMore() {
console.warn("This is a warning!");
console.error("This is an error!");
}
Когда этот код выполняется и известная нам кнопка нажимается трижды, происходит вызов функции showMore. В этой функции мы расположили только сообщения консоли о предупреждении и об ошибке:
function showMore() {
console.warn("This is a warning!");
console.error("This is an error!");
}
Ошибки и предупреждения предоставляют еще одну крутую возможность, выходящую за пределы простого отображения и очень отличающую их от скучного аналога log. Вы можете развернуть их в консоли и просмотреть полную трассировку стека функций, выполненных кодом, до момента встречи с ними (рис. 11.10).
