Как выйти за пределы console.log и получить максимальную отдачу от консоли отладки вашего браузера

1656578897 kak vyjti za predely consolelog i poluchit maksimalnuyu otdachu ot

от Гилада Даяги

The console object – это очень полезная функция браузеров, которая существует уже много лет. Он предоставляет доступ к консоли отладки браузера.
Большинство веб-разработчиков знают, как печатать сообщения на консоли с помощью console.log. Но я обнаружил, что многие не знают о других особенностях consoleХотя они могут быть очень полезны для каждого веб-разработчика.

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

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

Использование нескольких аргументов

Достаточно часто регистрировать несколько значений вместе. Это может быть сообщение вместе со связанным значением или содержимым нескольких связанных переменных.

Вот два способа, которыми я видел, как разработчики добились этого:

1. Конкатенация строк

const a = 123;const b = 'abc';const c = {aa: 234, bb: 345};console.log('Foo bar ' + a + ' ' + b + ' ' + c);
WFSwkoS7zJAs08juQqlWTIZ2O2I8NVELVZ1Y
Результат конкатенации строк

2. Использование нескольких звонков

const a = 123;const b = 'abc';const c = {aa: 234, bb: 345};console.log('Foo bar');console.log(a);console.log(b);console.log(c);
d2KZzOM5YcPtJSnoSwxdg4rS9XrUEkAKs6lr
Результат нескольких звонков

Эти методы могут работать (если-то), но:

  • Они не гибкие
  • Они не очень читаются
  • Их громоздко писать
  • Им нужны специальные средства для правильной работы с объектными переменными

Есть несколько лучших альтернатив для выведения многих переменных. Самым полезным для быстрого дампа данных является отправка нескольких аргументов console.logвот так:

const a = 123;const b = 'abc';const c = {aa: 234, bb: 345};console.log('Foo bar', a, b, c);
5oOGL4AISGJppBuuhXTHdQst6tNS6rK0a5oO
Результат нескольких аргументов

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

Использование разных уровней журнала

Кроме знакомых console.logсуществуют другие методы ведения журнала, которые соответствуют разным уровням журнала:

console.debug('Debug message');console.info('Info message');console.log('Good old log message');console.warn('A warning message');console.error('This is an error');
7LZRb5ZUSjcnw5ObZc96va9fzNjsJpudvrhS
Уровни журнала, как показано в Google Chrome

Каждый уровень журнала может иметь другой стиль по умолчанию, что облегчает обнаружение ошибок и предупреждений.

Обычно вы можете отфильтровать, какие уровни журнала вы хотите видеть на консоли DevTools. Это может помочь снизить беспорядок.

4FS42J3jrB8sTwERLqDj-KS-5-8bq8GkXw0T
Фильтрация уровней журнала в Google Chrome

Внешний вид разных уровней и детализации фильтрации изменяются от браузера к браузеру.

Группировка строк консоли

Иногда полезно группировать сообщения журнала вместе. Это может обеспечить более организованный и читаемый выход.

На самом деле этого добиться очень просто:

console.group();console.log('First message');console.log('Second message');console.groupEnd();
GYLLEc1rejWitvOzcAAIUyrzWGxYkIe7C4OI
Сгруппированные сообщения журнала

Обратите внимание, что группы журналов также могут быть вложены и отмечены:

console.group('Group aaa');console.log('First message');console.group('Group bbb');console.log('level 2 message a');console.log('Level 2 message b');console.groupEnd();console.log('Second message');console.groupEnd();
ddmYWHrx7W0lAeHRE0mLPx7wKk-adr2lxT00
Вложенные и обозначенные группы

Если вы хотите, чтобы группа выглядела свернутой, используйте console.groupCollapsed()

Измерение производительности

Измерение времени между точками кода может служить быстрым способом проверить производительность некоторых операций.

Вот тривиальный способ сделать это:

const start = Date.now();// do some stuffconsole.log('Took ' + (Date.now() - start) + ' millis');

Это работает, но есть более элегантный способ достичь чего-то подобного:

console.time('Label 1');// do some stuffconsole.timeEnd('Label 1');
OBuRCdSdW7cLv9BSmKHsTGcpwizTlUehKbEj
Измерение времени с помощью консоли

Код более короткий, измерение точнее, и вы можете отслеживать до 10 000 различных таймеров параллельно на странице.

Замена строки

Раньше мы узнали, что можно передать несколько аргументов console.log для одновременного выведения нескольких значений. Другой способ достичь чего-то подобного – использовать замену строк. Этот метод требует знакомства с доступными заполнителями, но обеспечивает больший контроль над результатом.

const a = 123;const b = 'abc';const c = {aa: 234, bb: 345};console.log('number %d string %s object %o', a, b, c);
m5jIme1eJX9jT0wCHsBxA6mSUyG70r5Af4aQ
Регистрация с заменой строк

Просмотрите документацию (ссылка в конце), чтобы найти список доступных заполнителей.

Заключение

Для улучшения читабельности могут быть хорошо оформлены различные сообщения журнала.

Мы уже упоминали, что браузеры предоставляют разные стили по умолчанию для некоторых уровней журнала, но это также можно настроить в соответствии с вашими конкретными потребностями. Стилизация выполняется с помощью подмножества правил CSS, которые передаются в строке как второй параметр и применяются с помощью маркера %c.

Обратите внимание, что вы можете иметь разные стили для различных частей сообщения журнала.

Например:

console.log("Normal %cStyled %clorem %cipsum", "color: blue; font-weight: bold", "color: red", "background-image: linear-gradient(red, blue); color: white; padding: 5px;");
al9DXYCJEKx4DtYd1gHx4K8CjKrn0xRCEZnU
Сообщения журнала в стиле

Резюме

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

Если это вас заинтересовало, и вы хотите узнать, что еще можно делать с этим consoleя рекомендую прочитать соответствующую документацию о MDN и попробовать что-нибудь в DevTools.

Если вы нашли это полезно, поделитесь этой статьей в социальных сетях.
Вы также можете подписаться на меня в Twitter (@giladaya). Спасибо, что прочли!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *