Творческий подход с помощью Console API!

Отладка в JavaScript всегда была неразрывно связана с Console API который в большинстве случаев используется только через console.log () . Но знаете ли вы, что так не должно быть? Разве console.log () уже наскучил вам своим монолитным выходом ? Хотите улучшить свои журналы, сделать их красивее ? 💅 Если это так, следуйте за мной, и мы узнаем, насколько красочным и игривым может быть API консоли!

Верьте или нет, но console.log () сам по себе имеет некоторые дополнительные функции Вы можете не знать о. Конечно, его основное назначение — регистрация — остается нетронутым. Единственное, что мы можем сделать, это сделать его красивее! Давайте попробуем это, не так ли? 😁

String subs

Единственное, что тесно связано с методом console.log () это то, что вы можете использовать его с так называемым подстановкой строк ]. Это в основном предоставляет вам возможность использовать определенные выражения в строке, которые впоследствии будут заменены предоставленными аргументами. Это может выглядеть примерно так:

  console.log («Значение объекта:% o с подстановкой строк»,
    {string: "str", number: 10});
 

Хорошо, а? Подвох состоит в том, что существует несколько вариантов выражения подстановки строк:

• % o /% O — для объектов;
• % d /% i — для целых чисел;
• % s — для строк;
• % f — для чисел с плавающей точкой;

Но, учитывая сказанное, вы можете спросить, зачем вообще использовать такую ​​функцию? Особенно, когда вы можете легко передать несколько значений в журнал, например:

  console.log («Значение объекта:»,
    {string: "str", number: 10},
    "с подстановкой строк");
 

Кроме того, для строк и чисел вы можете просто использовать строковые литералы ! Так в чем же дело? Ну, во-первых, я бы сказал, что когда вы ведете красивую консольную регистрацию, вам просто нужны хорошие строки, а строковые подпрограммы позволяют вам делать это с легкостью! Что касается вышеупомянутых альтернатив — вы должны согласиться — вы должны держать глаза открытыми для всех этих мест. Subs С подводными лодками это намного удобнее. Что касается строковых литералов, то их не было так долго, как эти сабвуферы (удивительно!) И … они не обеспечивают одинаковое, приятное форматирование для объектов. Но да, пока вы работаете только с числами и строками, вы можете предпочесть другой подход .

CSS

Есть еще один подобный строке директива, которую мы не узнали раньше. Это % c и это позволяет вам применять строку стилей CSS к вашим зарегистрированным сообщениям! 😮 Позвольте мне показать вам, как его использовать!

  console.log («Пример% cCSS в стиле% c% clog!»,
    "цвет: красный; семейство шрифтов: моноскоп;",
    "", "цвет: зеленый; размер шрифта: большой; вес шрифта: полужирный");
 

Приведенный выше пример широко использует директиву% c. Как видите, стили применяются ко всему, что следует директиве. Единственный способ избежать этого — использовать еще одну директиву. И это именно то, что мы делаем здесь. Если вы хотите использовать нормальный формат журнала без стиля, вам нужно будет передать пустую строку. Я думаю, что само собой разумеется, что значения, предоставленные директиве% c, а также другим строковым подпрограммам, должны быть представлены в ожидаемом порядке, один за другим в качестве дополнительных аргументов. 😉

Мы только начинаем, и мы уже добавили CSS в наши журналы — вау! Какие еще секреты есть у Console API?

Группировка

Слишком много ведения журналов консоли не очень полезно — это может привести к ухудшению читаемости и, следовательно, … бессмысленным журналам. Всегда хорошо иметь некоторую структуру . Вы можете добиться именно этого с помощью console.group () . Используя этот метод, вы можете создавать глубокие, разборные структуры в вашей консоли — groups ! Это позволяет не только скрывать, но и организовывать журналы. Существует также метод console.groupCollapsed () если вы хотите, чтобы ваша группа была свернута по умолчанию. Конечно, группы могут быть вложенными сколько угодно (со здравым смыслом). Вы также можете сделать так, чтобы ваша группа имела что-то вроде заголовка журнала, передав ей список аргументов (как в console.log () ). Каждый консольный вызов, выполненный после вызова метода group, найдет свое место внутри созданной группы. Чтобы выйти из него, вы должны использовать специальный метод console.groupEnd () . Просто, правда? 😁

  console.group ();
console.log («Внутри 1-й группы»);
console.group ();
console.log («Внутри 2-й группы»);
console.groupEnd ();
console.groupEnd ();
console.log («Внешняя область»);
 

Я думаю, вы уже заметили, что вы можете просто скопировать и вставить код из всех предоставленных фрагментов в вашу консоль и играть с ними так, как вы хотите!

Трассировка

Другая полезная информация, которую вы можете получить с помощью API консоли, — это путь, который ведет к текущему вызову ( путь выполнения / трассировка стека ). Вы знаете, список ссылок внутри кода, которые были выполнены (например, цепочки функций), чтобы добраться до текущего вызова console.trace () потому что это метод, о котором мы говорим. Эта информация чрезвычайно полезна, будь то для обнаружения побочного эффекта или для проверки потока вашего кода. Просто вставьте приведенный ниже фрагмент в свой код, чтобы увидеть, о чем я говорю.

  console.trace («Проходя здесь!»);
 

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

Предупреждение

Метод console.warn () ведет себя так же, как console.log (как большинство из этих методов ведения журнала)), но, кроме того, у него есть свой собственный стиль предупреждения . Most В большинстве браузеров он должен быть желтым и иметь где-то предупреждающий символ (по естественным причинам). Вызовы этого метода также возвращают трассировку по умолчанию поэтому вы можете быстро найти источник предупреждения (и возможную ошибку).

  console.warn (" Это предупреждение! ");
 

Ошибка

Метод console.error () аналогично console.warn () выводит сообщение со следами стека, которое специально разработано , Обычно это красный с добавлением значка ошибки. Clearly Он четко уведомляет пользователя, что что-то не так. Здесь важно то, что этот метод .error () представляет собой просто консольное сообщение без каких-либо дополнительных опций, таких как остановка выполнения кода (для этого вам нужно выдать ошибку). Простое замечание, так как многие новички могут чувствовать себя неуверенно по поводу такого поведения.

  console.error («Это ошибка!»);
 

Info & debug

Есть еще два метода, которые можно использовать для добавления порядка в ваши журналы. Мы говорим о console.info () и console.debug () . 🐞 Их выходы не всегда имеют уникальный стиль — в некоторых браузерах это просто информационный значок . Вместо этого то, что эти, а также предыдущие методы позволяют вам делать, это применять определенные категории к сообщениям консоли. В разных браузерах (например, в моем Chromium) пользовательский интерфейс dev-tools предоставляет вам возможность выбрать для показа определенную категорию журналов например, ошибки, отладочные сообщения или информация. Еще одна организующая функция!

  console.info («Это очень информативно!»);
console.debug («Отладка ошибки!»);
 

Assert

Существует даже специальный метод API-интерфейса консоли, который дает вам ярлык для любого условного ведения журнала (утверждения ). Он называется console.assert () . Как и стандартный метод console.log () он может принимать бесконечное число аргументов, с той лишь разницей, что первым должен быть логический . Если он принимает значение true, то утверждение остается тихим, в противном случае он регистрирует ошибку (аналогично методу .error ()) на консоли со всеми переданными аргументами.

  console.assert (true, «Это не будет зарегистрировано!»);
console.assert (false, «Это будет записано!»);
 

И, после всего этого беспорядка, вы, возможно, захотите сделать свою доску сообщений консоли немного чище. Нет проблем! Просто используйте метод console.clear () и увидите, что все ваши старые журналы исчезнут! Это настолько полезная функция, что она даже имеет свою собственную кнопку (и ярлык) в консольных интерфейсах большинства браузеров! 👍

API консоли даже предоставляет небольшой набор функций, связанных с синхронизацией . Their С их помощью вы можете сделать быстрые и грязные тесты производительности для частей вашего кода. Как я уже говорил, этот API прост. Вы начинаете с метода console.time () который может принимать необязательный аргумент в качестве метки или идентификацию для данного таймера. Упомянутый таймер запускается как раз в момент вызова этого метода. Затем вы можете использовать методы console.timeLog () и console.timeEnd () (с необязательным аргументом метки) для записи вашего времени (в миллисекундах ) и окончания соответственно уважаемый таймер.

  console.time ();
