JS об'єкт Console

Вступ до об'єкта Console

Об'єкт Console у JavaScript — це вбудований об'єкт, який надає можливість взаємодії з консолью веб-браузера. З його допомогою розробники можуть виводити повідомлення, перевіряти стан програми, виявляти помилки та багато іншого.

Базовий вивід в консоль:

console.log("Привіт, світ!");

В цьому прикладі використовується метод log об'єкта console для виводу рядкового повідомлення "Привіт, світ!" в консоль.

правити

Групування, вимір та трасування у Console

Коли розробник працює над великими та складними проектами, виникає потреба не тільки просто виводити інформацію в консоль, а й організовувати, аналізувати та вимірювати її ефективно. Це особливо корисно для виявлення та виправлення помилок, оптимізації продуктивності та загалом для кращого розуміння того, як ваш код взаємодіє в реальному часі. В цьому розділі ми розглянемо деякі інструменти та методи, які надає об'єкт Console, щоб допомогти вам у цих задачах

console.group() і console.groupEnd()

Ці методи дозволяють групувати повідомлення в консолі. Це особливо корисно, коли у вас є багато повідомлень, і ви хочете їх структурувати. Групування створює відступ для повідомлень, що знаходяться в межах групи, і дозволяє згортати або розгортати цю групу в консолі.

console.group("Інформація про користувача");
console.log("Ім'я: Іван");
console.log("Вік: 30");
console.groupEnd();

У цьому прикладі створюється група з назвою "Інформація про користувача", в якій містяться два повідомлення. Після завершення групи використовується метод console.groupEnd().

console.time() і console.timeEnd()

Ці методи можна використовувати для вимірювання часу виконання коду. Це величезна допомога при оптимізації програм, коли потрібно дізнатися, яка частина коду виконується надто довго.

console.time("Вимірювання часу");

// Деякі операції або функції
for(let i = 0; i < 1000000; i++) {
    // код...
}

console.timeEnd("Вимірювання часу");

У цьому прикладі ми вимірюємо, скільки часу займає цикл. Починаємо вимірювання за допомогою console.time("Вимірювання часу"), а завершуємо використовуючи console.timeEnd("Вимірювання часу"). Результат буде виведений в консоль у мілісекундах.

console.trace()

Цей метод виводить стек викликів, допомагаючи відслідкувати, як було викликано певний код. Це надзвичайно корисно при виявленні причин помилок або неочікуваного поведінки програми.

function firstFunction() {
    secondFunction();
}

function secondFunction() {
    console.trace();
}

firstFunction();

В цьому прикладі console.trace() покаже стек викликів, який демонструє, що secondFunction було викликано з firstFunction. Таким чином, можна відслідковувати "шлях" виконання коду вглиб програми.

правити

Основні методи об'єкта Console

Об'єкт Console містить багато методів, кожен з яких має свою специфіку та призначення. Розглянемо деякі з них:

console.log()

Це найбільш популярний метод, який використовується для виводу інформації в консоль. Він приймає будь-яку кількість аргументів.

console.log("Мене звати", "Іван");

У цьому прикладі два рядкових аргументи будуть виведені поруч.

console.error()

Цей метод дуже схожий на console.log(), але він використовується для виводу повідомлень про помилки. Повідомлення, виведене через console.error(), часто виділяється червоним кольором у консолі.

console.error("Це повідомлення про помилку!");

console.warn()

Цей метод виводить попередження в консоль. Як і в console.error(), текст часто виділяється жовтим кольором.

console.warn("Це попередження!");

console.table()

Щоб красиво і наглядно відобразити об'єкти або масиви в консолі, можна використовувати метод console.table().

let person = {name: "Іван", age: 30, profession: "розробник"};
console.table(person);

правити

Порада

Якщо ви виконуєте багато тестів, консоль може швидко заповнитися. Щоб очистити консоль і зробити вивід більш читабельним, використовуйте метод console.clear().

автор: Bond правити

Нотатка

Об'єкт Console має кілька методів для логування, таких як console.log(), console.warn(), console.error() тощо. Використовуйте їх згідно з серйозністю повідомлення. Наприклад, для помилок використовуйте console.error(), а для звичайних повідомлень - console.log().

автор: Bond правити

Нотатка

Використовуйте placeholder'и для форматування. Якщо вам потрібно вставити змінні в текст логу, використовуйте %s (для рядків), %d (для чисел) або %o (для об'єктів). Наприклад: console.log("Моє ім'я є %s, і мені %d років", "Анна", 25).

автор: Bond правити

Нотатка

Ви можете стилізувати текст у консолі, використовуючи CSS-стилі. Наприклад, console.log("%cВаш текст", "color: red; font-size: 20px;") виведе червоний текст великим розміром. Це може бути корисним для виділення важливих повідомлень.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

console.log(data[, ...additionalData]);
console.info(data[, ...additionalData]);
console.warn(data[, ...additionalData]);
console.error(data[, ...additionalData]);
console.assert(expression, message[, ...additionalData]);
console.group(label);
console.groupCollapsed(label);
console.groupEnd();
console.table(data[, columns]);
console.trace(label);
console.time(label);
console.timeEnd(label);

методи

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	4	3	10.5	12

Підтримка: мобільні переглядачі

Переглядач
	37	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

const someVariable = 'значення';

try {
    // Код, який може викликати помилку
    let result = someFunction();
} catch (error) {
    console.error("Сталася помилка:", error.message);
    console.log("Значення змінних на момент помилки:", someVariable);
}

// умовна тривала операція для прикладу
function performSomeComplexTask() {
    for (let i = 0; i < 1e6; i++);
}

console.time("Час виконання алгоритму");

// Ваш алгоритм або функція
performSomeComplexTask();

console.timeEnd("Час виконання алгоритму");

function firstFunction() {
    secondFunction();
}

function secondFunction() {
    console.trace("Аналіз викликів для secondFunction");
}

firstFunction();