Цвета в консоли JavaScript

Вы можете использовать пользовательский стилевой файл, чтобы изменить цвет сообщений в отладчике. Добавьте следующий код в файл %localappdata%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css.

(Если вы используете Windows XP, путь будет: C:\Documents and Settings\<Имя пользователя>\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css), однако путь может варьироваться в зависимости от операционной системы.

Вот пример кода, который вы можете использовать:

.console-error-level .console-message-text {
    color: red;  /* Устанавливаем красный цвет для ошибок */
}

.console-warning-level .console-message-text {
    color: orange;  /* Устанавливаем оранжевый цвет для предупреждений */
}

.console-log-level .console-message-text {
    color: green;  /* Устанавливаем зеленый цвет для обычных сообщений */
}

После сохранения изменений в файле и перезапуска Chrome, вы увидите изменения в цветах сообщений в консоли.

Поставленный вопрос касается использования ANSI кодов для изменения цвета текста и фона в консоли. Ниже приведён пример кода на JavaScript, который демонстрирует, как можно определить цвета, а затем использовать их для форматирования строк в консольном выводе.

const colors = {
    reset: '\033[0m',

    // Цвет текста
    black: '\033[30m',
    red: '\033[31m',
    green: '\033[32m',
    yellow: '\033[33m',
    blue: '\033[34m',
    magenta: '\033[35m',
    cyan: '\033[36m',
    white: '\033[37m',

    // Цвет фона
    blackBg: '\033[40m',
    redBg: '\033[41m',
    greenBg: '\033[42m',
    yellowBg: '\033[43m',
    blueBg: '\033[44m',
    magentaBg: '\033[45m',
    cyanBg: '\033[46m',
    whiteBg: '\033[47m'
}

// Примеры использования цветов
console.log(`${colors.red}Это красный текст${colors.reset}`);
console.log(`${colors.reset}Это сброс цвета`);
console.log(`${colors.redBg}Это красный фон${colors.reset}`);

В этом коде создан объект colors, который содержит ANSI коды для различных цветов текста и фона. Затем они используются в командах console.log для изменения цвета выводимого текста. Для сброса цвета используется код colors.reset. Это позволяет вам управлять цветом вывода текста, что может быть полезно для создания более читабельных и выделяющихся сообщений в терминале.

Да, просто добавьте символ %c перед вашим сообщением, за которым следует стиль, а затем само сообщение.

console.log('%c Hello World','color:red;border:1px solid dodgerblue');

Если вы используете Node.js и хотите окрасить текст в консоли терминала, то можете воспользоваться escape-последовательностями, например:

console.log('\x1b[33m%s\x1b[0m', 'hi!') 

Это окрасит текст в желтый цвет. В противном случае можно использовать библиотеки, такие как chalk, чтобы окрашивать текст в консоли:

const chalk = require('chalk') 
console.log(chalk.yellow('hi!')) 

В JavaScript есть несколько встроенных функций для изменения цвета текста в консоль:

// Для сообщения с розовым фоном и красным текстом
console.error("Hello World");  

// Для сообщения с желтым фоном и коричневым текстом
console.warn("Hello World");  

// Для сообщения с символом INFO в начале текста
console.info("Hello World");  

// Для текста с пользовательским цветом
console.log('%cHello World', 'color:blue');
// здесь 'blue' можно заменить на любой другой код цвета

// Для текста с пользовательским цветом и пользовательским фоном
console.log('%cHello World', 'background:red;color:#fff');

Эти функции позволяют создавать более наглядные сообщения в консоли, что может быть особенно полезно для отладки.

Google задокументировал это здесь.

CSS-спецификатор формата позволяет вам настраивать отображение в консоли. Начните строку с спецификатора и укажите стиль, который вы хотите применить, как второй параметр.

Вот один из примеров:

console.log("%cЭтот текст будет оформлен крупным, синим шрифтом", "color: blue; font-size: x-large");

Таким образом, вы можете легко стилизовать вывод сообщений в консоли, используя CSS.