Глава 11. Вывод сообщений в консоль
При написании кода возможны две ситуации. В первой вас будет терзать любопытство: а запустится ли только что написанный вами код? Во второй вы будете знать, что код выполняется, но при этом выполняется некорректно. Что-то не так… Но где же…
В обеих ситуациях вам понадобится дополнительное вˆидение действий кода. Неизменным подходом для получения такого вˆидения является использование метода alert:
let myButton = document.querySelector("#myButton");
myButton.addEventListener("click", doSomething, false);
function doSomething(e) {
alert("Is this working?");
}
Использование метода alert, в общем-то, неплохой вариант, и он прекрасно работает в простых ситуациях. Но когда код усложняется, такой подход теряет свою эффективность. Как новичка вас, скорее всего, взбесят постоянные закрытия огромного количества диалоговых окон, появляющихся в процессе выполнения кода. Кроме того, потребуется удобный способ сохранять получаемые сообщения, а динамичная смена диалоговых окон alert изрядно затрудняет любые попытки журналирования.
В текущем уроке мы рассмотрим одно из величайших изобретений, помогающее нам лучше понять, что именно делает наш код. Если говорить точнее, мы приступаем к изучению консоли.
Поехали!
Знакомство с консолью
Даже если вы считаете, что пишете идеальный JS-код, то все равно будете проводить много времени в так называемой консоли. Если ранее вам не приходилось ею пользоваться, поясню, что она относится к инструментам разработчика и служит для вывода на экран текста и прочих данных, с которыми (иногда) можно взаимодействовать.
Выглядит она примерно так, как на рис. 11.1.
Рис. 11.1. Знакомство с консолью
Консоль помогает решать многие задачи на очень высоком уровне:
• читать сообщения, задав в коде их журналирование и вывод на экран;
• модифицировать состояние приложения, устанавливая (или переписывая) переменные и значения;
• просматривать значение элемента DOM, используемый стиль или доступный код, находящийся в области видимости;
• использовать ее как виртуальный редактор кода и записывать/выполнять определенный код просто ради интереса.
В этом разделе мы не будем заострять внимание на всех возможностях консоли. Вместо этого плавно, шаг за шагом, научимся использовать ее для простого отображения сообщений. Остальные невероятные возможности консоли мы успеем рассмотреть позже, поэтому не переживайте.
Отображение консоли
Первое, что мы сделаем, — запустим саму консоль. Она относится к браузерным инструментам разработки, доступ к которым вы можете получить либо через меню браузера, либо с помощью горячих клавиш. Находясь в браузере, нажмите комбинацию Ctrl + Shift + I, если работаете в Windows, или Cmd + Alt + I, работая на Mac.
В зависимости от платформы браузера каждый из инструментов разработки будет выглядеть несколько иначе. Нам же важно найти вкладку консоли и открыть ее.
На рис. 11.2. показана консоль Chrome.
Рис. 11.2. Консоль Chrome
В Safari консоль будет выглядеть, как на рис. 11.3.
Рис. 11.3. Консоль Safari
Консоль Firefox изображена на рис. 11.4.
Рис. 11.4. Консоль Firefox
Консоль Microsoft Edge показана на рис. 11.5.
Рис. 11.5. Консоль Edge
Хочу отметить, что не имеет значения, какой браузер вы используете. Консоль выглядит и работает почти одинаково в любом из них. Просто вызовите ее в своем любимом браузере и приготовьтесь использовать, пока читаете следующие разделы.
Для тех, кому важны детали
Сейчас вы можете просто прочесть несколько следующих разделов и изучить целую кучу информации, и пальцем не пошевельнув. Если такой вариант вам по душе, тогда пропустите этот раздел и переходите к следующему.
Но если вы хотите немного потренироваться и увидеть некоторые из особенностей консоли, создайте 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).
Рис. 11.10. Просмотр деталей ошибок
Это полезно при работе с большими частями кода, где есть множество ответвлений. Методы warn и error являются прекрасным способом понять те извилистые пути, которые прошел код, чтобы оказаться в том или ином конечном состоянии.
КОРОТКО О ГЛАВНОМ
Консоль предоставляет вам один из лучших инструментов для понимания действий кода. Отображение сообщений — это только часть предлагаемых консолью возможностей. Помимо рассмотрения одного лишь примера с выводом сообщений нам предстоит освоить еще больше информации. Мы также узнаем о других возможностях консоли, но даже эти несколько техник, изученных к настоящему моменту, позволят вам значительно продвинуться при поиске и устранении багов.
Если у вас появились любые вопросы по этой теме, задавайте их на форуме https://forum.kirupa.com. Мы с остальными разработчиками с удовольствием поможем их решить!