11 консольных методов в JavaScript для эффективной отладки

Консольные методы JavaScript позволяют разработчикам получать доступ к консоли отладки в веб-браузерах. Разработчики могут улучшить процесс отладки приложений, используя методы для вывода различных сообщений в консоль браузера.

Например, метод console.log() помогает нам печатать сообщения или данные в консоли браузера. Однако им часто злоупотребляют, поскольку разработчики не знают о других консольных методах.

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

1. Метод регистрации

Метод console.log() является наиболее часто используемым консольным методом JavaScript. Это помогает нам печатать строки, числа, объекты JavaScript или переменные в консоли. Кроме того, он записывает сообщения в терминал отладки, а не отображает их в консоли браузера.

var testVariable = 404;
console.log("This is triggered by console.log")
console.log("checking the variable value",testVariable)

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

2. Информационный метод

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

console.info("Testing the log info method")

Вывод кода выше точно такой же, как вывод метода console.log().

3. Метод отладки

В JavaScript методы console.log(), console.debug() и console.info() идентичны. Единственная разница заключается в том, как результат отображается в консоли браузера. Браузер определит цветовые коды для вывода сообщений консольного метода. По умолчанию выходные данные метода console.debug() не отображаются в инструментах разработчика Chrome. Вы должны включить параметр фильтра консоли для всех уровней, чтобы увидеть вывод метода отладки.

var userId = "UserOne";
var userId2 = "UserTwo";
var userId3 = "UserThree";

console.log("Console log"+ " " +  userId)

console.info("Console info" + " " +  userId2);

console.debug("Console debug" + " " +  userId3);

Чтобы получить вывод метода console.debug(), вам необходимо включить уровень подробной отладки в инструментах разработки в раскрывающемся списке, показанном на следующем снимке экрана.

Теперь вы можете увидеть вывод console.debug() ниже.

4. Метод предупреждения

Метод console.warn() помогает нам отображать предупреждающее сообщение в консоли. Нам нужно передать сообщение в качестве параметра. Это сообщение может быть объектом, массивом или любой переменной.

var testVariable = 404;
var testObj = { firstname : "Ravidu", lastname : "Perera" };

console.warn("This is a Warning message")

// passing a variable
console.warn(testVariable)
   
// pass an object as a warning
console.warn(testObj)

Консольный вывод этого кода следует.

Как видите, три предупреждающих сообщения выводятся в консоли вместе с предупредительным знаком. Вы также можете развернуть предупреждающее сообщение, чтобы увидеть подробную информацию об объекте.

5. Метод утверждения

Метод console.assert() отличается от рассмотренных ранее методов. Он будет печатать сообщение в консоли только в том случае, если выражение оценивается как ложное. Поэтому вам нужно передать логическое выражение в качестве параметра метода.

let x = 1;
let y = 2;
console.assert(x + y == 4, "Expression is false")
console.assert(x + y == 3, "Expression is True")
console.assert(document.getElementById("Test"), "No element found with ID 'Test'");

В приведенном выше примере первое и третье утверждения ложны. Итак, вывод будет следующим.

6. Метод подсчета

Мы можем использовать метод console.count() в качестве счетчика журнала. Он регистрирует количество вызовов метода console.count() в скрипте. Например, если вы используете его внутри цикла, вы можете узнать, сколько раз этот цикл выполняется.

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

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

Если вы вызовете метод console.count() без передачи какого-либо параметра, он напечатает счетчик с меткой «по умолчанию».

for (i = 1; i <= 5; i++) {
  let firstLabel = "First Label"
  let secondLabel = "Second Label"

  console.count(firstLabel)
  console.count(secondLabel)
}

Если вы хотите сбросить счетчик, вы можете использовать метод console.countReset(). Он также принимает параметр в качестве метки. Если вы ничего не передадите, при сбросе счетчика будет напечатано «по умолчанию». Код выглядит так.

for (i = 1; i <= 5; i++){
  let firstLabel = "First Label"
  let secondLabel = "Second Label"
  console.count(firstLabel );
}
console.countReset(firstLabel);

Вывод будет выглядеть следующим образом.

7. Метод трассировки

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

Function TraceMethod(){
   function TestMethod(){
       console.trace(“Trace call”);
   }
   TestMethod();
}
TraceMethod();

Мы получим следующий вывод консоли для приведенного выше кода.

Как видите, метод console.trace() выводит данное сообщение, а также трассировку. Здесь сначала вызывается TestMethod(), а затем вызывается TraceMethod(). Вы можете увидеть номера строк вызовов методов, которые вызываются в коде.

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

