Автор оригинала: FreeCodeCamp Community Member.
Яш Аграван
Одним из самых простых способов отлаживать что-либо в JavaScript, является введя материал, используя console.log Отказ Но есть много других методов, предоставленных консолью, которая может помочь вам отладить лучше.
Давайте начнем.
Очень базовый корпус использования – это регистрировать строку или кучу объектов JavaScript. Довольно просто,
console.log('Is this working?');Теперь представьте сценарий, когда у вас есть куча объектов, которые вам нужно войти в консоль.
const foo = { id: 1, verified: true, color: 'green' };const bar = { id: 2, verified: false, color: 'red' };Самый интуитивный способ войти в систему это просто console.log (переменная) один за другим. Проблема более очевидна, когда мы видим, как она проявляется на консоли.
Как вы можете видеть, никакие имена переменных не видны. Это становится чрезвычайно раздражающим, когда у вас есть куча их, и вы должны расширить маленькую стрелку слева, чтобы увидеть, что именно имя переменной. Введите имена вычисляемых свойств. Это позволяет нам в основном клуб все переменные вместе в одном console.log ({foo, bar}); И вывод легко виден. Это также уменьшает количество console.log Линии в нашем коде.
Console.table ()
Мы можем сделать этот шаг дальше, надевая все эти вместе в таблицу, чтобы сделать его более читаемым. Всякий раз, когда у вас есть объекты с общими свойствами или массивом объектов, используемых Console.table () Отказ Здесь мы можем использовать Console.table ({foo, bar}) И консоль показывает:
Console.Group ()
Это может быть использовано, когда вы хотите группировать или Nest соответствующие детали вместе, чтобы иметь возможность легко читать журналы.
Это также может быть использовано, если у вас есть несколько операторов журнала внутри функции, и вы хотите, чтобы иметь возможность четко видеть область, соответствующую каждому утверждению.
Например, если вы регистрируете детали пользователя:
console.group('User Details');console.log('name: John Doe');console.log('job: Software Developer');// Nested Groupconsole.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');Вы также можете изменить Размер шрифта , Стиль шрифта и другие CSS вещи.
console.traace ()
console.traace () Выводит трассировку стека на консоль и отображает, как код завершился в определенной точке. Есть определенные методы, которые вы хотели бы только один раз, например, удаление из базы данных. console.traace () Может использоваться, чтобы убедиться, что код ведет себя так, как мы хотим.
Консоль. Время ()
Еще одна важная вещь, когда дело доходит до разработки Frontend, заключается в том, что код должен быть быстрым. Консоль. Время () Позволяет время определенных операций в коде для тестирования.
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");Надеемся, что статья предоставила некоторую информацию о различных способах использования консоли. Если у вас есть какие-либо вопросы или хотите, чтобы я уточнил, пожалуйста, оставьте мне записку ниже или обратитесь к мне на Twitter или Email Отказ