Консольный API.

Умение тратить меньше времени на поиск ошибок в коде — необходимый навык, которым должен обладать каждый разработчик.

Console API, инструмент отладки, являющийся частью браузера, предоставляет разработчикам некоторые функции, позволяющие находить эти ошибки.

Я написал эту статью, чтобы показать веб-разработчикам некоторые функции, входящие в состав объекта консоли, и то, для чего они используются. Надеюсь, вы найдете ее полезной при отладке своего кода.

Содержание

Console.log()
Console.warn()
Console.error()
Console.assert()
Console.clear()
Console.table()
Console.trace()
Console.count()
Console.group()
Console.time()
Форматированный вывод с помощью Console.
Деструктуризация объекта Console.
Заключение.

Console.log()

Это самый популярный метод консоли. Он преобразует аргументы (которые разделяются запятыми) в строки и записывает их в веб-консоль. В консоли он вставляет пробелы между аргументами и начинает новую строку после вывода всех аргументов.

К другим подобным функциям относятся:

Console.debug()
Console.info()

Обычно браузер не показывает отладочные утверждения и возвращает неопределенное значение. Это происходит потому, что console.debug() была создана только для использования в местах разработки и не должна показываться пользователям. Однако это можно изменить, включив «verbose» в уровнях по умолчанию.

Примечание: При записи объектов в консоль из IDE в журнал записывается ссылка на объект, а не значение объекта при вызове console.log, а значение объекта после открытия консоли.

Console.warn()

Метод console.warn() выводит предупреждающее сообщение в веб-консоль. Обычно оно начинается с восклицательного значка.

let x = 3;
if (x == 3) {
    console.warn("This value might be too low");
}

Вход в полноэкранный режим Выход из полноэкранного режима

console.warn используется для вывода сообщений, которые не обязательно могут привести к сбою в работе приложения, но показывают что-то, о чем пользователь должен знать. Например, если API устарел, console.warn может быть использован для отправки сообщения пользователю.

Console.error()

Функция console.error() выводит сообщение об ошибке в консоль (мы все с этим сталкивались).

let x = "3";
if (!Number.isInteger(x)) {
    console.error(`${x} is not a number`);
};

Вход в полноэкранный режим Выход из полноэкранного режима

console.error() используется при создании библиотек, чтобы пользователь знал о причине, по которой его код может работать не так, как ожидалось.

Console.assert()

Функция console.assert принимает два аргумента. Первый аргумент — это блок кода, который либо истинен, либо ложен, а второй аргумент — сообщение, которое должно быть выведено на консоль.

Если первый аргумент истинен, то функция ничего не делает, если же он ложен, то второй аргумент выводится на консоль с префиксом Assertion failed».

const numbers = [1,"2",3,"4",5,"6"];
for (element in numbers) {
    console.assert(Number.isInteger(numbers[element]), `${numbers[element]} is not a number`);
}

Вход в полноэкранный режим Выход из полноэкранного режима

Console.clear()

console.clear используется для очистки консоли. Это полезно, когда вы хотите очистить другие консольные утверждения перед отображением нового.

function show() {
    console.clear();
    console.log("...checking line 2");
    console.log("...checking line 5");
    console.log("...checking line 6");
}

function clear() {
    console.clear();
    console.log("...checking line 13");
}

show();
clear();

Вход в полноэкранный режим Выход из полноэкранного режима

Console.table()

console.table принимает один аргумент, который является объектом или массивом, и отображает его в табличной форме.

Если аргументом является массив, то первый столбец будет представлять индексы массива, а второй — значения.

const color = ["blue", "red", "yellow","green", "purple"];
console.table(color);

Войти в полноэкранный режим Выйти из полноэкранного режима

Если аргументом является объект, то первый столбец будет представлять свойства объекта, а второй — значения.

const color = {
    primary : "red",
    secondary : "purple",
    tertiary : "violet"
}
console.table(color);

Войти в полноэкранный режим Выход из полноэкранного режима

Если аргументом является массив объектов, то первый столбец будет представлять индексы каждого объекта, а остальные столбцы — свойства объекта.

const members = [
    {
        name: "Micheal",
        age : 21,
        isPresent : true
    },
    {
        name : "David",
        age : 18,
        isPresent : false
    },
    {
        name : "Linda",
        age : 22,
        isPresent : true
    },
    {
        name : "Philip",
        age : 27,
        isPresent : false
    }
];
console.table(members);

Войти в полноэкранный режим Выход из полноэкранного режима

Вы также можете ограничить количество отображаемых колонок, передав второй аргумент — массив, который будет содержать только отображаемые свойства.

console.table(members, ["name","age"]);

Вход в полноэкранный режим Выход из полноэкранного режима

Console.trace()

Когда вызывается функция, она добавляется в стек вызовов. Если эта функция вызывает другую функцию, эта функция также добавляется в стек вызовов, пока не будет возвращено значение.

