7 полезных методов объекта консоли в JavaScript

Уровни ведения журналов в браузерах

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

В первой статье мы рассмотрим самый распространенный способ отладки — консольный объект, который можно использовать в браузере (а также в NodeJS).

Все сообщения, отправленные с помощью объекта консоли, будут отображаться в консоли вашего браузера. Но сначала вам нужно знать, что существует несколько уровней ведения журнала. Они помогают группировать сообщения.

Типы журналов в браузерах Chrome и Firefox

Предупреждения
Ошибки
Журналы
Информация
Отлаживать

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

По моему опыту, наиболее часто используемыми уровнями журналов являются информация, отладка и ошибки. И по умолчанию в информации браузера Chrome включены уровни отладки, ошибок и предупреждений.

Вы можете включить или отключить уровни ведения журнала по своему усмотрению, нажав кнопку «Уровни по умолчанию» в консоли Chrome и там просто выбрав нужный уровень ведения журнала.

2. Консольный объект

Объект Console обеспечивает доступ к консоли отладки браузера.

Ниже в этой статье мы рассмотрим самые полезные консольные методы (на мой взгляд). Кроме того, я оставлю ссылки на каждый из методов, чтобы вы могли узнать о них больше.

Прежде чем мы начнем, давайте определим объект для тестирования методов консоли. С массивом пользователей и их информацией (имя, электронная почта, возраст, язык). Кроме того, у нас есть две функции внутри printHello и printGoodby.

const myObject = {  
  users: [    
    { 
      name: 'Alex', 
      email: '[email protected]', 
      age: 21, 
      language: 'English' 
    },    
    { 
      name: 'Peter', 
      email: '[email protected]', 
      age: 24, 
      language: 'English' 
    },
    { 
      name: 'Swen', 
      email: '[email protected]', 
      age: 23, 
      language: 'English' 
    }
  ],   
  printHello: name => console.log(`Hello ${name}`),  
  printGoodbye: name => console.log(`Goodbye ${name}`)
}

console.log(msg, obj)

Этотметод используется чаще всего. Почти каждый начинающий программист пишет свой первый код, используя этот метод.

Цель этого метода — просто распечатать ваше сообщение в консоли браузера. Кроме того, вы можете увидеть, что находится внутри вашего JS-объекта. Итак, давайте распечатаем наш объект.

console.log("My object", myObject)

Одна интересная деталь, вы можете напечатать какое-то сообщение вместе с вашим объектом. Кроме того, вы можете определить строку замены для форматирования вывода.

console.log(
"User's: %o. User's email %o",
myObject.users[0].name,
myObject.users[0].email
)

Эти методы работают так же, как метод log(), за исключением того, что он печатает ваши сообщения и объекты на уровнях консоли debug, error, info и warn соответственно.

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

console.count(“метка”)

myObject.users.forEach(() => { console.count('forEach') })
console.count('Other label')
console.count('Other label')
console.count('Other label')

Этот метод показывает только, сколько раз был вызван метод с определенной меткой. И в консоли вы увидите что-то вроде этого.

Как вы можете использовать этот метод?

Давайте представим, что у вас есть компонент React, и вы хотите знать, сколько раз он был перерендерен. Просто поместите метод в функцию render и проверьте результат в консоли браузера.

console.table(dataArray)

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

console.trace()

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

function firstFunction() { secondFunction() }
function secondFunction() { thirdFunction() }
function thirdFunction() { console.trace() }
firstFunction()

Итак, у нас есть три функции. Они имеют следующий порядок выполнения.

firstFunction ⇾secondFunction ⇾ thirdFunction ⇾ console.trace()

В результате вы увидите в консоли трассировку стека

В следующей статье мы рассмотрим другой способ отладки — отладчик JavaScript в браузере и VS Code.

Также мы узнаем, как ставить код на паузу и проверять состояние объектов, что такое точка останова и зачем она нужна.

7 полезных методов объекта консоли в JavaScript

Вопросы по теме