Как изменить цвет в консоли браузера
I’m sure we’re all familiar with console.log() in JavaScript, since it’s the main debugging tool for many developers. But how can we improve our logs with some colors in the console?
Perhaps we’ve also learned about the following:
- console.info() for informational messages
- console.error() for errors
- console.warn() for warnings
- console.table() for iterable objects
Let’s take this a step further and find how we can apply custom styles to our logs.
Printing to the developer console with %c
We can apply our own styling to a log message by doing two things:
- Prefixing the message with the %c flag
- Providing a string of CSS as the second parameter
As a simple example, we can make the log message orange.
You might notice that %c will inject the CSS styles specified in the second argument into that location.
The string of CSS can get pretty long, so I recommend defining the styles separately in an array and joining each element with a semi-colon.
It’s reusable and much cleaner than manually type out the CSS string.
Pro Tip: it’s all about the padding and border-radius .
I encourage you to try this out in your console right now, and check out what’s possible.
A Step Further
We can take this a step further and create our own set of logging methods.
This also allows us to avoid typing out the %c flag for every log message.
Printing to the terminal with %s and \x1b
For the terminal, we can use %s and \x1b to print colored logs.
Notice the %s in the first argument string. This is where the second argument (the string we want to print) will be injected.
The first half of the string (before the %s ) is: \x1b[33m .
The second half of the string (after the %s ) is: \x1b[0m .
Technically, we can omit the %s and just print the log directly.
console.log("\x1b[33mLog Message\x1b[0m") , but that’s harder to read.
Let’s get a better idea of what’s going on.
Quick Explanation of \x1b
\x1b signals the start of an ANSI escape sequence. \x1b is just a special way of inserting an ESC character into the terminal. This ESC character will be intercepted by the terminal.
The following opening bracket [ signals the start of some function.
In the string above, we see the “functions”: 33m and 0m .
We can think of the numbers as function arguments and m as the function. We are essentially running m(33) and m(0) .
code | description |
---|---|
\x1b | begin escape sequence |
[ | call a function |
0;1 | function arguments (0, 1), multiple args are separated by “;” |
m | function name |
m refers to a function called SGR that allows us to inject terminal styling into our logs.
The number(s) corresponds to the specific style.
value | description |
---|---|
0 | Reset: turn off all attributes |
1 | Bold (or bright, depending on terminal/user configuration) |
3 | Italic |
4 | Underline |
30–37 | Set text color from the basic color palette of 0–7 |
38;5;n | Set text color to index n in a 256-color palette (e.g. \x1b[38;5;34m ) |
38;2;r;g;b | Set text color to an RGB value (e.g. \x1b[38;2;255;255;255m ) |
40–47 | Set background color |
48;5;n | Set background color to index n in a 256-color palette |
48;2;r;g;b | Set background color to an RGB value |
90–97 | Set text color from the bright color palette of 0–7 |
100–107 | Set background color from the bright color palette of 0–7 |
In our case, 33 happens to correspond to a yellow text color, so we are setting the terminal color to be yellow.
We can also string together multiple styles by passing in multiple function arguments: \x1b[33;1m (yellow and bold).
However, note that this m(33) function will continue display all subsequent text as yellow.
This is why we need 0m , or m(0) , to reset all terminal styles after that log.
A Step Further
Once again, we can take this a step futher to create a set of logging methods using %s and \x1b .
Существует ли возможность поменять цвет консоли в google chrome?
Чтобы как в FF, темное. Есть же для него темы оформления, но консоль и прочее не затрагиваю. Но возможно есть ещё что-то?
Ну вот, теперь хоть удаленно напоминает идеал. Жаль что самая лучшая тема (первая) не является рабочей, так как цвет строки выделяющий текст практически одинакового цвета с текстом.
1 ответ 1
В 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: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/
- Linux: ~/.config/chrome/Default/User StyleSheets/
Заменить файл Custom.css своим.
К сожалению у меня Chrome на английском, буду признателен правке специфических для Chrome фраз в ответе на русский, если в этом есть необходимость.
Can Chrome's built-in JavaScript console display colors?
I want errors in red, warnings in orange and console.log 's in green. Is that possible?
console.warn() is also available with an orange 'warning' icon, although the text itself is still black.
console.log("%c", "background: red;padding: 100000px;"); will cause very weird behavior in Chrome, especially when scrolling the console.
29 Answers 29
In Chrome & Firefox (+31) you can add CSS in console.log messages:
The same can be applied for adding multiple CSS to same command.
References
Here is an extreme example with rainbow drop shadow.
the sadness is that the text somehow doesn't look exactly like your example (at me or in recent chromes, idk)
You can use a custom stylesheet to color your debugger. You can put this code in C:\Documents and Settings<User Name>\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css if you are in WinXP, but the directory varies by OS.
on Mac OS X it's at ~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css .
The Windows 7 location appears to be `C:\Users\
Keep in mind this stylesheet applies to all pages that you visit in Chrome, so if you remove a class to decrease the specificity, you may find a website using your styles on a message popup or something like that.
Older versions of Chrome do not allow you to get console.log() s to show in a specific color programmatically, but calling console.error() will put a red X icon on error lines and make the text red, and console.warn() gets you a yellow ! icon.
You can then filter console entries with the All, Errors, Warnings, and Logs buttons beneath the console.
It turns out Firebug has supported custom CSS for console.log s since 2010 and Chrome support has been added as of Chrome 24.
When %c appears anywhere in the first argument, the next argument is used as the CSS to style the console line. Further arguments are concatenated (as has always been the case).
The above would be extremely hard to do with the default console.log.
For a live interactive demo click here.
Actually this is not really supported for example you cant currently do this console.log(`this is inline $ <'red'.red.bold>and this is more text`.grey) the styling would stop after the first styled item'red'.red.bold>
Even though there's no "inline" coloring it's still possible to do things like var txt = "asd"; txt.red or `$
Update:
I have written a JavaScript library last year for myself. It contains other features e.g verbosity for debug logs and also provides a download logs method that exports a log file. Have a look at the JS Logger library and its documentation.
I know It's a bit late to answer but as the OP asked to get custom color messages in console for different options. Everyone is passing the color style property in each console.log() statement which confuses the reader by creating complexity in the code and also harm the overall look & feel of the code.
What I suggest is to write a function with few predetermined colors (e.g success, error, info, warning, default colors) which will be applied on the basis of the parameter passed to the function.
It improves the readability and reduces the complexity in the code. It is too easy to maintain and further extend according to your needs.
Given below is a JavaScript function that you have to write once and than use it again and again.
Output:
The default color is black and you don't have to pass any keyword as parameter in that case. In other cases, you should pass success, error, warning, or info keywords for desired results.
Here is working JSFiddle. See output in the browser's console.
Управляющие последовательности ANSI
ANSI escape sequences или Управляющие последовательности ANSI — это стандарт, дающий возможность управлять курсором, цветами, начертание в текстовых консолях. Такие последовательности воспринимаются отрисовщиком терминала, как команды отображать последующий текст в определенном формате. Есть также последовательность, которая сбрасывает предыдущие команды, и отображение текста становиться обычным. Существует несколько форматов управляющих последовательностей, различающихся возможностями и появившимися в разных версиях кодировок. Поговорим об этих форматах подробнее.
8 основных цветов и стили
Для обычного пользователя разнообразия цветов этого формата будет более чем исчерпывающим. Но прежде чем задумываться о том, что терракотовый цвет гораздо круче красного, и он вам уж точно нужен, давайте разберемся, как устроена самая простая версия управляющей последовательности ANSI для форматирования текста.
Чтобы изменить текущий цвет шрифта или фона можно использовать следущий синтаксис:
- Начинается управляющая последовательность с любого из этих трёх представлений: \x1b[ (hex) или \u001b[ (Unicode) или \033[ (oct)
- Далее следуют аргументы, разделённые между собой ; (можно указывать в любом порядке)
- В конце ставится буква m
Возможные аргументы
Модификатор | Код |
---|---|
1 | Жирный |
2 | Блеклый |
3 | Курсив |
4 | Подчёркнутый |
5 | Мигание |
9 | Зачёркнутый |
Изменения цвета шрифта
Цвет | Код |
---|---|
30 | Чёрный |
31 | Красный |
32 | Зелёный |
33 | Жёлтый |
34 | Синий |
35 | Фиолетовый |
36 | Бирюзовый |
37 | Белый |
Изменения цвета фона
Цвет | Код |
---|---|
40 | Чёрный |
41 | Красный |
42 | Зелёный |
43 | Жёлтый |
44 | Синий |
45 | Фиолетовый |
46 | Бирюзовый |
47 | Белый |
Бонус: другие интересные модификаторы, которые могут поддерживаться не всеми платформами
Модификатор | Код |
---|---|
38 | RGB цвет (см. раздел "Совсем много цветов") |
21 | Двойное подчёркивание |
51 | Обрамлённый |
52 | Окружённый |
53 | Надчёркнутый |
Пример корректного синтаксиса: \033[3;36;44m . После вывода этой конструкции стиль будет изменён для всего последующего текста. Чтобы вернуться к изначальному состоянию можно использовать \033[0m , тогда весь текст с этого места вернётся к изначальному форматированию.
Давайте поэкспементируем. Для примеров я буду использовать Python.
Важно заметить, что форматирование повлияло и на консоль питона, а не только на ее вывод. Именно поэтому очень важно закрывать все "тэги" изменения форматирования.
Часто используемые сочетания (copy-paste-able)
Код | Описание |
---|---|
\033[0m | вернуться к начальному стилю |
\033[31m \033[0m | красный текст — для обозначения ошибок |
\033[1;31m \033[0m | жирный красный текст — для обозначения критических ошибок |
\033[32m \033[0m | зеленый текст — успешное выполнение |
\033[3;31m \033[0m | красный курсив — текст ошибки |
\033[43m \033[0m | выделение основного, как будто жёлтым маркером |
Больше цветов: аж целых 256
Некоторые терминалы поддерживают вывод целых 256 цветов. Если команда echo $TERM выводит xterm-256color , то ваш терминал всё корректно обработает.
В этом формате синтаксис немного другой:
Для генерации кодов цветов можно использовать генератор.
А палитру доступных цветов можно увидеть на картинке ниже.
Совсем много цветов
Этот формат не всегда поддерживается стандартными консолями.
- \033[38;2;⟨r⟩;⟨g⟩;⟨b⟩m — цвет текста
- \033[48;2;⟨r⟩;⟨g⟩;⟨b⟩m — цвет фона
Python: Использование библиотеки Colorama
Библиотека Colorama позволяет форматировать текст, не запоминая коды цветов. Рассмотрим её использование на примере:
Style позволяет изменить стиль, Fore — цвет шрифта, Back — цвет фона. Использовать переменные из colorama нужно также, как и коды изменения стиля. Но плюс использования библиотеки в том, что Fore.RED более читаем, чем \033[0;31m
Если в colorama.init() указать параметр autoreset=True , то стиль будет автоматически сбрасываться (в конец каждого print будут добавлены сбрасывающие стили последовательности), поэтому вам не придётся об этом каждый раз вспоминать.
А что не так с Windows?
Просто так синтаксис, описанный в начале статьи, не работает в командной строке Windows. Поддержка цветов появлялась постепенно, причём в странном варианте. В начале программы надо сделать системный вызов, активирующий отрисовку цветов. А в более старых версиях необходимо заменить все ANSI последовательности на системные вызовы.
Но colorama.init() сделает всё за вас в большинстве версий Windows. Однако если вы используете другую операционную систему, то функцию init() вызывать в начале программы не обязательно. Также некоторые IDE на Windows (например, PyCharm) тоже поддерживают цвета без каких-либо махинаций.
А еще Windows не поддерживает многие модификаторы, такие как жирный текст. Подробнее можно почитать на странице Colorama
Termcolor
Ещё одна библиотека для вывода цветного текста с более удачным, на мой взлгяд, синтаксисом.
Кстати, проблему с Windows всё ещё можно починить с помощью colorama.init()
Выводы
Стандартные 8 цветов позволяют разнообразить вывод в консоль и расставить акценты. 256 цветов намного расширяют возможности, хотя и поддерживаются не всеми консолями. Windows, к сожалению, не поддерживает многие основные модификаторы, например, курсив. Также есть некоторые цвета, которые не прописаны в стандартах, но могут поддерживаться вашей операционной системой. Если вы хотите больше цветов, то вы можете поискать их в Гугле.
Пока что не любой терминал поддерживает 24-битные цвета и все модификаторы, но мы вряд ли увидим сильные изменения в этой сфере. Так что пока нам остаётся выбирать самые красивые варианты из тех, что доступны в любимом терминале.
Источники
- Картинки с синтаксисом из статьи
- Генератор из статьи на Хабре
Облачные серверы от Маклауд быстрые и безопасные.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!
Перейдем к самому интересному — подборке самых полезных и интересных, на наш взгляд, трюков и скрытых возможностей Chrome DevTools.
Верстка
1. Инспектируем анимацию
Меню анимаций в DevTools позволит вам замедлить все анимации на странице или подвигать “руками” конкретную анимацию.
2. Экспериментируем с цветами
Когда вы экспериментируете с цветами, вы можете использовать пипетку, чтобы выбрать любой элемент на странице или выбрать из палитры цветов, которые уже используются на странице. Или выбрать один из цветов material design.
3. Редактируем любой текст на странице
Допустим у вас есть текстовый блок на страницы и вы хотите узнать, как он будет выглядеть, если текст в нем изменится. Переключите документ в режим дизайна! Наберите в консоле document.designMode = 'on', аналогично работает document.body.contentEditable = true. После этого вы сможете редактировать все элементы имеющие текстовый контент.
4. Просмотр отрендеренных шрифтов
Иногда очень сложно сказать, какой шрифт на самом деле был отрендерен. В нижней части Computed вкладки панели инструментов, вы можете увидеть какой шрифт используется, даже если его названия нет в списке font-family.
5. Принудительные псевдоклассы для элементов
DevTools имеет функцию, которая имитирует применение псевдоклассов CSS, например такие как :hover и :focus на элементах, что упрощает их стилизацию. Она доступна из редактора CSS.
6. Изменение формата цвета
Используйте Shift + Клик на предварительном просмотре цвета, чтобы изменить формат: rgb, hsl и hex.
7. Редактор кривых безье для анимации
Вы можете легко изменить временные функции используя DevTools (например, значение свойства для animation-timing-function CSS свойств).
Возможности консоли
1. Вывести HTML элемент в представлении JS объекта
При чтении HTML, браузер генерирует DOM-модель. Если необходимо вывести элемент именно в виде JS объекта в консоль, проще всего для этого воспользоваться методом console.dir().
Иногда бывает полезно сгруппировать логи для упрощения работы с ними и меньшего засорения консоли. Для этого существуют методы console.group(), console.groupCollapsed() и console.groupEnd().
3.1. Вывод значений переменных в виде таблиц
Иногда намного удобнее и нагляднее работать с массивами или объектами в виде таблицы, а не в виде стандартного иерархического представления. Для вывода данных в виде таблице существует метод console.table().
3.2 keys(object) и values(object)
Keys() — возвращает массив имён свойств объекта.
Values() — возвращает массив, содержащий значения всех свойств указанного объекта.
4. Логирование времени выполнения кода
Представьте, что у вас есть две функции которые делают одно и тоже но их реализация различна. Как понять какая из них работает быстрее? Можно воспользоваться методами console.time() и console.timeEnd().
5. Профилирование
Помимо замера времени можно профилировать Ваш код и вывести стек профилирования, который подробно показывает, где и сколько времени потратил браузер.
6.1. $(selector)
6.2. $$(selector)
Возвращает массив элементов, содержащих указанный селектор. Эта команда эквивалентна вызову document.querySelectorAll().
7. clear(), copy(object) и inspect(object/function)
Clear() — очистка всех записей в консоли.
Copy() — копирование в буфер обмена строкового представления указанного объекта.
Inspect() — открывает и выбирает указанный элемент или объект в соответствующей панели: Elements или Profiles.
Прочее
1. Продвинутая кнопка перезагрузки
(Работает только при открытом DevTools и только в браузере Google Chrome!)
По долгому нажатию на кнопку «Обновить страницу» (либо по правому клику) мы открываем специальное меню, которое предоставляет нам выбор:
- Обычная перезагрузка (обновляются просроченные ресурсы).
- Аппаратная перезагрузка (принудительная загрузка всех ресурсов сайта).
- Очистка кэша и аппаратная перезагрузка.
2. Форматирование минифицированых исходников
Инструменты разработчика Chrome имеют встроенный «прихорашиватель» минимизированных исходных кодов к удобочитаемому виду. Кнопка находится в левом нижнем углу открытого в данный момент файла во вкладке Sources.
3. Отображение shadow DOM
Такие элементы как поля ввода и кнопки, браузеры, создают из других базовых элементов которые обычно скрыты. Тем не менее, вы можете перейти Settings -> General и включить Show user agent shadow DOM, для отображения этих базовых элементов во вкладке Elements. Это даст вам возможность оформлять их по отдельности.
4. Фильтрация и поиск
При работе с DOM, CSS, списком запросов на вкладке Network и т.д. зачастую мы видим перед собой большой список элементов, селекторов, свойств и так далее, в котором бывает сложно быстро найти интересующее нас значение. В таких случаях не стоит забывать про использование фильтрации и поиска которое присутствует на всех вкладках. Благодаря фильтрации мы будем отсеивать все варианты кроме подходящих под условия, а поиск позволит Вам быстро найти то что нужно, если Вы знаете ключевые «слова» для поиска. Как правило поле поиска скрыто и вызывается комбинацией Ctrl + F.
5. Come to the Dark Side
Просто потому что темная сторона круче (:
А если серьезно, темная тема убережет ваши глаза от лишнего напряжения, если основной цвет разрабатываемой или отлаживаемой страницы темный, как в моем случае. Включить можно вначале страницы настроек DevTools.
Читайте также: