Консоль браузера (також відома як консоль JavaScript або веб-консоль), — це потужний інструмент для розробників, що інтегрований практично у кожен веб-браузер. Консоль, серед іншого, дозволяє розробникам взаємодіяти з кодом та налагоджувати його через інтерфейс командного рядка, отримувати повідомлення та звіти від скриптів, вести журналювання (логи), а також інспектувати елементи та ресурси сторінки.
В попередній практичній статті (яка теж була присвячена роботі з консоллю) я писав більше про метод console.log();. А сьогодні я розширю дану тему і огляну інші корисні методи, що стануть в нагоді кожному розробнику на JavaScript. Що дозволять більш ефективно використовувати консоль браузера для налагодження.
Ви можете відкрити консоль, використовуючи різні підходи, що дещо відрізняються залежно від ОС/браузера, використовуючи сполучення клавіш (гарячі клавіши), або ж через відповідне меню у браузері:
Ctrl+Shift+J (Windows/Linux) або Cmd+Option+J (macOS)Ctrl+Shift+K (Windows/Linux) або Cmd+Option+K (macOS)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.
Дискусії навколо цієї теми вас, певно, вже втомили. Але я в даній статті постараюсь показати…
Ніколи не вказуйте на помилки, якщо не знаєте, як їх виправити Джордж Бернард Шоу
Коли необхідно зробити вибір, а ви його не робите, — це теж вибір Вільям Джеймс…
Коли ви ставите перед собою цілі, дуже важливо бути максимально конкретним. Тут не допоможе проста…
Сучасна людина думає, що втрачає час, коли не діє швидко, однак не знає, що робити…
Унікальна елегантність і довговічність: чому варто купити травертин або граніт Натуральний камінь це більше, ніж…