Как изменить цвет в консоли браузера
ниже вы можете найти ссылку цвета текста для команды при запуске узла.применение ДШ:
Примечание %s - это место, где в строку (второй аргумент) вводится. \x1b[0m сбрасывает цвет терминала, чтобы он больше не оставался выбранным цветом после этого момента.
цвета Ссылка
например, \x1b[31m это escape sequence это будет перехвачено ваш терминал и инструктирует его переключиться на красный цвет. На самом деле, \x1b - код непечатаемый управляющий символ escape . Escape-последовательности, имеющие дело только с цветами и стилями, также известны как ANSI escape-код и стандартизированы, поэтому они (должны) работать на любой платформе.
есть несколько модулей для изменения цвета шрифта в консоли узел.js самыми популярными являются:
есть несколько цветов на выбор, а также форматирования текста полужирный и Курсив.
много люди отметили свое неодобрение в цвета изменения the строку прототипа, если вы предпочитаете ваши прототипы, оставленные в покое, вы захотите использовать cli-color или мел
и cli-color и мел требуется немного больше ввода, но вы получаете аналогичные результаты (для цветов) без добавления прототипа строки. Оба поддержка хорошего диапазона цветов, форматирования (жирный / курсив и т. д.) и тесты.
Если вы хотите изменить цвета непосредственно сами без модуля попробуйте
сначала '\x1b[36m', чтобы изменить цвета на "36", а затем вернуться к цвету терминала"0".
например, если вы хотите часть текста в красном цвете, просто сделайте консоль.войти с:
на основе этого я создал расширение "colog" для Node.js. Вы можете установить его с помощью:
Per документация, вы можете изменить цвета на основе типа данных вывода:
это, по-видимому, escape-коды ANSI SGR, где первое число-это код, который нужно излучать перед выходом, а второе число-код, который нужно излучать после. Если мы посмотрим на диаграмма кодов СГР ANSI в Википедии, вы увидите, что большинство из них начинаются с номера 30-37, чтобы установить цвет переднего плана, и заканчиваются 39, чтобы сбросить значение по умолчанию цвет переднего плана.
так что мне не нравится, насколько темные некоторые из них. Особенно свидания. Идите вперед и попробуйте new Date() в консоли. Темно-пурпурный на черном очень трудно читать. Давайте вместо этого сменим цвет на светло-пурпурный.
теперь, когда вы попробовать new Date() , выход гораздо более читабелен.
если вы хотите установить цвета автоматически при запуске узла, создайте скрипт, который запускает repl, например это:
сохранить этот файл (например, init.js ), а затем запустить node.exe init.js . Он установит цвета и запустит узел.командная строка js.
(благодаря loganfsmyth в ответ для идеи repl.)
Это список доступных цветов (фон,передний план) в консоли с доступными действиями(сброс,реверс. ).
используйте его следующим образом:
вы также можете установить :
это даст вам выход ближе к консоли на стороне клиента :
этой библиотеки Sindre Sorhus является лучшим на данный момент:
- высокая производительность
- не распространяется String.prototype
- выразительный API
- возможность вложить стили
- чистый и сосредоточенный
- авто-обнаруживает поддержку цвета
- активно поддерживается
- используется 5500 + модулей
например, если вы хотите иметь тусклый красный текст с синим фоном, вы можете сделать это в Javascript следующим образом:
заказ цветов и эффектов, кажется, не так важны, но всегда помните, чтобы сбросить цвета и эффекты в конце.
для популярной альтернативой цвета это не связывается со встроенными методами объекта String, я рекомендую проверить cli-color.
включает как цвета, так и цепные стили, такие как полужирный, курсив и подчеркивание.
Существует ли возможность поменять цвет консоли в google chrome?
Чтобы как в FF, темное. Есть же для него темы оформления, но консоль и прочее не затрагиваю. Но возможно есть ещё что-то?
Ну вот, теперь хоть удаленно напоминает идеал. Жаль что самая лучшая тема (первая) не является рабочей, так как цвет строки выделяющий текст практически одинакового цвета с текстом.
В Chrome применение пользовательских стилей к Developer Tools считается экспериментальным функционалом, поэтому для начала нужно:
- Перейти по адресу chrome://flags/ в браузере.
- Найти опцию под названием Enable Developer Tools experiments и включить ее, если она была выключена.
- Перезагрузить браузер.
- Зайти в Chrome Developer Tools, перейти в настройки и на вкладке Experiments включить опцию Allow custom UI themes .
Начиная с 32 версии Chrome, способ, которым можно добавлять пользовательские стили для Developer Tools, изменился, теперь это можно сделать с помощью расширений. Вот некоторые ресурсы, на которых можно найти уже готовые темы:
Расширения не обязательно должны находиться в Google Play, их можно устанавливать из локальных папок. Для быстрого создания темы можно воспользоваться Yeoman генератором generator-devtools-theme, но можно сделать это и вручную следующим образом (инструкции для Chrome 32+, проверялся на Ubuntu 14.04):
Если после этого открыть Chrome Developer Tools, то часть панелей должна перекраситься в красный.
Советы для разработки пользовательских стилей:
- Chrome Developer Tools можно открыть в Chrome Developer Tools, так как это тоже HTML страница. Для этого нужно открыть Chrome Developer Tools в режиме отдельного окна, после чего нажать Ctrl + Shift + I , что откроет новое окно с Chrome Developer Tools для первого окна. Теперь во втором окне можно пользоваться инспектором элементов и редактировать стили первого окна налету. Во вкладке Network первого окна можно посмотреть, какие ресурсы загружается страница, а именно CSS файлы со стандартными стилями, чтобы взять их за основу.
- После изменения содержимого style.css в своем расширении, для того, чтобы они вступили с силу, необходимо зайти на страницу chrome://extensions/ , найти свое расширение и нажать кнопку Reload рядом с ним. После этого, заново открыв Chrome Developer Tools, стили должны обновиться.
Для версий Chrome до 32 порядок был следующим (способ не проверялся):
Перейти в директорию в зависимости от ОС:
- Windows: C:\Users\**Your username**\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\
- Mac:
Заменить файл Custom.css своим.
К сожалению у меня Chrome на английском, буду признателен правке специфических для Chrome фраз в ответе на русский, если в этом есть необходимость.
Может ли встроенная в Chrome консоль JavaScript отображать цвета?
Я хочу, чтобы ошибки были красным, предупреждения - оранжевым, а console.log - зеленым. Это возможно?
Справочник по API консоли Chrome: Справочник по API консоли
Недавно я решил решить аналогичную проблему и создал небольшую функцию для раскрашивания только тех ключевых слов, которые мне небезразличны, и которые можно было легко определить по окружающим фигурным скобкам .
Это сработало как шарм:
Технически вы можете поменять оператор if на оператор switch / case, чтобы разрешить несколько стилей по разным причинам
Существует ряд встроенных функций для раскраски журнала консоли:
Более старые версии Chrome не позволяют получать console.log() для отображения в определенном цвете программным способом, но вызов console.error() поместит красный значок X в строки ошибок и сделает текст красным, и console.warn() получает желтый значок ! .
Затем можно отфильтровать записи консоли с помощью кнопок «Все», «Ошибки», «Предупреждения» и «Журналы» под консолью.
Оказывается, Firebug поддерживает пользовательский CSS для console.log с 2010 года и Chrome поддержка была добавлена с Chrome 24.
Когда %c появляется где-либо в первом аргументе , аргумент next используется в качестве CSS для стилизации строки консоли. Дальнейшие аргументы объединяются (как всегда было).
Система шаблонов, полезная, если вы хотите создать красочный текст линии без создания полного стиля для каждого блока
Из Chrome 60 они удалили средство синего текста во время записи console.info и внесли много изменений в консольный API.
Если вы пишете строковый литерал в шаблоне es6, используя обратные символы `` в качестве идентификатора (называемого строкой шаблона) в console.log () , то ниже можно раскрасить вывод консоли.
На самом деле я случайно обнаружил, что это любопытно узнать, что произойдет, но вы можете использовать флаги раскраски bash для установки цвета вывода в Chrome:
В основном используйте \x1b или \x1B вместо \e . например. \x1b[31m и весь текст после этого будет переключен на новый цвет.
Я не пробовал это ни в каком другом браузере, но думал, что стоит упомянуть.
Обновление:
Я написал библиотеку JavaScript в прошлом году для себя. Он содержит другие функции, например, подробность журналов отладки, а также предоставляет метод загрузки журналов, который экспортирует файл журнала. Ознакомьтесь с JS Logger библиотекой и ее документацией.
Я предлагаю написать функцию с несколькими предопределенными цветами (например, успех, ошибка, информация, предупреждение, цвета по умолчанию), которые будут применяться на основе параметра, переданного функции.
Это улучшает читаемость и уменьшает сложность кода. Его слишком легко поддерживать и расширять в соответствии с вашими потребностями.
Ниже приведена функция JavaScript, которую нужно написать один раз, а затем использовать ее снова и снова.
Выход:
Цвет по умолчанию черный, и вам не нужно передавать какое-либо ключевое слово в качестве параметра в этом случае. В других случаях вы должны передать success, error, warning, or info ключевые слова для желаемых результатов.
Здесь работает JSFiddle . Смотрите вывод в консоли браузера.
Я написал для себя realllllllllllllllllllly простой плагин несколько лет назад:
Чтобы добавить на свою страницу все, что вам нужно сделать, это поместить это в заголовок:
Фреймворк имеет код для:
Для любого другого CSS. Выше разработан с использованием следующего синтаксиса:
Как изменить цвет выводимой на консоль Chrome информации
Способ первый: определить стиль в файле CSS
Определите стили в C: \ Users \ <имя пользователя> \ AppData \ Local \ Google \ Chrome \ User Data \ Default \ User StyleSheets \ Custom.css.
Способ второй: Используйте код для определения стилей
Интеллектуальная рекомендация
WECHAT MILLY WAY POINT CAMENT CARD - СОВРЕМЕННЫЕ СТРАНИЦЫ ПРОГЛЯЮТНОЕ ЗНАЧЕНИЕ (Запрос)
WECHAT Small Pass Pass Value и значение приобретения: 1. Установите способ настройки идентификатора идентифицирует значение параметра, передаваемое после прыжка; 2, используя метод Data-XXXX для идент.
Текущая задача Узел больше экземпляров
[Linux] Программирование сетевых сокетов UDP
Что такое протокол UDP Протокол UDP называетсяПротокол пользовательских датаграмм UDP - протокол транспортного уровня Без установления соединения, ненадежная передача, ориентированная на дейтаграмму П.
Основная идея обработки больших данных - разделяй и властвуй
Разделяй и властвуй - «разделяй и властвуй» Как мы все знаем, компьютеры очень быстрые и используются людьми. Однако независимо от того, насколько быстрым является компьютер, способность о.
Вам также может понравиться
Равный и hashCode анализ исходного кода
[size = medium] равно, и hashCode также содержит много информации в Интернете. Это просто для записи моего текущего понимания и знаний. Вы часто будете слышать такие слова. Когда вы переписываете мето.
Простое приложение SiteMesh
1. Добавьте sitemesh-2.4.2.jar в javaweb 2. Создайте папку декораторов под webroot 3. Создайте файл декоратора leftRight.jsp topbottom.jsp test.jsp moreSongs.jsp 5. Создайте decorators.xml под web-inf.
Perfect Spring Boot использует log4j2 для вывода в разные файлы по уровню
1. Pom.xml импорт необходим банку 2. Напишите файл конфигурации log4j2 (обратите внимание на примечание) 3. Написать тестовый класс 4. Просмотр результатов.
Huawei неожиданно перетянули из гугла! Официальный Android больше не поддерживает телефоны Huawei
Совместное использование открытого исходного кода с нулевым разглашением и использование модуля ESP8266wifi
1. Описание MCU: стандартная плата для разработчиков с открытым исходным кодом с нулевым разглашением Модуль WIFI: ESP-12F Инструменты разработки: Инструменты разработки с открытым исходным кодом с ну.
Читайте также: