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

Для отладки веб-приложений веб-консоль – это инструмент, который в основном используется для регистрации информации.

Большинство разработчиков знакомы только с console.log(). Но это не только метод, который можно использовать при отладке.

Объект консоли предоставляет несколько методов для использования. В этом уроке вы узнаете, как использовать консольные методы JavaScript.

1. консоль.warn()

Чтобы записать предупреждающее сообщение на консоль в JavaScript, используйте console.warn()method. Консоль вывода имеет желтый значок предупреждения и предупреждающее сообщение с одним или несколькими параметрами любого типа данных.

console.warn('WARNING: This is warning');

2. консоль.ошибка()

Сообщение об ошибке и значок ошибки регистрируются на консоли с помощью метода JavaScript console.error(). Он используется для уведомления о том, что произошла программная ошибка или исключение, потенциально приводящее к сбою приложения. Например, у вас есть кусок кода, и во время исключения возникает исключение. В приведенном ниже примере вы можете наблюдать, что при делении 2 на 0 возникает исключение, выполняется блок catch и регистрируется ошибка.

try {
    const a = 2 / 0;
    console.log("Result : ", a);
} catch(error) {
    console.error("This is an error")
}

3. консоль.утверждение()

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

console.assert(document.getElementById("emailID"), "Element Not Found");

4. console.count() и console.countreset()

Метод console.count() используется для записи сообщения на консоль в зависимости от количества его вызовов.

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

По умолчанию сообщение имеет статус «по умолчанию», но вы можете изменить его, указав в качестве параметра. Используйте метод console.countreset() для сброса счетчика, чтобы вы могли использовать его снова.

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

5. console.time(), console.timeLog() и console.timeEnd()

Чтобы отслеживать, сколько времени занимает действие, используйте функцию console.time() для запуска таймера. Прежде чем начать операцию, используйте функцию времени, чтобы запустить таймер, и функцию console.timeEnd() после завершения операции. Вы можете использовать это, чтобы определить, сколько времени занимает данная операция приложения.
Вы также можете использовать console.timelog()в своем коде для печати текущего времени. Это не запустит и не остановит таймеры, а только распечатает текущую метку времени. Вывод следующего кода показывает, что весь код выполняется за 0,51 мс, и во время выполнения мы просто регистрируем timeLog, который является timeStamp.

console.time("answer time");
for (let i = 1; i <= 5; i++){
    console.log('index', i);
}
console.timeLog("answer time");
for (let i = 1; i <= 5; i++){
    console.log('index', i);
}
console.timeEnd("answer time");

6. console.group() и console.groupend()

Чтобы создать группу сообщений в консоли браузера, используйте функцию console.group(). Рядом с ним начнется группировка сообщений. Затем, используя функцию console.groupend(), завершите предыдущую группу. Вы также можете попробовать вложенные группы.

console.log('Outside the Group');
console.group('Group Number 1');
console.log('Inside the Group 1');
console.log('Inside the Group 2');
console.log('Inside the Group 3');
console.log('Inside the Group 4');
console.groupend('Group Number 1');

7. Таблица

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

var user1 = {'email': '[email protected]', 'name':'User 1 - ABC'};
var user2 = {'email': '[email protected]', 'name':'User 2 - XYZ'}
console.log(user1, user2);
console.table({user1, user2});

8. Очистить

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

console.clear();

9. Настраиваемые сообщения журнала с использованием CSS:

Разработчики также могут адаптировать сообщение журнала к своим конкретным требованиям. Вы можете применить стиль CSS и передать его в качестве второго аргумента функции console.log.

console.log("%c This is the Error Message", "color: green; background-color: yellow; border: solid lightblue");

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

Ссылка: https://developer.mozilla.org/en-US/docs/Web/API/console