// фрагмент кода 1
console.timeLog (); // по умолчанию: [time] мс
// фрагмент кода 2
console.timeEnd (); // по умолчанию: [time] мс  

Конечно, если вы проводите какие-то реальные тесты производительности или тестирования производительности, я бы рекомендовал использовать Performance API специально разработанный для этой цели.

В Если у вас так много журналов, что вы не знаете, сколько раз были выполнены заданные части кода — вы уже догадались! — для этого есть API! Метод console.count () делает, пожалуй, самое простое — подсчитывает сколько раз он был вызван . Naturally Естественно, вы можете передать необязательный аргумент, предоставляющий метку для данного счетчика (по умолчанию используется значение по умолчанию). Позже вы можете сбросить выбранный счетчик с помощью метода console.countReset () .

  console.count (); // по умолчанию: 1
console.count (); // по умолчанию: 2
console.count (); // по умолчанию: 3
console.countReset ();
console.count (); // по умолчанию: 1  

Лично я не вижу много вариантов использования этих конкретных функций, но хорошо, что что-то подобное существует вообще. Может быть, это только я …

Я думаю, что это одна из наиболее недооцененных функций Консольного API (помимо стилей CSS, упомянутых ранее). Output Возможность вывода реальных, сортируемых таблиц на вашу консоль может быть чрезвычайно полезна при отладке и проверке плоских или двумерных объектов и массивы . Да, все верно — вы действительно можете отобразить таблицу в своей консоли. Все, что требуется, — это просто простой вызов console.table () с одним аргументом — наиболее вероятный объект или массив (примитивные значения просто записываются в журнал, а более чем двухмерные структуры усекаются до меньших аналогов. Просто попробуйте фрагмент ниже, чтобы понять, что я имею в виду!

  console.table ([[0,1,2,3,4][5,6,7,8,9]]);
 

Искусство консоли не было бы таким же без ASCII art ! С помощью модуля image-to-ascii (можно найти в NPM ) вы можете с легкостью преобразовать нормальное изображение в его аналог ASCII! 🖼 В дополнение к этому, этот модуль предоставляет множество настраиваемых настроек и опций для создания желаемого результата. Вот простой пример использования этой библиотеки:

  import imageToAscii из «image-to-ascii»;

imageToAscii (
"Https://d2vqpl3tx84ay5.cloudfront.net/500x/tumblr_lsus01g1ik1qies3uo1_400.png",
{
    цветные: ложь,
}, (ошибка, преобразованная) => {
    console.log (ошибка || преобразована);
});
 

С помощью приведенного выше кода вы можете создать потрясающий логотип JS точно такой же, как в вашей консоли прямо сейчас! 🤯

С помощью стилей CSS, некоторых отступов и свойств фона вы также можете вывести полноценное изображение на консоль! Например, вы можете взглянуть на модуль console.image (также доступен в NPM ), чтобы поиграть с этой функцией. Но все же, я думаю, что ASCII немного более … стильно . 💅

Как видите, ваши журналы и процесс отладки в целом не должны быть такими монохромными! Там намного больше добра, чем простой console.log () . Благодаря знаниям из этой статьи, выбор теперь за вами! Вы можете остаться с традиционным console.log () и довольно хорошим форматированием различных структур, предоставляемых вашим браузером, или вы можете добавить некоторую свежесть вашей консоли с помощью методов, описанных выше. В любом случае, просто продолжайте веселиться … даже если вы боретесь с действительно неприятной ошибкой! 🐞

Я надеялся, что вам понравилась статья, и она позволила вам узнать что-то новое. Как всегда, рассмотрите поделившись им с другими, чтобы у каждого был свой консоль полный цветов 🌈, и оставьте свое мнение ниже, через реакцию ] или комментарий ! Кроме того, следуют за мной в Твиттере на моей странице в Фейсбуке и подписываются на (в ближайшее время) бюллетень ! Еще раз спасибо за чтение, и увидимся в следующем! ✌