8. Методы Time, TimeLog и TimeEnd

Вы можете использовать метод console.time() для измерения времени выполнения функций. Это помогает повысить производительность приложений, выявляя низкопроизводительные функции. Например, если вам нужно измерить производительность цикла for, вы можете использовать метод console.time(), как показано ниже.

console.time("MyTimer")
for (var i = 0; i < addToCartButtons.length; i++) {
  var button = addToCartButtons[i];
  button.addEventListener('click', addToCartClicked)
}
console.timeEnd("MyTimer")

// MyTimer: 0.408935546875 ms

Вы можете установить любое количество таймеров на одной странице. Просто передайте уникальную метку, чтобы идентифицировать таймер. Наконец, вам нужно вызвать функцию console.timeEnd(), чтобы остановить таймер. Обязательно вызовите то же имя таймера внутри метода console.timeEnd().

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

9. Методы Group, GroupEnd и GroupCollapsed

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

console.log("This is the first level");

console.group("First group");
console.log("In the first group");

console.group("Second group");
console.log("In the second group under first group");
console.warn("Still in the second group");

console.groupEnd();

console.log("Back to the first group");
console.groupEnd();

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

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

Метод console.groupCollapsed() создает новую встроенную группу в консоли, но она не похожа на группу, созданную в методе console.group(). Этот метод console.groupCollapsed() покажет начало свернутой группы сообщений и все сообщения, вызванные после groupCollapsed(). Вы можете передать метку как необязательный параметр.

console.group("First group");
console.log("Main list 1");
console.log("Main list 2");
console.log("Main list 3"); 
console.groupCollapsed("Collapsed group");
console.log("List 1"); 
console.log("List 2"); 
console.log("List 3");  
console.groupEnd();

Вам нужно развернуть группу, чтобы увидеть элементы внутри.

10. Табличный метод

Если у вас есть сложный набор объектов, вы либо используете метод console.log(), либо просматриваете список объектов, чтобы изучить проблему. Однако вы можете использовать метод console.table() для улучшения процесса отладки в таких ситуациях. Вы можете использовать его для сообщения табличных версий массивов и объектов на консоль. Табличный формат данных прекрасно работает, позволяя лучше понимать данные и быстро отлаживать код. Вы также можете очень быстро сортировать столбцы. Этот метод использует любой тип объекта, массивы, массивы массивов, массивы объектов и вложенные объекты в качестве параметра.

Как объект

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

var user = {
  name:"Ravidu",
  age:25,
  job:"writer",
}

console.table(user);

Множество

Столбец index будет иметь индексы массива, начиная с нуля. Проверьте этот пример и его вывод ниже.

var cities =["Washington","Delhi","London","Stockholm"];
console.table(cities);

Массивы массивов

В этом случае имена столбцов будут увеличиваться по мере увеличения индекса.

var Destinations =[["USA", "Washington"],["India","Delhi"],["UK","London"],["Sweden","Stockholm"]];
console.table(Destinations);

Массивы объектов

Здесь значения и свойства разделены на столбцы.

var users = [
   {
       name: "Sam",
       age: 30
   },
   {
       name: "John",
       age: 45
   },
   {
       name: "Peter",
       age: 20
   }
];
console.table(users);

Вложенные объекты

Предположим, ваши значения являются вложенными объектами. Метод console.table() соответствующим образом помечает выходной индекс.

var roles = {
  writer: {
   firstname: "Ravindu",
   lastname: "Shehan", 
   email: "[email protected]"
  }, 
  reviewer: {
   firstname: "Ravindu",
   lastname: "Shehan", 
   email: "[email protected]"
  }
}

console.table (roles);

11. Очистить метод

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

Заключение

Существует так много методов и инструментов для отладки в JavaScript, но консольные методы — одни из самых простых и доступных. Более того, поскольку все методы поддерживаются практически всеми веб-браузерами, разработчикам несложно использовать эти методы при отладке.

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

Удачной отладки!

Syncfusion Essential JS 2 — единственный пакет, который вам когда-либо понадобится для создания приложения. Он содержит более 65 высокопроизводительных, легких, модульных и адаптивных компонентов пользовательского интерфейса в одном пакете. Загрузите бесплатную пробную версию, чтобы оценить элементы управления сегодня.

Если у вас есть какие-либо вопросы или комментарии, вы также можете связаться с нами через наши форумы поддержки, портал поддержки или портал обратной связи. Мы всегда рады Вам помочь!

Связанные блоги

Первоначально опубликовано на https://www.syncfusion.com 22 августа 2022 г.