Каждый разработчик JavaScript использовал console.log («сообщение»).

Он предоставляет простую консоль отладки, аналогичную механизму консоли JavaScript, предоставляемому веб-браузерами.

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

Все следующие методы доступны в консоли глобального экземпляра, поэтому нет необходимости требовать консольный модуль.

По умолчанию: console.log () | информация () | отладка () | предупреждать () | error () 🔥

Эти консоли будут напрямую печатать необработанную строку с соответствующим цветом в зависимости от типа события, которое им предоставлено.

console.log("console log")
console.info("console info")
console.debug("console debug")
console.warn("console warn")
console.error("console error")

Стилизация вывода консоли 👻

Вы можете использовать директиву% c, чтобы применить стиль CSS к консольному выводу.

console.log("%cText color is green and increased font size", "color: green; font-size: 2rem;")

Мы можем добавить% c несколько раз.

console.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message");

1. console.table ()

console.table () позволяет нам создать таблицу внутри консоли. Входные данные должны быть массивом или объектом, который будет отображаться в виде таблицы.

let info = [["Suprabha"], ["Frontend Dev"], ["Javascript"]]
console.table(info)

2. console.group («группа») и console.groupEnd («группа»)

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

Используя консольную группу, ваши консольные журналы группируются вместе, а каждая группировка создает другой уровень в иерархии. Вызов groupEnd уменьшает единицу.

console.group()
    console.log("Test 1st message")
    console.group("info")
        console.log("Suprabha")
        console.log("Frontend Engineer")
    console.groupEnd()
console.groupEnd()

3. console.dir ()

Печатает JSON-представление указанного объекта.

let info = {
    "name": "Suprabha", 
    "designation": "Frontend Engineer",
    "social": "@suprabhasupi"    
}
console.dir(info)

4. console.assert ()

Запишите сообщение и трассировку стека на консоль, если первый аргумент ложен.

Он напечатает только ложный аргумент. Если первый аргумент верен, он ничего не делает.

console.assert(false, "Log me!")

Пример:

let name = "supi"
let msg = "Its not a number"
console.assert(typeof msg === "number", {name: name, msg: msg})

5. console.count ()

Эта функция регистрирует, сколько раз был вызван этот конкретный вызов count(). Эта функция принимает необязательный аргумент label.

Если указано label, эта функция регистрирует количество вызовов count() с этим конкретным label.

console.count("Hey")
console.count("Hey")
console.count("Hey")
console.count("Hey")

Если label опущено, функция регистрирует количество вызовов count() в этой конкретной строке.

for (let i = 0; i < 5; i++) {
    console.count()
}

6. console.time () и console.timeEnd ()

Проверьте производительность вашего кода во время выполнения

console.time () - лучший способ отслеживать микровремя, затрачиваемое на выполнение JavaScript.

console.time("Time")
let l = 0;
for (let i = 0; i < 5; i++) {
   l += i
}
console.log("total", l)
console.timeEnd("Time")

Ссылка 🧐

🌟 Twitter | 👩🏻‍💻 suprabha.me | 🌟 Instagram