console.trace просто используется для отслеживания того, как была вызвана функция (то есть другие функции, которые привели к ее вызову).

function factorial(number) {
    if (number == 1) {
        console.trace("Base case");
        return 1
    }else{
        return number * factorial(number - 1);
    }
}
factorial(4);

Вход в полноэкранный режим Выход из полноэкранного режима

Видно, что мы попали в базовый случай после того, как функция была вызвана четыре раза. «Аноним» — это просто глобальное пространство имен, которое устанавливается в стеке вызовов до того, как к нему будет добавлена любая другая функция.

Console.count()

Эта функция принимает в качестве аргумента строку и выводит на консоль количество раз, когда она была вызвана с этой строкой. Если строка не передана, она ведет себя так, как будто была вызвана со строковым значением «default».

function increaseCount(user) {
    console.count(user);
}
increaseCount("Ben");
increaseCount();
increaseCount("Ben");
increaseCount();
increaseCount("Jane");

Вход в полноэкранный режим Выход из полноэкранного режима

console.count также полезен для отслеживания того, сколько раз был вызван обработчик события.

Счет можно также изменить на обратный с помощью console.countReset().

function increaseCount(user) {
    console.count(user);
}
increaseCount("Ben");
increaseCount("Ben");
increaseCount("Jane");
console.countReset("Ben");
increaseCount("Ben");

Вход в полноэкранный режим Выход из полноэкранного режима

Примечание: При попытке сбросить счетчик убедитесь, что console.count() и console.countReset имеют одинаковый аргумент.

Console.group()

console.group() группирует все последующие сообщения консоли до вызова console.groupEnd(). Аргумент console.group используется для предоставления поясняющего имени для группы.

for (let i =0; i <= 2; i++) {
    console.group(`Group ${i+1}`)
    console.log(i)
    console.log(i + 1)
    console.log(i + 2)
    console.log(i + 3)
    console.groupEnd()
}

Вход в полноэкранный режим Выход из полноэкранного режима

Console.time()

console.time() принимает аргумент, представляющий его уникальное имя, и запускает таймер с этим именем. Чтобы проверить время, необходимое для выполнения блока кода, console.time() вызывается над кодом, за которым следует другая функция console.timeEnd(), которая вызывается в конце, с тем же аргументом, переданным в console.time(). console.timeEnd() останавливает таймер и записывает в консоль время выполнения кода (в миллисекундах).

console.time(loop-time);
for (let i =0; i <= 2; i++) {
    console.log(i + 2)
}
console.timeEnd(loop-time);

Вход в полноэкранный режим Выход из полноэкранного режима

Также для проверки времени, прошедшего с момента вызова console.time(), между console.time и console.timeEnd() вызывается функция console.timeLog(), которая принимает тот же аргумент, что и console.time.

console.time("loop-time");
for (let i =0; i <= 2; i++) {
    for (let j=0; j<=2; j++) {
    console.log(i + 2)
    }
    console.timeLog("loop-time");
}
console.timeEnd("loop-time");

Вход в полноэкранный режим Выход из полноэкранного режима

Примечание : console.time() сам по себе не производит никакого вывода, и после вызова console.timeEnd() неуместно вызывать console.timeLog, пока console.time() не будет вызван снова.

Форматированный вывод с помощью Console.

Когда функции Console, аналогичные console.log(), принимают два аргумента, где первый содержит %s, %i, %d, %f, %o, %O или %c. Первый аргумент рассматривается как строка формата, а значения последующих аргументов подставляются в строку вместо двухсимвольных последовательностей %.

%s — Форматировать как строку.
%i — Форматировать как целое число.
%f — Форматировать как значение с плавающей точкой.
%O — Форматировать как объект javascript.
%o — Форматировать как элемент DOM.
%c — Форматировать как правило CSS.

const a = {name:"Cindy"};
console.log("The first user is : %O", a);
console.log("Here are the elements in the DOM : ", document.documentElement);
console.log("%cThis is a text", "color:red;font-size:2rem");

Вход в полноэкранный режим Выход из полноэкранного режима

Деструктуризация объекта Console.

Для экономии времени можно деструктурировать консольные функции из объекта Console.

const { log } = console;
const { error } = console;

log("This also works !");
error("This is wrong");

Вход в полноэкранный режим Выход из полноэкранного режима

Заключение.

Даже с учетом всех доступных функций, которые предоставляет API консоли, некоторые разработчики используют console.log() только при попытке найти ошибки в своем коде.

Иногда использование console.log() работает просто отлично, но бывает и так, что другие функции могут сэкономить вам время, предоставив лучшую информацию об ошибке, которую нужно исправить.

Спасибо, что прочитали эту статью. Надеюсь, вы узнали что-то новое и готовы приступить к реализации полученных знаний.