Уроки 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.