console.log prints in color in the console

  • The first parameter, you need to write a string template with %c, which represents the character area to be affected by the style you wrote, and you can write more than one: %c %c %c …
  • The latter parameters require you to write styles, just like writing CSS styles, but because the styles supported by the console are limited, attributes such as width and height are not supported. If you want to achieve width and height, you can use padding instead
  • A line of style corresponds to a %c
// 只有一个 %c 时
console.info(
  '%c this is me ',
  'background-color: #2196f3; padding: 6px 12px; border-radius: 2px; font-size: 14px; color: #fff; text-transform: uppercase; font-weight: 600;',
  window
);

// 两个 %c 时
console.info(
  '%c this is first %c this is second ',
  'background-color: #2196f3; padding: 6px 12px; border-radius: 2px; font-size: 14px; color: #fff; text-transform: uppercase; font-weight: 600;',
  'background-color: #00BCD4; padding: 6px 12px; border-radius: 2px; font-size: 14px; color: #fff; text-transform: uppercase; font-weight: 600;',
  window
);

Console.log, console.info, console.warn, console.error supported styles:

background, including border such as background-image
, and other border attributes
border-radius
box-decoration-break
box-shadow
clear and float
color
cursor
display
font, and other font attributes
line-height
margin
outline, and other outline attributes
padding
text-transform
text-

white-space
word-spacing
word-break
writing-mode
*

Guess you like

Origin blog.csdn.net/LRQQHM/article/details/131062723