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