Уроки JavaScript — Шпаргалка для разработчиков по работе с консолью в браузере
Консоль браузера (также известная как консоль JavaScript или веб-консоль) — это мощный инструмент для разработчиков, интегрированный практически в каждый веб-браузер. Консоль, в частности, позволяет разработчикам взаимодействовать с кодом и настраивать его через интерфейс командной строки, получать сообщения и отчеты от скриптов, вести журналирование (логи), а также инспектировать элементы и ресурсы страницы.
В предыдущей практической статье (которая тоже была посвящена работе с консолью) я писал больше о методе console.log();. А сегодня я расширю данную тему и сделаю обзор других полезных методов, которые пригодятся каждому разработчику на JavaScript. Что позволит более эффективно использовать консоль браузера для отладки.
Как начать работу в консоли браузера?
Вы можете открыть консоль, используя разные подходы, несколько отличающиеся в зависимости от ОС/браузера, используя сочетание клавиш (горячие клавиши) или через соответствующее меню в браузере:
- Chrome/Edge:
Ctrl+Shift+J(Windows/Linux) илиCmd+Option+J(macOS) - Firefox:
Ctrl+Shift+K(Windows/Linux) илиCmd+Option+K(macOS) - Safari:
Cmd+Option+C(macOS, после включения меню «Разработка» в настройках).
Меню браузера:
Откройте меню браузера (часто представленного тремя точками или гамбургер-меню), затем найдите «Дополнительные инструменты» (More tools) или «Веб-разработчик» (Web Developer) и выберите «Инструменты разработчика» (Developer Tools) или «Веб-консоль» (Web Console). После открытия панели Инструменты разработчика выберите вкладку Консоль (Console).
После открытия консоли у вас будет доступ к объекту console, имеющему глобальную область видимости и предоставляющему доступ к консоли отладки браузера. Теперь перейдем к рассмотрению методов (функций) этого объекта.
Метод console.log(messages)
Данный метод выводит сообщение (переменную) в веб-консоль. Более подробно о методе читайте в предыдущем обзоре функции console.log(). Некоторые примеры использования:
console.log("Привет!"); // Привет!
let a = 25;
console.log(a); // 25
let b = 10;
console.log(a + b); // 35
console.log(`${a} + ${b} = ${a + b}`); //25 + 10 = 35
const obj = {name: "some object name"};
console.log(a, b, obj); // 25 10 {name: 'some object name'}
Метод console.clear()
Этот метод позволяет удалить все сообщения из консоли и в результате выведет Консоль очищена (Console was cleared). Введите данную команду, если в консоли накопилось много кода и сообщений, и вам нужно очистить консоль:
console.clear();
Для очистки Консоли вы также можете воспользоваться горячими клавишами Ctrl+L.
Метод console.assert(condition, failure message)
С помощью этого метода можно запустить простой тест проверки утверждений, где первым параметром будет условие, а во втором параметре указано сообщение, которое выведется только при ошибке (непрохождении проверки):
let a = 25;
console.assert(a === 25, "Это не будет выведено в консоль:"); // ошибка не покажется, ведь условие выполняется
console.assert(a != 25, "Это будет выведено в консоль:", `a = ${a}`); // будет показана ошибка Assertion failed
Метод console.count()
Записывает (логирует) количество раз, сколько был вызван конкретный вызов count():
function testCount() {
console.count();
}
testCount(); // default : 1
testCount(); // default : 2
testCount(); // default : 3
Метод console.countReset()
Эта функция сбрасывает счетчик; можно изменить метку (default), если передать дополнительный аргумент:
console.count(); // default: 1 console.count(); // default: 2 console.count(); // default: 3 console.countReset(); console.count(); // default: 1
Методы, которые имеют сходство с использованием console.log
Метод console.info()
С помощью этого метода вы можете просто выводить информативное текстовое сообщение в консоль:
console.info("Информационное сообщение");
Только в браузере Firefox перед сообщением в консоли отображается маленький значок i. Все остальные просто выводят сообщения по типу как в console.log.
Метод console.warn()
Этот метод тоже выводит сообщение в консоль, но в отличие от предыдущего, оно будет носить предупредительный характер (будет подсвечено желтым и будет иметь соответствующий значок):
console.warn("это предупредительное сообщение ⚠️");
let temp = 36.6;
if (temp > 36.6) {
console.warn("температура высокая");
}
Метод console.error()
Если нужно еще больше привлечь внимание к ошибке в консоли, используйте этот метод. Он «раскрасит» сообщение в красный цвет:
console.error("это более критическая ошибка");
Метод console.trace()
Будет полезным, когда нужно вывести трассировку стека текущей функции в консоль. Трассировка – это процесс записи информации о ходе выполнения скрипта, позволяющий лучше понять, как программа работает: увидеть «маршрут» выполнения скрипта, включая вызовы функций, значения переменных и других важных событий:
function a() {
b();
}
function b() {
c();
}
function c() {
console.trace();
}
function testTrace() {
a();
}
testTrace();
Метод console.dir()
С помощью этого метода вы можете выводить объекты в консоли в более удобном (для чтения) формате:
const obj = {
"phone": {
mobile: {
first: '123-456-789',
second: '789-456-123',
},
landline: {
single: '123-789-456'
}
},
"name": "some object name"
}
console.dir(obj);
Метод console.dirxml()
Этот метод будет полезен, когда нужно вывести в консоли разметку определенного элемента DOM-дерева.
console.dirxml(document.body); // это отобразит все DOM-дерево тэга body элемента html
Методы console.time(label) и console.timeEnd(label)
Эти методы пригодятся, когда нужно «засечь время», необходимое для выполнения определенной функции. Мы можем запустить таймер с помощью console.time, а затем завершить его с помощью console.endTime:
function a() {
for (let i = 0; i < 10000; i++) {
// определенный код;
}
}
console.time(); // начинаем отсчет
a(); // запуск функции
console.timeEnd();// default: 0.10302734375 ms
console.time("test"); // начинаем отсчет
a(); // запуск функции
console.timeEnd("test"); // test: 0.033203125 ms
// заметьте, что повторное выполнение функции осуществляется значительно быстрее (благодаря кэшированию)
Методы для группировки сообщений в консоли
Методы console.group() и console.groupEnd()
С помощью этих функций группа сообщений в консоли будет лучше организована визуально, что может помочь при отладке. В группе сообщения будут показаны с небольшим отступом, а саму группу можно свернуть/развернуть, что добавляет удобства при просмотре. Группы также могут быть внутри других групп. Вот простой пример использования этих методов:
console.group("Дни недели");
console.log("Пн");
console.log("Вт");
console.log("Ср");
console.log("Чт");
console.log("Пт");
console.group("выходные");
console.log("Сб");
console.log("Вс");
console.groupEnd("выходные");
console.groupEnd("Дни недели");
Метод console.table(obj)
Этот метод выводит объекты в удобном формате таблицы, что также визуально будет лучше выглядеть при отладке:
let user = {
name: "Степан",
age: 42,
mobile: "123-456-789-0"
}
console.table(user);
На этом все, спасибо за внимание! Надеюсь, что сегодняшняя практичная шпаргалка по методам работы с консолью в браузере пригодится вам при разработке на JavaScript.
Нужно больше информации?
