красочный console.log

внешний интерфейс браузер

Увидел сегодня интересную статью, как распечатать красочный console.log? Друзья, работающие с интерфейсом, слишком хорошо знакомы с console.log, но до сих пор я использовал его наиболее часто для вывода сообщения в консоль. Неожиданно, можно ли применить стили к console.log? Я не знаю, знаешь ли ты?

demo

console.log('%cHello', 'color: green; background: yellow: font-size: 30px');

Видно, что приведенный выше оператор журнала состоит из трех частей:%c + message + styleгде за идентификатором следует сообщение, а вторым параметром является стиль Эффект конечного выходного сообщения определяется стилем.

преимущество

При столкновении с масштабным приложением с большим количеством вывода логов, если стилизованный лог выводится в каких-то важных местах, можно быстро найти его в консоли, чтобы не утонуть в куче логов и сложно найти .

каштан 2

console.log(
  'Nothing here %cHi Cat %cHey Bear',  // Console Message
  'color: blue', 'color: red' // CSS Style
);

Эффект показан ниже, текст перед идентификатором не затрагивается.

Multiple Console Message Styles

Все пять типов консольных сообщений можно стилизовать.

  • console.log
  • console.info
  • console.debug
  • console.warn
  • console.error
console.log('%cconsole.log', 'color: green;');
console.info('%cconsole.info', 'color: green;');
console.debug('%cconsole.debug', 'color: green;');
console.warn('%cconsole.warn', 'color: green;');
console.error('%cconsole.error', 'color: green;');

Практика элегантного стиля подачи

// 1. 将css样式内容放入数组
const styles = [
  'color: green', 
  'background: yellow', 
  'font-size: 30px',
  'border: 1px solid red',
  'text-shadow: 2px 2px black',
  'padding: 10px',
].join(';'); 
// 2. 利用join方法讲各项以分号连接成一串字符串
// 3. 传入styles变量
console.log('%cHello There', styles);

Даже вы также можете извлечь сообщение, которое необходимо вывести, и сохранить его в переменной.

const styles = ['color: green', 'background: yellow'].join(';');
const message = 'Some Important Message Here';
// 3. 传入styles和message变量
console.log('%c%s', styles, message);

Справочная статьяMedical.com/@samanthami...

Если вам это нравится, пожалуйста, поддержите его!

Категории