Может ли встроенная в Chrome консоль JavaScript отображать цвета?
Я хочу, чтобы ошибки были красным, предупреждения - оранжевым и console.logзеленым. Это возможно?
javascript
google-chrome
console
google-chrome-devtools
Randomblue
источник
источник
console.error()вместоconsole.log...console.warn()также доступен с оранжевым значком «предупреждение», хотя сам текст по-прежнему черный.console.log("%c", "background: red;padding: 100000px;");вызовет очень странное поведение в Chrome, особенно при прокрутке консоли.Ответы:
В Chrome & Firefox (+31) вы можете добавлять CSS в
console.logсообщения:То же самое можно применить для добавления нескольких CSS к одной команде.
Источник для Google Chrome: презентация Пола Айриша и Webkit change
Источник для Firefox: веб-консоль Firefox - стилизация сообщений
Справочник по API консоли Chrome: Справочник по API консоли
источник
console.log('%c', 'padding:28px 119px;line-height:100px;background:url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6) no-repeat;');background: #444; color: #bada55; padding: 2px; border-radius:2pxвсе о границе радиусаВот крайний пример с радугой.
источник
Chrome 69, WIN7)Вы можете использовать пользовательскую таблицу стилей для раскраски вашего отладчика. Вы можете вставить этот код,
C:\Documents and Settings\<User Name>\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.cssесли вы используете WinXP, но каталог зависит от ОС.источник
~/.config/google-chrome/Default/User\ StyleSheets/Custom.css~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css..console-message-textкласс. Кроме того, самые приятные цвета фона, которые я нашел, были#ffece6для ошибок,#fafad2для предупреждений и#f0f9ffдля нормального.Более старые версии Chrome не позволяют вам
console.log()отображать s определенным цветом программным способом, но вызовconsole.error()вызовет красныйXзначок на линиях ошибок, сделает текст красным иconsole.warn()получит желтый!значок.Затем можно отфильтровать записи консоли с помощью кнопок «Все», «Ошибки», «Предупреждения» и «Журналы» под консолью.
Оказывается, Firebug поддерживает пользовательский CSS для
console.logs с 2010 года, и поддержка Chrome была добавлена начиная с Chrome 24.Когда
%cпоявляется где-нибудь в первом аргументе , следующий аргумент используется в качестве CSS для стилизации строки консоли. Дальнейшие аргументы объединяются (как всегда было).источник
Я написал template-colors-web https://github.com/icodeforlove/Console.js, чтобы мы могли сделать это немного проще.
Вышесказанное было бы крайне сложно сделать по умолчанию с console.log .
Чтобы посмотреть интерактивную демо-версию, нажмите здесь .
источник
console.log(`this is inline ${'red'.red.bold} and this is more text`.grey)стилизация остановится после первого стилизованного элементаvar txt = "asd"; txt.redили`${txt}`.red + `${txt}`.green. Я не знаю, как сделать это с помощью%cсинтаксиса, который рекомендуют другие. Так что спасибо за создание библиотекиОбновить:
Я написал библиотеку JavaScript в прошлом году для себя. Он содержит другие функции, например, подробность журналов отладки, а также предоставляет метод загрузки журналов, который экспортирует файл журнала. Взгляните на библиотеку JS Logger и ее документацию.
Я знаю, что немного поздно ответить, но, поскольку ОП попросил получить пользовательские цветные сообщения в консоли для различных вариантов. Каждый передает свойство цветового стиля в каждом
console.log()утверждении, что вводит в заблуждение читателя, создавая сложность в коде, а также наносит ущерб общему виду кода.Я предлагаю написать функцию с несколькими предопределенными цветами (например, успех, ошибка, информация, предупреждение, цвета по умолчанию), которая будет применяться на основе параметра, переданного функции.
Это улучшает удобочитаемость и уменьшает сложность кода. Его слишком легко поддерживать и расширять в соответствии с вашими потребностями.
Ниже приведена функция JavaScript, которую нужно написать один раз, а затем использовать ее снова и снова.
Вывод:
Цвет по умолчанию черный, и вам не нужно передавать какое-либо ключевое слово в качестве параметра в этом случае. В других случаях вы должны передать
success, error, warning, or infoключевые слова для желаемых результатов.Здесь работает JSFiddle . Смотрите вывод в консоли браузера.
источник
log.info("this would be green")и т. Д. Достаточно близко.На самом деле я случайно обнаружил, что это интересно, что произойдет, но на самом деле вы можете использовать флаги раскраски bash, чтобы установить цвет вывода в Chrome:
Вывод:
Смотрите эту ссылку, чтобы узнать, как работают цветные флаги: https://misc.flogisoft.com/bash/tip_colors_and_formatting
В основном используйте
\x1bили\x1Bвместо\e. например.\x1b[31mи весь текст после этого будет переключен на новый цвет.Я не пробовал это ни в каком другом браузере, но думал, что стоит упомянуть.
источник
Эта библиотека фантастическая:
https://github.com/adamschwartz/log
Используйте Markdown для сообщений журнала.
источник
log(true, 'this is [c="color:red"]red[c]')=>true "this is %cred%c" "color:red" ""Существует ряд встроенных функций для раскраски журнала консоли:
источник
console.info()больше не добавляет значок информации .. не уверен, когда это произошло. Теперь он ничем не отличается от console.log () (по крайней мере, в Chrome и Firefox)источник
console.log(color.red+' this is red color on text');как colors.red уже назначен.Google задокументировал этот https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css
Один пример:
источник
система шаблонов, полезная, если вы хотите создать красочный текст линии без создания полного стиля для каждого блока
источник
Проверь это:
Анимация в консоли плюс CSS
https://jsfiddle.net/a8y3jhfL/
Вы можете вставить ASCII в каждый кадр, чтобы посмотреть анимацию ASCII
источник
из Chrome 60 они удалили средство синего цвета текста при написании console.info и внесли много изменений в консольный API.
если вы пишете строковый литерал в шаблоне es6, используя обратные символы `` в качестве идентификатора (называемого как строка шаблона) в console.log (), то нижеуказанный способ может раскрасить вывод консоли.
источник
Чтобы связать стили CSS3 в несколько строк, вы можете сделать это следующим образом:
Результат
Узнайте больше: - https://coderwall.com/p/fskzdw/colorful-console-log
Приветствия.
источник
Я написал по-настоящему простой плагин для себя несколько лет назад:
Чтобы добавить на свою страницу все, что вам нужно сделать, это поместить это в заголовок:
Тогда в JS:
Фреймворк имеет код для:
а также:
для любого другого CSS. Выше разработан с использованием следующего синтаксиса:
источник
Недавно я решил решить аналогичную проблему и создал небольшую функцию для раскрашивания только тех ключевых слов, которые мне небезразличны, которые легко можно было бы определить по окружающим фигурным скобкам
{keyword}.Это работает как шарм:
технически вы можете поменять оператор if на оператор switch / case, чтобы разрешить несколько стилей по разным причинам
источник
Я сомневаюсь, что кто-нибудь на самом деле увидит это, но у меня есть простое решение для тех, кто хочет смешать несколько цветов в одной строке:
источник
Попробуй это:
теперь они все такие как ты хотел
примечание: форматирование вроде
console.log("The number = %d", 123);не нарушено.источник
Я написал
npmмодуль, который дает возможность передать:[MyFunction]warning,success,infoи другие типы предопределенного сообщенияhttps://www.npmjs.com/package/console-log-plus
Вывод (с пользовательскими префиксами):
Вывод (без пользовательских префиксов):
Вход :
Чтобы убедиться, что пользователь не отобразит недопустимый цвет, я также написал валидатор цвета . Он будет проверять цвета от
name,hex,rgb,rgba,hslилиhslaзначенийисточник
источник