От автора: один из самых простых способов отладки чего-либо в JavaScript — это регистрировать вещи с помощью console.log. Но есть много других методов, предоставляемых консолью JavaScript, которые могут помочь вам в отладке.
Самым простым вариантом использования является регистрация строки или группы объектов JavaScript. Довольно просто:
console.log('Is this working?');Теперь представьте себе сценарий, когда у вас есть куча объектов, которые вам нужно зарегистрировать в консоли.
const foo = { id: 1, verified: true, color: 'green' };
const bar = { id: 2, verified: false, color: 'red' };Самый интуитивно понятный способ записать это — просто console.log(variable) один за другим. Проблема становится более очевидной, когда мы видим, как это отображается в консоли.
Имена переменных не видны
Как видите, имена переменных не видны. Это очень раздражает, когда у вас их много, и вам нужно развернуть маленькую стрелку слева, чтобы увидеть, каково имя переменной. Введите вычисляемые имена свойств. Это позволяет объединить все переменные в один console.log({ foo, bar });, и результат будет легко доступен. Это также уменьшает количество строк console.log в коде.
console.table()
Мы можем пойти еще дальше, собрав все это в таблицу, чтобы сделать более удобочитаемым. Всякий раз, когда у вас есть объекты с общими свойствами или массив объектов, используйте console.table(). Здесь мы можем использовать console.table({ foo, bar}) и результат будет:
console.table в действии
console.group()
Это может использоваться, когда вы хотите сгруппировать или вложить связанные данные вместе, чтобы иметь возможность легко читать логи.
Это также может быть использовано, когда у вас есть несколько операторов логов внутри функции, и вы хотите иметь возможность четко видеть область действия, соответствующую каждому оператору. Например, если вы регистрируете данные пользователя:
console.group('User Details');
console.log('name: John Doe');
console.log('job: Software Developer'); // Nested Group
console.group('Address');
console.log('Street: 123 Townsend Street');
console.log('City: San Francisco');
console.log('State: CA');
console.groupEnd(); console.groupEnd();
Сгруппированные логи
Вы также можете использовать console.groupCollapsed() вместо, console.group() если хотите, чтобы группы были свернуты по умолчанию. Вам нужно будет нажать кнопку дескриптора слева, чтобы развернуть их.
console.warn() и console.error()
В зависимости от ситуации, чтобы информация консоли была более читабельной, вы можете добавлять логи, используя console.warn() или console.error(). Также есть console.info(), который в некоторых браузерах вывод иконку «i».
Логи предупреждений и ошибок
Это можно сделать еще более гибко, добавив собственный стиль. Вы можете использовать директиву %c, чтобы добавить стили для любого оператора журнала. Это можно использовать для различения вызовов API, пользовательских событий и т. д. Например:
console.log('%c Auth ', 'color: white; background-color: #2274A5', 'Login page rendered');
console.log('%c GraphQL ', 'color: white; background-color: #95B46A', 'Get user details');
console.log('%c Error ', 'color: white; background-color: #D33F49', 'Error getting user details');Вы также можете изменить font-size, font-style и другие аспекты CSS.
Стилизация операторов console.log
console.trace()
console.trace() выводит в консоль трассировку стека и отображает, каким образом код оказался в определенной точке. Есть определенные методы, которые вам нужно вызывать только один раз, например, удаление из базы данных. console.trace() может использоваться, чтобы убедиться, что код ведет себя так, как мы хотим.
console.time()
Еще одна важная вещь, когда речь заходит о разработке интерфейса, это то, что код должен быть быстрым. console.time() позволяет синхронизировать определенные операции в коде для тестирования.
let i = 0; console.time("While loop");
while (i < 1000000) { i++;
}
console.timeEnd("While loop"); console.time("For loop");
for (i = 0; i < 1000000; i++) { // For Loop
}
console.timeEnd("For loop");
Вывод console.time() для циклов
Надеемся, что эта статья предоставила вам необходимую информацию о различных способах использования консоли.
Автор: Yash Agrawal
Источник: https://medium.freecodecamp.org
Редакция: Команда webformyself.