Консоль браузера — один из самых удобных инструментов, используемых разработчиками в повседневном процессе разработки. Это помогает разработчикам быстро выявлять ошибки, регистрируя определенные сообщения. По сути, консоль браузера имеет три основных назначения:
- Для регистрации данных.
- Для отображения сообщений
- Для запуска JavaScript.
Однако вы когда-нибудь думали, что консольный вывод вашего браузера слишком простой и скучный? Или вы когда-нибудь хотели, чтобы результат на вашей консоли выглядел более читаемым?
Если сообщений консоли слишком много, разработчику может быть сложно найти конкретное сообщение журнала. Но, добавив стили, вы можете повысить читабельность и сделать взаимодействие простым и привлекательным.
При отладке это может быть полезно, если у вас много консольных сообщений и вы хотите, чтобы одно конкретное сообщение выделялось, чтобы его можно было быстро найти. В этой статье мы обсудим, как оформить журнал консоли с помощью Chrome DevTools, чтобы повысить его читабельность.
Введение в спецификаторы формата
Используя спецификатор формата, вы можете обозначить форматирование, которое необходимо применить к данному значению. Он состоит из символа % и буквы, определяющей форматирование, которое должно применяться к консольному сообщению.
Список спецификаторов формата, которые в настоящее время поддерживаются Chrome DevTools, приведен ниже вместе с соответствующим выводом.
Как видно из приведенного выше списка, спецификатор формата, который мы можем использовать для стилизации, — это спецификатор формата CSS, %c. Используя его, вы можете применить правила стиля CSS к выходной строке.
Здесь за спецификатором формата %c должно следовать консольное сообщение, которое вы собираетесь регистрировать. Затем вы можете передать правила стиля CSS, которые хотите применить к выходной строке, в качестве второго аргумента console.log().
Давайте рассмотрим простой пример.
console.log("%cHELLO WORLD!", "color:red");Если вы попробуете это на своей консоли, вы увидите сообщение, напечатанное красным цветом, как показано ниже. Здесь, чтобы указать, что мы будем добавлять стили CSS к выводу консоли, мы использовали спецификатор формата %c и определили эффект CSS, который мы хотим применить к строке, в качестве второго параметра.
Сообщения консоли стилей
Существует два метода оформления консольных сообщений с помощью DevTools.
- Использование спецификаторов формата
- Использование управляющих последовательностей ANSI
Давайте без лишних слов применим стили к консольным сообщениям, используя вышеупомянутые методы.
Стилизация с помощью спецификаторов формата
Как обсуждалось выше, вы можете использовать спецификатор формата %c для оформления консольных сообщений с помощью CSS.
1. Увеличьте размер шрифта, чтобы улучшить читаемость.
Крупный шрифт всегда легче читать, чем мелкий. Таким образом, вы можете увеличить размер шрифта вывода консоли следующим образом.
Кроме того, вы также можете использовать такие единицы, как px или em, чтобы определить размер шрифта.
console.log("%cHello World!","font-size: 20px");
console.log("%cHello World!","font-size: 5em")2. Отображать сообщения консоли, используя определенный цвет.
Вы можете использовать встроенные методы консоли console.error() и console.warn(), чтобы выделить важное сообщение, изменив цвет вывода. Как мы видели в нашем первом примере, вы можете воспроизвести эту функцию, используя метод console.log().
В предыдущем примере мы изменили цвет всего вывода. Теперь предположим, что вы хотите выделить только часть вывода консоли, используя другой цвет. Затем вы можете сделать это, как показано ниже.
3. Использование различных стилей CSS в консольных сообщениях.
Почти каждый стиль CSS можно применить к выводу консоли, поскольку мы применили размер и цвет шрифта. Как видно из приведенного ниже примера, вы можете выделить слово в предложении или выделить его жирным шрифтом, чтобы улучшить его читаемость.
Иногда вам может понадобиться объединить несколько стилей CSS. В следующем примере показано, как можно одновременно применять разные стили CSS к выводу консоли.
Хотя это обеспечивает полную настраиваемость вывода, оно может создать длинную строку стиля, как показано выше. Таким образом, JavaScript позволяет передавать список стилей, объединенных в одну строку, чтобы упростить строку. Это изображено ниже.
const styles = ['font-weight: 800',
'font-size: 50px',
'color: #7158e2',
'text-shadow: 6px 6px 6px #17c0eb, 9px 9px 9px #67e6dc, 12px 12px 12px #3ae374, 15px 15px 15px #fff200, 18px 18px 18px #ff3838, 21px 21px 21px #ffb8b8'].join(';');
console.log('%cHello World!', styles);Таким образом, мы можем применить к консольному сообщению столько стилей, сколько требуется, и повысить его читабельность.
Стилизация с помощью управляющих последовательностей ANSI
Другой метод, который вы можете использовать для стилизации консольных сообщений, — это управляющие последовательности ANSI. С помощью библиотек стилей, таких как chalk, colors и ansi-colors, разработчики Node.js часто используют этот метод для добавления стилей к выводу консоли.
Однако использование библиотеки стилей для использования escape-последовательностей ANSI для оформления вывода консоли не обязательно. Для этого вы можете использовать следующий синтаксис:
\x1B[P1;…;PnmЗдесь команда начинается с escape-символа (\x1B), указывающего на начало escape-последовательности (управления).
В такой последовательности управляющий символ обычно отправляется первым, чтобы сообщить устройству, что последующие символы должны быть прочитаны как управляющая последовательность, а не как простые символы.
После этого придет набор кодов цвета и стиля, а затем вывод консоли.
Взгляните на следующий пример.
Приведенная выше команда изменяет цвет вывода консоли на красный.
Точно так же вы можете изменить цвет на «Желтый» и сделать его «Жирным» с помощью синтаксиса, показанного ниже.
Как показано выше, вы можете использовать код цвета «103» для изменения цвета фона, а код стиля «1» — для выделения текста жирным шрифтом.
Ниже приведен полный список кодов стилей и цветов, поддерживаемых в DevTools.
Заключение
В этой статье были рассмотрены два метода стилизации вывода console.log(). Во-первых, поскольку консоль является одним из наиболее часто используемых инструментов отладки, очень важно обеспечить удобочитаемость вывода консоли для лучшего выявления ошибок и ошибок.
Сейчас самое время подумать о создании многоразовых компонентов отладки с помощью Bit. Их можно использовать, повторно использовать и совместно использовать между приложениями.
Поэтому я надеюсь, что эта статья поможет разработчику понять, как улучшить читаемость сообщений консоли и улучшить рабочий процесс разработки.
Спасибо, что прочитали!
Создавайте приложения с повторно используемыми компонентами, такими как Lego.
Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.
Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.
Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:
