JavaScript 控制台中的颜色
Chrome 的内置 JavaScript 控制台可以显示颜色吗？
我希望错误为红色，警告为橙色，console.log 为绿色。这可能吗？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
Chrome 的内置 JavaScript 控制台可以显示颜色吗？
我希望错误为红色，警告为橙色，console.log 为绿色。这可能吗？
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论（30）
在 Chrome 中Firefox (+31) 您可以在
console.log消息中添加 CSS：这同样适用于向同一命令添加多个 CSS。
参考文献
In Chrome & Firefox (+31) you can add CSS in
console.logmessages:The same can be applied for adding multiple CSS to same command.
References
这是一个带有彩虹阴影的极端例子。
Here is an extreme example with rainbow drop shadow.
您可以使用自定义样式表来为调试器着色。您可以将此代码放入
%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）如果您位于WinXP，但目录因操作系统而异。You can use a custom stylesheet to color your debugger. You can put this code in
%localappdata%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css(For Windows XP, use
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.旧版本的 Chrome 不允许您以编程方式获取
console.log()以特定颜色显示，但调用console.error()会显示红色 <错误行上的 code>X 图标并使文本变为红色，console.warn()为您提供黄色的!图标。然后，您可以使用控制台下方的“全部”、“错误”、“警告”和“日志”按钮过滤控制台条目。
事实证明，Firebug 自 2010 年以来就支持
console.log的自定义 CSS /a> 并且从 Chrome 24 开始添加了 Chrome 支持。
%c出现在第一个参数中的任意位置，下一个参数用作 CSS 来设置控制台行的样式。进一步的参数被串联起来（一如既往的情况）。Older versions of Chrome do not allow you to get
console.log()s to show in a specific color programmatically, but callingconsole.error()will put a redXicon on error lines and make the text red, andconsole.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.logs since 2010 and Chrome support has been added as of Chrome 24.When
%cappears 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).实际上，我只是偶然发现这一点，因为对会发生什么感到好奇，但实际上您可以使用 bash 着色标志来设置 Chrome 中输出的颜色：
输出：
请参阅此链接了解颜色标志的工作原理：https://misc.flogisoft.com/bash/tip_colors_and_formatting
基本上使用
\x1b或\x1B代替\e。例如。\x1b[31m及其后的所有文本都将切换为新颜色。我还没有在任何其他浏览器中尝试过这个，但认为值得一提。
I actually just found this by accident being curious with what would happen but you can actually use bash colouring flags to set the colour of an output in Chrome:
Output:
See this link for how colour flags work: https://misc.flogisoft.com/bash/tip_colors_and_formatting
Basically use the
\x1bor\x1Bin place of\e. eg.\x1b[31mand all text after that will be switched to the new colour.I haven't tried this in any other browser though, but thought it worth mentioning.
我写了 template-colors-web https://github.com/icodeforlove/Console.js 到让我们可以更轻松地做到这一点
使用默认的 console.log 来完成上述操作将非常困难。
如需现场互动演示点击此处。
I wrote template-colors-web https://github.com/icodeforlove/Console.js to allow us to do this a bit easier
The above would be extremely hard to do with the default console.log.
For a live interactive demo click here.
更新：
我去年为自己编写了一个 JavaScript 库。它包含其他功能，例如调试日志的详细程度，还提供导出日志文件的下载日志方法。查看 JS Logger 库及其文档。
我知道回答有点晚了，但由于 OP 要求在控制台中获取不同选项的自定义颜色消息。每个人都在每个
console.log()语句中传递颜色样式属性，这会增加代码的复杂性，从而使读者感到困惑，并且还会损害整体外观和效果。代码的感觉。我的建议是编写一个具有少量预定颜色（例如成功、错误、信息、警告、默认颜色）的函数，这些颜色将根据传递给函数的参数进行应用。
它提高了可读性并降低了代码的复杂性。它太容易维护并根据您的需要进一步扩展。
下面给出的是一个 JavaScript 函数，您必须编写一次然后使用它
一次又一次。
输出：
默认颜色是黑色，在这种情况下您不必传递任何关键字作为参数。在其他情况下，您应该传递
success、error、warning 或 info关键字以获得所需的结果。这是工作JSFiddle。查看浏览器控制台中的输出。
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 infokeywords for desired results.Here is working JSFiddle. See output in the browser's console.
表情符号
您可以像其他人在其答案中提到的那样使用文本颜色，以获得带有背景或前景色的彩色文本。
但您可以使用表情符号来代替！例如，您可以使用
⚠️表示警告消息，使用Emoji
You can use colors for text as others mentioned in their answers to have colorful text with a background or foreground color.
But you can use emojis instead! for example, you can use
⚠️for warning messages and????for error messages.Or simply use these notebooks as a color:
???? Bonus:
This method also helps you to quickly scan and find logs directly in the source code.
But some Linux distribution default emoji font is not colorful by default and you may want to make them colorful, first.
How to open emoji panel?
mac os: control + command + space
windows: win + .
linux: control + . or control + ;
是的，只需在消息前添加 %c 符号以及消息后面的样式即可。
如果您正在使用节点并希望在终端中为控制台着色，那么您可以使用转义序列，例如
将控制台着色为黄色，否则您可以使用 chalk 等库来为控制台着色
Yes just add %c sign before your message and the style followed by your message.
If you are using node and want to color console in terminal then you can use escape sequences like
will color console yellow, else you can use libraries like chalk to color console
有一系列内置函数用于为控制台日志着色：
There are a series of inbuilt functions for coloring the console log:
谷歌已经记录了这一点
https://developers.google.com/web/tools /chrome-devtools/console/console-write#styling_console_output_with_css
一个例子：
Google has documented this
https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css
One example:
您可以尝试：
输出：
You can try:
The output:
我发现您可以使用 ANSI 颜色代码制作带有颜色的日志，这样可以更轻松地在调试中查找特定消息。尝试一下：
I've discovered that you can make logs with colors using ANSI color codes, what makes easier to find specific messages in debug. Try it:
模板系统，如果您想创建彩色线条文本而不为每个块创建完整样式，则非常有用
template system, useful if you want to create colorful line text without creating full style for every block
看看这个：
控制台中的动画，加上 CSS
https://jsfiddle.net/a8y3jhfL/
你可以粘贴 ASCII在每一帧中观看 ASCII 动画
Check this out:
Animation in console, plus CSS
https://jsfiddle.net/a8y3jhfL/
you can paste ASCII in each frame to watch an ASCII animation
我怀疑是否有人会真正看到它，但对于那些想要在同一行中混合多种颜色的人，我有一个简单的解决方案：
I doubt that anyone will actually see it but I have a simple solution for those who want to mix several colors in the same line:
如果你想变得现代，你也可以使用模板文字 这是一个简单和复杂的例子；模板文字可让您使用表情符号、变量和更多酷炫的东西
If you want to be modern you can also use template literals here is a simple and complex example; Template literals let you use emojis, vars and way more cool stuff ????
Simple
Complex
Code
要链接跨多行的 CSS3 样式，您可以这样做，
Result
查找更多：- https://coderwall.com/p/fskzdw/colorful-console-log
干杯。
To chain CSS3 styles which spans across multiple lines, you can do like this,
Result
Find more :- https://coderwall.com/p/fskzdw/colorful-console-log
Cheers.
默认情况下，很少有内置控制台方法可以显示警告、错误和普通控制台以及特定的图标和文本颜色。
但是如果您仍然想应用自己的样式，您可以使用
%c以及消息和 CSS 样式规则作为第二个参数。注意：运行上述代码片段时，请在浏览器控制台中检查结果，而不是代码片段结果。
By default, there are few inbuilt console methods to display warnings, errors and normal console along with the specific icons and text colors.
But If you still want to apply your own styles, You can use
%cwith the message and CSS style rules as a second parameter.Note : While running the above code snippets, Kindly check the results in the browser console instead of snippet results.
从 Chrome 60 开始，他们在编写 console.info 时删除了蓝色文本颜色的功能，并对控制台 API 进行了许多更改。
如果您以 es6 模式编写字符串文字，在 console.log() 中使用反引号 `` 作为标识符（称为模板字符串），则以下方式可以对控制台输出进行着色。
from Chrome 60, they removed the facility of blue text color while writing console.info and does many much changes in console API.
if you write a string literal in the es6 pattern, using the backticks `` as the identifier (called as template string ) in console.log() then below way can colorize the console output.
几年前，我为自己编写了一个realllllllllllllllllllly简单的插件：
要添加到您的页面，您需要做的就是将其放在头部：
然后在JS中：
该框架具有以下代码：
以及：
对于任何其他 CSS。上面的设计语法如下：
I wrote a reallllllllllllllllly simple plugin for myself several years ago:
To add to your page all you need to do is put this in the head:
Then in JS:
The framework has code for:
as well as:
for any other css. The above is designed with the following syntax:
选项 1
示例：
选项 2
我现在创建 log-css.js
https://codepen.io/luis7lobo9b/pen/QWyobwY
示例：
OPTION 1
Example:
OPTION 2
I create now the log-css.js
https://codepen.io/luis7lobo9b/pen/QWyobwY
Example:
我最近想解决类似的问题，并构建了一个小函数来仅对我关心的关键字进行着色，这些关键字可以通过大括号
{keyword}轻松识别。这就像一个魅力：
从技术上讲，您可以用 switch/case 语句替换 if 语句，以允许出于不同原因使用多种样式
I recently wanted to solve for a similar issue and constructed a small function to color only keywords i cared about which were easily identifiable by surrounding curly braces
{keyword}.This worked like a charm:
technically you could swap out the if statement with a switch/case statement to allow multiple stylings for different reasons
我为此创建了一个包。 cslog
安装它
并像这样使用它
你可以给你的自定义颜色也是如此。 此处
I created a package for the same. cslog
Install it with
Use It like this
You can give your custom colors as well. here
这是另一种方法（在 Typescript 中），它覆盖 console.log 函数并检查传递的消息，以便根据消息中的开始标记应用 CSS 格式。此方法的好处是被调用者不需要使用某些包装器 console.log 函数，他们可以坚持使用普通 console.log() ，因此如果此覆盖消失，功能将恢复为默认控制台。日志：
用法示例：
输出：
Here's another approach (in Typescript), which overrides the console.log function and inspects the message passed in order to apply CSS formatting depending on a beginning token in the message. A benefit of this method is the callee's don't need to use some wrapper console.log function, they can stick to using vanilla console.log() and so if this override ever goes away the functionality will just revert to the default console.log:
Example usage:
Output:
标记控制台日志的简单方法（我发现）是：
result:
The simple way (that I've found) for marked the console log is:
result:
我编写了一个
npm模块，它使人们能够传递：[MyFunction]警告、成功< /code>、info和其他预定义消息类型https://www.npmjs.com/package/console-log-plus
输出（带有自定义前缀）：
输出（没有自定义前缀）：
输入：
为了确保用户不会渲染无效的颜色，我编写了一个 还有颜色验证器。它将通过
name、hex、rgb、rgba、hsl或hsla值I wrote a
npmmodule that gives one the possibility to pass:[MyFunction]warning,success,infoand other predefined message typeshttps://www.npmjs.com/package/console-log-plus
Output (with custom prefixes):
Output (without custom prefixes):
Input:
To make sure the user won't render an invalid color, I wrote a color validator as well. It will validate colors by
name,hex,rgb,rgba,hslorhslavalues如果您将前端项目与 vite 或 rollup 一起使用，则可以使用此模块 https://www.npmjs。 com/package/credits-log 它基本上获取作者、合作者等数据以及将其打印在项目控制台上的 ascii 涂鸦。
If you use frontend projects with vite or rollup you can use this module https://www.npmjs.com/package/credits-log which basically gets data such as author, collaborators and an ascii graffiti that prints it on the console in your projects.