问：

Chrome 的内置 JavaScript 控制台可以显示颜色吗？

我想要红色的错误，橙色的警告和绿色的警告。这可能吗？console.log

javascript 控制台 google-chrome-devtools

71赞 nrabinowitz 9/22/2011

您只需使用而不是 ...console.error()console.log

28赞 Charlie Schliesser 7/21/2013

console.warn()也可以使用橙色的“警告”图标，尽管文本本身仍然是黑色的。

5赞 2/15/2017

console.log("%c", "background: red;padding: 100000px;");将导致 Chrome 中出现非常奇怪的行为，尤其是在滚动控制台时。

1赞 Suhaib Janjua 9/18/2017

一种简单/最简单的方法，可以在控制台中显示颜色

1赞 vsync 9/20/2018

我写了一个小包来为日志着色：控制台颜色

答：

91赞 josh3736 9/22/2011 #1

旧版本的 Chrome 不允许您以编程方式以特定颜色显示 s，但调用会在错误行上放置一个红色图标，并使文本变为红色，并为您提供一个黄色图标。console.log()console.error()Xconsole.warn()!

然后，您可以使用控制台下方的“全部”、“错误”、“警告”和“日志”按钮筛选控制台条目。

事实证明，Firebug 自 2010 年以来一直支持自定义 CSS，并且从 Chrome 24 开始添加了 Chrome 支持。console.log

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55',
            'more text');

当出现在第一个参数的任意位置时，下一个参数将用作 CSS 来设置控制台行的样式。进一步的论点被串联起来（一如既往）。%c

2赞 Michael Minter 1/31/2013

它必须是第一个参数吗？此代码不起作用...返回 console.log（“%s”， message， “%c%s”， “color：#BBBBBB”， get_type（message））;

4赞 ChrisJJ 12/9/2016

“当 %c 出现在第一个参数的任意位置时，下一个参数将用作 CSS 来设置控制台行的样式” 更正 “当 %c 出现在任何参数中的任意位置时，下一个参数将用作 CSS，以设置 %c 后面的控制台行输出的样式，例如 i.imgur.com/msfPNbK.png

109赞 Dennis 9/22/2011 #2

可以使用自定义样式表为调试器着色。如果您使用的是 WinXP，则可以将此代码放入
（对于 Windows XP，请使用），但目录因操作系统而异。%localappdata%\Google\Chrome\User Data\Default\User StyleSheets\Custom.cssC:\Documents and Settings<User Name>\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;
}

18赞 ciju 10/15/2011

在 Ubuntu 10.10 上，样式表位于~/.config/google-chrome/Default/User\ StyleSheets/Custom.css

14赞 Lance 11/18/2011

在 Mac OS X 上，它位于 .~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css

4赞 Weston C 9/26/2012

Windows 7 位置显示为“C：\Users\<User Name>\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets”。此外，还有一个 Solarized Color Scheme 样式表。

1赞 Matthew Clark 11/10/2012

我想设置整行的样式，而不仅仅是文本，所以我删除了这个类。此外，我发现最令人愉悦的背景颜色是错误、警告和正常。.console-message-text#ffece6#fafad2#f0f9ff

2赞 Charlie Schliesser 7/22/2013

请记住，此样式表适用于您在 Chrome 中访问的所有页面，因此，如果您删除某个类以降低特殊性，您可能会在消息弹出窗口或类似内容中找到使用您的样式的网站。

1825赞 christianvuerings 10/23/2012 #3

在Chrome和Firefox（+31）中，您可以在消息中添加CSS：console.log

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');

Console color example in Chrome

这同样适用于向同一命令添加多个 CSS。

引用

25赞 josh3736 10/25/2012

显然，Firebug 长期以来一直支持这一点。

13赞 Hans 5/8/2013

要使用 HTML span 元素设置控制台消息.log不同部分的样式，请查看以下代码：jsfiddle.net/yg6hk/5

30赞 Derek 朕會功夫 2/17/2014

为什么只停留在给文本着色呢？让我们也把一些图像放到控制台中：

console.log('%c', 'padding:28px 119px;line-height:100px;background:url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6) no-repeat;');

4赞 Nick Sotiros 4/30/2014

这是最好的：它都是关于边界半径的background: #444; color: #bada55; padding: 2px; border-radius:2px

2赞 Nakilon 4/1/2015

以及如何CSS只有一个单词？UPD：只需在单词后面传递空字符串 css。

693赞 bartburkhardt 1/30/2014 #4

这是一个带有彩虹阴影的极端示例。

var css = "text-shadow: -1px -1px hsl(0,100%,50%), 1px 1px hsl(5.4, 100%, 50%), 3px 2px hsl(10.8, 100%, 50%), 5px 3px hsl(16.2, 100%, 50%), 7px 4px hsl(21.6, 100%, 50%), 9px 5px hsl(27, 100%, 50%), 11px 6px hsl(32.4, 100%, 50%), 13px 7px hsl(37.8, 100%, 50%), 14px 8px hsl(43.2, 100%, 50%), 16px 9px hsl(48.6, 100%, 50%), 18px 10px hsl(54, 100%, 50%), 20px 11px hsl(59.4, 100%, 50%), 22px 12px hsl(64.8, 100%, 50%), 23px 13px hsl(70.2, 100%, 50%), 25px 14px hsl(75.6, 100%, 50%), 27px 15px hsl(81, 100%, 50%), 28px 16px hsl(86.4, 100%, 50%), 30px 17px hsl(91.8, 100%, 50%), 32px 18px hsl(97.2, 100%, 50%), 33px 19px hsl(102.6, 100%, 50%), 35px 20px hsl(108, 100%, 50%), 36px 21px hsl(113.4, 100%, 50%), 38px 22px hsl(118.8, 100%, 50%), 39px 23px hsl(124.2, 100%, 50%), 41px 24px hsl(129.6, 100%, 50%), 42px 25px hsl(135, 100%, 50%), 43px 26px hsl(140.4, 100%, 50%), 45px 27px hsl(145.8, 100%, 50%), 46px 28px hsl(151.2, 100%, 50%), 47px 29px hsl(156.6, 100%, 50%), 48px 30px hsl(162, 100%, 50%), 49px 31px hsl(167.4, 100%, 50%), 50px 32px hsl(172.8, 100%, 50%), 51px 33px hsl(178.2, 100%, 50%), 52px 34px hsl(183.6, 100%, 50%), 53px 35px hsl(189, 100%, 50%), 54px 36px hsl(194.4, 100%, 50%), 55px 37px hsl(199.8, 100%, 50%), 55px 38px hsl(205.2, 100%, 50%), 56px 39px hsl(210.6, 100%, 50%), 57px 40px hsl(216, 100%, 50%), 57px 41px hsl(221.4, 100%, 50%), 58px 42px hsl(226.8, 100%, 50%), 58px 43px hsl(232.2, 100%, 50%), 58px 44px hsl(237.6, 100%, 50%), 59px 45px hsl(243, 100%, 50%), 59px 46px hsl(248.4, 100%, 50%), 59px 47px hsl(253.8, 100%, 50%), 59px 48px hsl(259.2, 100%, 50%), 59px 49px hsl(264.6, 100%, 50%), 60px 50px hsl(270, 100%, 50%), 59px 51px hsl(275.4, 100%, 50%), 59px 52px hsl(280.8, 100%, 50%), 59px 53px hsl(286.2, 100%, 50%), 59px 54px hsl(291.6, 100%, 50%), 59px 55px hsl(297, 100%, 50%), 58px 56px hsl(302.4, 100%, 50%), 58px 57px hsl(307.8, 100%, 50%), 58px 58px hsl(313.2, 100%, 50%), 57px 59px hsl(318.6, 100%, 50%), 57px 60px hsl(324, 100%, 50%), 56px 61px hsl(329.4, 100%, 50%), 55px 62px hsl(334.8, 100%, 50%), 55px 63px hsl(340.2, 100%, 50%), 54px 64px hsl(345.6, 100%, 50%), 53px 65px hsl(351, 100%, 50%), 52px 66px hsl(356.4, 100%, 50%), 51px 67px hsl(361.8, 100%, 50%), 50px 68px hsl(367.2, 100%, 50%), 49px 69px hsl(372.6, 100%, 50%), 48px 70px hsl(378, 100%, 50%), 47px 71px hsl(383.4, 100%, 50%), 46px 72px hsl(388.8, 100%, 50%), 45px 73px hsl(394.2, 100%, 50%), 43px 74px hsl(399.6, 100%, 50%), 42px 75px hsl(405, 100%, 50%), 41px 76px hsl(410.4, 100%, 50%), 39px 77px hsl(415.8, 100%, 50%), 38px 78px hsl(421.2, 100%, 50%), 36px 79px hsl(426.6, 100%, 50%), 35px 80px hsl(432, 100%, 50%), 33px 81px hsl(437.4, 100%, 50%), 32px 82px hsl(442.8, 100%, 50%), 30px 83px hsl(448.2, 100%, 50%), 28px 84px hsl(453.6, 100%, 50%), 27px 85px hsl(459, 100%, 50%), 25px 86px hsl(464.4, 100%, 50%), 23px 87px hsl(469.8, 100%, 50%), 22px 88px hsl(475.2, 100%, 50%), 20px 89px hsl(480.6, 100%, 50%), 18px 90px hsl(486, 100%, 50%), 16px 91px hsl(491.4, 100%, 50%), 14px 92px hsl(496.8, 100%, 50%), 13px 93px hsl(502.2, 100%, 50%), 11px 94px hsl(507.6, 100%, 50%), 9px 95px hsl(513, 100%, 50%), 7px 96px hsl(518.4, 100%, 50%), 5px 97px hsl(523.8, 100%, 50%), 3px 98px hsl(529.2, 100%, 50%), 1px 99px hsl(534.6, 100%, 50%), 7px 100px hsl(540, 100%, 50%), -1px 101px hsl(545.4, 100%, 50%), -3px 102px hsl(550.8, 100%, 50%), -5px 103px hsl(556.2, 100%, 50%), -7px 104px hsl(561.6, 100%, 50%), -9px 105px hsl(567, 100%, 50%), -11px 106px hsl(572.4, 100%, 50%), -13px 107px hsl(577.8, 100%, 50%), -14px 108px hsl(583.2, 100%, 50%), -16px 109px hsl(588.6, 100%, 50%), -18px 110px hsl(594, 100%, 50%), -20px 111px hsl(599.4, 100%, 50%), -22px 112px hsl(604.8, 100%, 50%), -23px 113px hsl(610.2, 100%, 50%), -25px 114px hsl(615.6, 100%, 50%), -27px 115px hsl(621, 100%, 50%), -28px 116px hsl(626.4, 100%, 50%), -30px 117px hsl(631.8, 100%, 50%), -32px 118px hsl(637.2, 100%, 50%), -33px 119px hsl(642.6, 100%, 50%), -35px 120px hsl(648, 100%, 50%), -36px 121px hsl(653.4, 100%, 50%), -38px 122px hsl(658.8, 100%, 50%), -39px 123px hsl(664.2, 100%, 50%), -41px 124px hsl(669.6, 100%, 50%), -42px 125px hsl(675, 100%, 50%), -43px 126px hsl(680.4, 100%, 50%), -45px 127px hsl(685.8, 100%, 50%), -46px 128px hsl(691.2, 100%, 50%), -47px 129px hsl(696.6, 100%, 50%), -48px 130px hsl(702, 100%, 50%), -49px 131px hsl(707.4, 100%, 50%), -50px 132px hsl(712.8, 100%, 50%), -51px 133px hsl(718.2, 100%, 50%), -52px 134px hsl(723.6, 100%, 50%), -53px 135px hsl(729, 100%, 50%), -54px 136px hsl(734.4, 100%, 50%), -55px 137px hsl(739.8, 100%, 50%), -55px 138px hsl(745.2, 100%, 50%), -56px 139px hsl(750.6, 100%, 50%), -57px 140px hsl(756, 100%, 50%), -57px 141px hsl(761.4, 100%, 50%), -58px 142px hsl(766.8, 100%, 50%), -58px 143px hsl(772.2, 100%, 50%), -58px 144px hsl(777.6, 100%, 50%), -59px 145px hsl(783, 100%, 50%), -59px 146px hsl(788.4, 100%, 50%), -59px 147px hsl(793.8, 100%, 50%), -59px 148px hsl(799.2, 100%, 50%), -59px 149px hsl(804.6, 100%, 50%), -60px 150px hsl(810, 100%, 50%), -59px 151px hsl(815.4, 100%, 50%), -59px 152px hsl(820.8, 100%, 50%), -59px 153px hsl(826.2, 100%, 50%), -59px 154px hsl(831.6, 100%, 50%), -59px 155px hsl(837, 100%, 50%), -58px 156px hsl(842.4, 100%, 50%), -58px 157px hsl(847.8, 100%, 50%), -58px 158px hsl(853.2, 100%, 50%), -57px 159px hsl(858.6, 100%, 50%), -57px 160px hsl(864, 100%, 50%), -56px 161px hsl(869.4, 100%, 50%), -55px 162px hsl(874.8, 100%, 50%), -55px 163px hsl(880.2, 100%, 50%), -54px 164px hsl(885.6, 100%, 50%), -53px 165px hsl(891, 100%, 50%), -52px 166px hsl(896.4, 100%, 50%), -51px 167px hsl(901.8, 100%, 50%), -50px 168px hsl(907.2, 100%, 50%), -49px 169px hsl(912.6, 100%, 50%), -48px 170px hsl(918, 100%, 50%), -47px 171px hsl(923.4, 100%, 50%), -46px 172px hsl(928.8, 100%, 50%), -45px 173px hsl(934.2, 100%, 50%), -43px 174px hsl(939.6, 100%, 50%), -42px 175px hsl(945, 100%, 50%), -41px 176px hsl(950.4, 100%, 50%), -39px 177px hsl(955.8, 100%, 50%), -38px 178px hsl(961.2, 100%, 50%), -36px 179px hsl(966.6, 100%, 50%), -35px 180px hsl(972, 100%, 50%), -33px 181px hsl(977.4, 100%, 50%), -32px 182px hsl(982.8, 100%, 50%), -30px 183px hsl(988.2, 100%, 50%), -28px 184px hsl(993.6, 100%, 50%), -27px 185px hsl(999, 100%, 50%), -25px 186px hsl(1004.4, 100%, 50%), -23px 187px hsl(1009.8, 100%, 50%), -22px 188px hsl(1015.2, 100%, 50%), -20px 189px hsl(1020.6, 100%, 50%), -18px 190px hsl(1026, 100%, 50%), -16px 191px hsl(1031.4, 100%, 50%), -14px 192px hsl(1036.8, 100%, 50%), -13px 193px hsl(1042.2, 100%, 50%), -11px 194px hsl(1047.6, 100%, 50%), -9px 195px hsl(1053, 100%, 50%), -7px 196px hsl(1058.4, 100%, 50%), -5px 197px hsl(1063.8, 100%, 50%), -3px 198px hsl(1069.2, 100%, 50%), -1px 199px hsl(1074.6, 100%, 50%), -1px 200px hsl(1080, 100%, 50%), 1px 201px hsl(1085.4, 100%, 50%), 3px 202px hsl(1090.8, 100%, 50%), 5px 203px hsl(1096.2, 100%, 50%), 7px 204px hsl(1101.6, 100%, 50%), 9px 205px hsl(1107, 100%, 50%), 11px 206px hsl(1112.4, 100%, 50%), 13px 207px hsl(1117.8, 100%, 50%), 14px 208px hsl(1123.2, 100%, 50%), 16px 209px hsl(1128.6, 100%, 50%), 18px 210px hsl(1134, 100%, 50%), 20px 211px hsl(1139.4, 100%, 50%), 22px 212px hsl(1144.8, 100%, 50%), 23px 213px hsl(1150.2, 100%, 50%), 25px 214px hsl(1155.6, 100%, 50%), 27px 215px hsl(1161, 100%, 50%), 28px 216px hsl(1166.4, 100%, 50%), 30px 217px hsl(1171.8, 100%, 50%), 32px 218px hsl(1177.2, 100%, 50%), 33px 219px hsl(1182.6, 100%, 50%), 35px 220px hsl(1188, 100%, 50%), 36px 221px hsl(1193.4, 100%, 50%), 38px 222px hsl(1198.8, 100%, 50%), 39px 223px hsl(1204.2, 100%, 50%), 41px 224px hsl(1209.6, 100%, 50%), 42px 225px hsl(1215, 100%, 50%), 43px 226px hsl(1220.4, 100%, 50%), 45px 227px hsl(1225.8, 100%, 50%), 46px 228px hsl(1231.2, 100%, 50%), 47px 229px hsl(1236.6, 100%, 50%), 48px 230px hsl(1242, 100%, 50%), 49px 231px hsl(1247.4, 100%, 50%), 50px 232px hsl(1252.8, 100%, 50%), 51px 233px hsl(1258.2, 100%, 50%), 52px 234px hsl(1263.6, 100%, 50%), 53px 235px hsl(1269, 100%, 50%), 54px 236px hsl(1274.4, 100%, 50%), 55px 237px hsl(1279.8, 100%, 50%), 55px 238px hsl(1285.2, 100%, 50%), 56px 239px hsl(1290.6, 100%, 50%), 57px 240px hsl(1296, 100%, 50%), 57px 241px hsl(1301.4, 100%, 50%), 58px 242px hsl(1306.8, 100%, 50%), 58px 243px hsl(1312.2, 100%, 50%), 58px 244px hsl(1317.6, 100%, 50%), 59px 245px hsl(1323, 100%, 50%), 59px 246px hsl(1328.4, 100%, 50%), 59px 247px hsl(1333.8, 100%, 50%), 59px 248px hsl(1339.2, 100%, 50%), 59px 249px hsl(1344.6, 100%, 50%), 60px 250px hsl(1350, 100%, 50%), 59px 251px hsl(1355.4, 100%, 50%), 59px 252px hsl(1360.8, 100%, 50%), 59px 253px hsl(1366.2, 100%, 50%), 59px 254px hsl(1371.6, 100%, 50%), 59px 255px hsl(1377, 100%, 50%), 58px 256px hsl(1382.4, 100%, 50%), 58px 257px hsl(1387.8, 100%, 50%), 58px 258px hsl(1393.2, 100%, 50%), 57px 259px hsl(1398.6, 100%, 50%), 57px 260px hsl(1404, 100%, 50%), 56px 261px hsl(1409.4, 100%, 50%), 55px 262px hsl(1414.8, 100%, 50%), 55px 263px hsl(1420.2, 100%, 50%), 54px 264px hsl(1425.6, 100%, 50%), 53px 265px hsl(1431, 100%, 50%), 52px 266px hsl(1436.4, 100%, 50%), 51px 267px hsl(1441.8, 100%, 50%), 50px 268px hsl(1447.2, 100%, 50%), 49px 269px hsl(1452.6, 100%, 50%), 48px 270px hsl(1458, 100%, 50%), 47px 271px hsl(1463.4, 100%, 50%), 46px 272px hsl(1468.8, 100%, 50%), 45px 273px hsl(1474.2, 100%, 50%), 43px 274px hsl(1479.6, 100%, 50%), 42px 275px hsl(1485, 100%, 50%), 41px 276px hsl(1490.4, 100%, 50%), 39px 277px hsl(1495.8, 100%, 50%), 38px 278px hsl(1501.2, 100%, 50%), 36px 279px hsl(1506.6, 100%, 50%), 35px 280px hsl(1512, 100%, 50%), 33px 281px hsl(1517.4, 100%, 50%), 32px 282px hsl(1522.8, 100%, 50%), 30px 283px hsl(1528.2, 100%, 50%), 28px 284px hsl(1533.6, 100%, 50%), 27px 285px hsl(1539, 100%, 50%), 25px 286px hsl(1544.4, 100%, 50%), 23px 287px hsl(1549.8, 100%, 50%), 22px 288px hsl(1555.2, 100%, 50%), 20px 289px hsl(1560.6, 100%, 50%), 18px 290px hsl(1566, 100%, 50%), 16px 291px hsl(1571.4, 100%, 50%), 14px 292px hsl(1576.8, 100%, 50%), 13px 293px hsl(1582.2, 100%, 50%), 11px 294px hsl(1587.6, 100%, 50%), 9px 295px hsl(1593, 100%, 50%), 7px 296px hsl(1598.4, 100%, 50%), 5px 297px hsl(1603.8, 100%, 50%), 3px 298px hsl(1609.2, 100%, 50%), 1px 299px hsl(1614.6, 100%, 50%), 2px 300px hsl(1620, 100%, 50%), -1px 301px hsl(1625.4, 100%, 50%), -3px 302px hsl(1630.8, 100%, 50%), -5px 303px hsl(1636.2, 100%, 50%), -7px 304px hsl(1641.6, 100%, 50%), -9px 305px hsl(1647, 100%, 50%), -11px 306px hsl(1652.4, 100%, 50%), -13px 307px hsl(1657.8, 100%, 50%), -14px 308px hsl(1663.2, 100%, 50%), -16px 309px hsl(1668.6, 100%, 50%), -18px 310px hsl(1674, 100%, 50%), -20px 311px hsl(1679.4, 100%, 50%), -22px 312px hsl(1684.8, 100%, 50%), -23px 313px hsl(1690.2, 100%, 50%), -25px 314px hsl(1695.6, 100%, 50%), -27px 315px hsl(1701, 100%, 50%), -28px 316px hsl(1706.4, 100%, 50%), -30px 317px hsl(1711.8, 100%, 50%), -32px 318px hsl(1717.2, 100%, 50%), -33px 319px hsl(1722.6, 100%, 50%), -35px 320px hsl(1728, 100%, 50%), -36px 321px hsl(1733.4, 100%, 50%), -38px 322px hsl(1738.8, 100%, 50%), -39px 323px hsl(1744.2, 100%, 50%), -41px 324px hsl(1749.6, 100%, 50%), -42px 325px hsl(1755, 100%, 50%), -43px 326px hsl(1760.4, 100%, 50%), -45px 327px hsl(1765.8, 100%, 50%), -46px 328px hsl(1771.2, 100%, 50%), -47px 329px hsl(1776.6, 100%, 50%), -48px 330px hsl(1782, 100%, 50%), -49px 331px hsl(1787.4, 100%, 50%), -50px 332px hsl(1792.8, 100%, 50%), -51px 333px hsl(1798.2, 100%, 50%), -52px 334px hsl(1803.6, 100%, 50%), -53px 335px hsl(1809, 100%, 50%), -54px 336px hsl(1814.4, 100%, 50%), -55px 337px hsl(1819.8, 100%, 50%), -55px 338px hsl(1825.2, 100%, 50%), -56px 339px hsl(1830.6, 100%, 50%), -57px 340px hsl(1836, 100%, 50%), -57px 341px hsl(1841.4, 100%, 50%), -58px 342px hsl(1846.8, 100%, 50%), -58px 343px hsl(1852.2, 100%, 50%), -58px 344px hsl(1857.6, 100%, 50%), -59px 345px hsl(1863, 100%, 50%), -59px 346px hsl(1868.4, 100%, 50%), -59px 347px hsl(1873.8, 100%, 50%), -59px 348px hsl(1879.2, 100%, 50%), -59px 349px hsl(1884.6, 100%, 50%), -60px 350px hsl(1890, 100%, 50%), -59px 351px hsl(1895.4, 100%, 50%), -59px 352px hsl(1900.8, 100%, 50%), -59px 353px hsl(1906.2, 100%, 50%), -59px 354px hsl(1911.6, 100%, 50%), -59px 355px hsl(1917, 100%, 50%), -58px 356px hsl(1922.4, 100%, 50%), -58px 357px hsl(1927.8, 100%, 50%), -58px 358px hsl(1933.2, 100%, 50%), -57px 359px hsl(1938.6, 100%, 50%), -57px 360px hsl(1944, 100%, 50%), -56px 361px hsl(1949.4, 100%, 50%), -55px 362px hsl(1954.8, 100%, 50%), -55px 363px hsl(1960.2, 100%, 50%), -54px 364px hsl(1965.6, 100%, 50%), -53px 365px hsl(1971, 100%, 50%), -52px 366px hsl(1976.4, 100%, 50%), -51px 367px hsl(1981.8, 100%, 50%), -50px 368px hsl(1987.2, 100%, 50%), -49px 369px hsl(1992.6, 100%, 50%), -48px 370px hsl(1998, 100%, 50%), -47px 371px hsl(2003.4, 100%, 50%), -46px 372px hsl(2008.8, 100%, 50%), -45px 373px hsl(2014.2, 100%, 50%), -43px 374px hsl(2019.6, 100%, 50%), -42px 375px hsl(2025, 100%, 50%), -41px 376px hsl(2030.4, 100%, 50%), -39px 377px hsl(2035.8, 100%, 50%), -38px 378px hsl(2041.2, 100%, 50%), -36px 379px hsl(2046.6, 100%, 50%), -35px 380px hsl(2052, 100%, 50%), -33px 381px hsl(2057.4, 100%, 50%), -32px 382px hsl(2062.8, 100%, 50%), -30px 383px hsl(2068.2, 100%, 50%), -28px 384px hsl(2073.6, 100%, 50%), -27px 385px hsl(2079, 100%, 50%), -25px 386px hsl(2084.4, 100%, 50%), -23px 387px hsl(2089.8, 100%, 50%), -22px 388px hsl(2095.2, 100%, 50%), -20px 389px hsl(2100.6, 100%, 50%), -18px 390px hsl(2106, 100%, 50%), -16px 391px hsl(2111.4, 100%, 50%), -14px 392px hsl(2116.8, 100%, 50%), -13px 393px hsl(2122.2, 100%, 50%), -11px 394px hsl(2127.6, 100%, 50%), -9px 395px hsl(2133, 100%, 50%), -7px 396px hsl(2138.4, 100%, 50%), -5px 397px hsl(2143.8, 100%, 50%), -3px 398px hsl(2149.2, 100%, 50%), -1px 399px hsl(2154.6, 100%, 50%); font-size: 40px;";

console.log("%cExample %s", css, 'all code runs happy');

enter image description here

3赞 Asqan 6/7/2018

可悲的是，文本不知何故看起来与您的示例不完全一样（在我或最近的 Chromes 中，IDK）

9赞 vsync 9/18/2018

在我的控制台上，它被夹在溢出线的高度（Chrome 69, WIN7)

4赞 Vikrant 4/15/2020

@Asqan 只需写一个足够大的文本让控制台包装它，你就会看到。:D

8赞 Mohd Abdul Mujib 10/18/2021

L.M.A.O 这太疯狂了！！

1赞 ellockie 1/1/2022

为了给它更多的喘息空间，把它当作一个，把第二行修改为：整个“图片”是~，要全部看到，就改成:)divconsole.log("%cExample %s", "padding: 0 64px 44px 0; " + css, 'all code runs happy');400 px44px400px

54赞 Chad Cache 4/27/2014 #5

我编写了 template-colors-web https://github.com/icodeforlove/Console.js，以便我们更容易地做到这一点

console.log(c`red ${c`green ${'blue'.bold}.blue`}.green`.red);

使用默认控制台 .log 很难完成上述操作。

如需实时互动演示，请单击此处。

2赞 max pleaner 7/16/2016

与大多数其他解决方案不同，这也允许对包含字符串的变量进行着色。

2赞 Chad Cache 7/16/2016

实际上，这并不真正受支持，例如，您目前无法执行此操作，样式将在第一个样式项之后停止console.log(`this is inline ${'red'.red.bold} and this is more text`.grey)

2赞 max pleaner 7/16/2016

即使没有“内联”着色，仍然可以执行诸如 or 之类的操作。我不知道有什么方法可以用其他人推荐的语法来做到这一点。所以谢谢你建立图书馆var txt = "asd"; txt.red`${txt}`.red + `${txt}`.green%c

1赞 Muhammad Rehan Saeed 11/5/2016

您如何在浏览器中检测对此功能的支持，我查看了您的库的代码，但无法发现它？stackoverflow.com/questions/40428239/......

1赞 Chad Cache 11/5/2016

@MuhammadRehanSaeed 浏览器检测

18赞 Craig Myles 6/9/2015 #6

谷歌已经记录了这个 https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

CSS 格式说明符允许您在控制台中自定义显示。使用说明符开始字符串，并指定要应用的样式作为第二个参数。

举个例子：

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

1赞 ChrisJJ 12/9/2016

“谷歌已经记录了这个 developer.chrome.com/devtools/docs/......。”现在没有提到控制台样式。

1赞 ChrisJJ 12/9/2016

它就在这里 developers.google.com/web/tools/chrome-devtools/console/...

0赞 Enrico 8/23/2022

Aaand 现在它在这里：developer.chrome.com/docs/devtools/console/format-style

28赞 Sandeep Gantait 2/22/2016 #7

有一系列用于为控制台日志着色的内置函数：

//For pink background and red text
console.error("Hello World");  

//For yellow background and brown text
console.warn("Hello World");  

//For just a INFO symbol at the beginning of the text
console.info("Hello World");  

//for custom colored text
console.log('%cHello World','color:blue');
//here blue could be replaced by any color code

//for custom colored text with custom background text
console.log('%cHello World','background:red;color:#fff')

4赞 Brad Kent 7/19/2017

似乎不再添加信息图标。不知道这是什么时候发生的。它现在与console.log（没有什么不同（至少在Chrome和Firefox上）console.info()

0赞 Clomp 6/15/2020

几年前，曾经用蓝色输出一条线。然后有一天，它被删除了。今天，它使用默认的黑色。它不再具有内置着色。console.info()

0赞 Frazer Kirkman 4/30/2022

请注意，还可以将样式添加到警告和错误中：console.error("%cblue","color:blue")

32赞 mostafa.mortazavi 3/1/2016 #8

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

    //text color

    black: '\033[30m',
    red: '\033[31m',
    green: '\033[32m',
    yellow: '\033[33m',
    blue: '\033[34m',
    magenta: '\033[35m',
    cyan: '\033[36m',
    white: '\033[37m',

    //background color

    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('\033[31m this is red color on text');
console.log('\033[0m this is reset');
console.log('\033[41m this is red color on background');

7赞 vusan 6/10/2016

或者作为已分配的 colors.red。console.log(color.red+' this is red color on text');

6赞 mauron85 7/4/2016

在 Chrome 和 Safari 上不执行任何操作。

4赞 Gustavo Rodrigues 5/21/2017

@mauron85 答案不在答案中，但那是针对 Node.js。

3赞 vsync 9/18/2018

@i336_ - 它有效（Chrome 69 在这里）。你可以恢复你之前半印象的状态;)

2赞 Muntashir Akon 7/27/2021

请注意，在严格模式下，您必须替换为 or 因为它不支持数字转义。\033\x1b\u001b

46赞 Suhaib Janjua 3/2/2017 #9

更新：

去年，我为自己编写了一个JavaScript库。它包含其他功能，例如调试日志的详细程度，还提供导出日志文件的下载日志方法。查看 JS Logger 库及其文档。

我知道现在回答有点晚了，但因为 OP 要求在控制台中获取不同选项的自定义颜色消息。每个人都在每个语句中传递颜色样式属性，这会在代码中造成复杂性，从而使读者感到困惑，并且还会损害代码的整体外观和感觉。console.log()

我的建议是编写一个具有很少预定颜色（例如成功、错误、信息、警告、默认颜色）的函数，该函数将根据传递给函数的参数进行应用。

它提高了可读性并降低了代码的复杂性。它太容易维护了，并根据您的需要进一步扩展。

下面给出了一个 JavaScript 函数，您必须编写一次即可使用它一次又一次。

function colorLog(message, color) {

    color = color || "black";

    switch (color) {
        case "success":  
             color = "Green"; 
             break;
        case "info":     
                color = "DodgerBlue";  
             break;
        case "error":   
             color = "Red";     
             break;
        case "warning":  
             color = "Orange";   
             break;
        default: 
             color = color;
    }

    console.log("%c" + message, "color:" + color);
}

输出：

默认颜色为黑色，在这种情况下，您不必将任何关键字作为参数传递。在其他情况下，您应该传递关键字以获得所需的结果。success, error, warning, or info

这是工作的 JSFiddle。请参阅浏览器控制台中的输出。

0赞 Kyle Baker 4/27/2017

我想到了一个更，等等的实现。足够接近。log.info("this would be green")

0赞 Paweł Bulwan 10/20/2017

很酷，但考虑到 console.error（）、console.warn（）、console.info（）的标准方法在这种情况下似乎更好，因为它也 1）提供了我们在这里丢失的语义，它允许在控制台中按严重性过滤消息 2）使用最适合用户配置的颜色，例如。深色模式或高对比度模式下的浏览器

0赞 Suhaib Janjua 10/20/2017

console.info（）和 console.log（）显示相同的标准日志，仅查看输出无法区分。但是，是的，console.warn（）和 console.error（）可用于稍后过滤消息。正如OP所问的;如何在控制台中打印彩色日志。我认为根据 OP 提出的问题，答案是最好的。我们不过滤消息，但我们专注于打印彩色日志。我非常感谢您的建议，并且该示例也可以进一步增强以满足您的要求。

0赞 LexaGC 3/31/2020

@SuhaibJanjua 如何做到这一点，但要保持检查员的良好行号参考？

14赞 uingtea 6/18/2017 #10

模板系统，如果您想在不为每个块创建完整样式的情况下创建彩色线条文本，则很有用

var tpl = 'background-color:greenyellow; border:3px solid orange; font-size:18px; font-weight: bold;padding:3px 5px;color:';
console.log('%cMagenta %cRed %cBlue', `${tpl} magenta`, `${tpl} Red`,`${tpl} #4274fb`);

6赞 xkeshav 9/29/2017 #11

从 Chrome 60 开始，他们在编写 console.info 时删除了蓝色文本颜色的功能，并在控制台 API 中进行了许多更改。

如果您在 ES6 模式中编写字符串文字，在 console.log（ 中使用反引号 '' 作为标识符（称为模板字符串），那么下面的方法可以对控制台输出进行着色。

console.log(`%cToday date=>%c${new Date()}`,`color:#F74C2F`, `color:green`);
// output :Today date (in red color) => Date (in green color)

9赞 Pawel 2/16/2018 #12

看看这个：

控制台中的动画，以及 CSS

(function() {
  var frame = 0;
  var frames = [
    "This",
    "is",
    "SPARTA!",
    " ",
    "SPARTA!",
    " ",
    "SPARTA!",
    " ",
    "SPARTA!",
    " ",
    "SPARTA!",
    " ",
    "SPARTA!"
  ];
  var showNext = () => {
    console.clear();
    console.log(
      `%c `,
      "background: red; color: white; font-size: 15px; padding: 3px 41%;"
    );
    console.log(
      `%c ${frames[frame]}`,
      "background: red; color: white; font-size: 25px; padding: 3px 40%;"
    );
    console.log(
      `%c `,
      "background: red; color: white; font-size: 15px; padding: 3px 41%;"
    );
    setTimeout(
      showNext,
      frames[frame] === "SPARTA!" || frames[frame] === " " ? 100 : 1500
    );
    // next frame and loop
    frame++;
    if (frame >= frames.length) {
      frame = 0;
    }
  };
  showNext();
})();

https://jsfiddle.net/a8y3jhfL/

您可以在每一帧中粘贴 ASCII 以观看 ASCII 动画

1赞 Luis Lobo 12/22/2022

这很简单，但结果非常好！哈哈

3赞 Aurielle Perlmann 5/27/2018 #13

我最近想解决一个类似的问题，并构建了一个小函数来仅为我所关心的关键字着色，这些关键字很容易通过周围的大括号识别。{keyword}

这就像一个魅力：

var text = 'some text with some {special} formatting on this {keyword} and this {keyword}'
var splitText = text.split(' ');
var cssRules = [];
var styledText = '';
_.each(splitText, (split) => {
    if (/^\{/.test(split)) {
        cssRules.push('color:blue');
    } else {
        cssRules.push('color:inherit')
    }
    styledText += `%c${split} `
});
console.log(styledText , ...cssRules)

从技术上讲，您可以将 if 语句换成 switch/case 语句，以允许出于不同原因使用多种样式

53赞 James Heazlewood 10/10/2018 #14

实际上，我只是偶然发现了这一点，对会发生什么感到好奇，但您实际上可以使用bash着色标志在Chrome中设置输出的颜色：

console.log('\x1b[36m Hello \x1b[34m Colored \x1b[35m World!');
console.log('\x1B[31mHello\x1B[34m World');
console.log('\x1b[43mHighlighted');

输出：

有关颜色标志的工作原理，请参阅此链接：https://misc.flogisoft.com/bash/tip_colors_and_formatting

基本上使用 or 代替。例如。之后的所有文本都将切换为新颜色。\x1b\x1B\e\x1b[31m

不过，我没有在任何其他浏览器中尝试过，但认为值得一提。

4赞 btwiuse 10/28/2018

这很酷，但似乎是特定于铬/铬的。我在 firefox 65 中测试了它，它不起作用

0赞 James Heazlewood 10/29/2018

是的，Firefox 还会警告您粘贴到控制台中。对于 Firefox，您必须使用 %c 和 styles。

0赞 Qwerty 11/10/2022

为什么这种着色只在第一个参数中起作用？即这行不通console.log('\x1b[36m Hello', '\x1b[34m Colored', '\x1b[35m World!');

6赞 Anjana Silva 2/18/2019 #15

要链接跨多行的 CSS3 样式，您可以这样做，

var styles = [
    'background: linear-gradient(#D33106, #571402)'
    , 'border: 1px solid #3E0E02'
    , 'color: white'
    , 'display: block'
    , 'text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)'
    , 'box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset'
    , 'line-height: 40px'
    , 'text-align: center'
    , 'font-weight: bold'
].join(';');

console.log('%c a spicy log message ?', styles);

结果

干杯。

2赞 Wallace Sidhrée 6/12/2019 #16

我写了一个模块，让人们有可能通过：npm

自定义颜色 - 文本和背景;
前缀 - 帮助识别来源，例如[MyFunction]
类型 - 如、和其他预定义的消息类型warningsuccessinfo

https://www.npmjs.com/package/console-log-plus

输出（带有自定义前缀）：

clp({
  type: 'ok',
  prefix: 'Okay',
  message: 'you bet'
});
clp({
  type: 'error',
  prefix: 'Ouch',
  message: 'you bet'
});
clp({
  type: 'warning',
  prefix: 'I told you',
  message: 'you bet'
});
clp({
  type: 'attention',
  prefix: 'Watch it!',
  message: 'you bet'
});
clp({
  type: 'success',
  prefix: 'Awesome!',
  message: 'you bet'
});
clp({
  type: 'info',
  prefix: 'FYI',
  message: 'you bet'
});
clp({
  type: 'default',
  prefix: 'No fun',
  message: 'you bet'
});

输出（不带自定义前缀）：

输入：

clp({
  type: 'ok',
  message: 'you bet'
});
clp({
  type: 'error',
  message: 'you bet'
});
clp({
  type: 'warning',
  message: 'you bet'
});
clp({
  type: 'attention',
  message: 'you bet'
});
clp({
  type: 'success',
  message: 'you bet'
});
clp({
  type: 'info',
  message: 'you bet'
});
clp({
  type: 'default',
  message: 'you bet'
});

为了确保用户不会呈现无效颜色，我还编写了一个颜色验证器。它将通过、、或值来验证颜色namehexrgbrgbahslhsla

3赞 Jack Crane 9/13/2019 #17

几年前，我为自己写了一个简单的插件：

要添加到您的页面，您需要做的就是将其放在标题中：

<script src="https://jackcrane.github.io/static/cdn/jconsole.js" type="text/javascript">

然后在 JS 中：

jconsole.color.red.log('hellllooo world');

该框架包含以下代码：

jconsole.color.red.log();
jconsole.color.orange.log();
jconsole.color.yellow.log();
jconsole.color.green.log();
jconsole.color.blue.log();
jconsole.color.purple.log();
jconsole.color.teal.log();

以及：

jconsole.css.log("hello world","color:red;");

对于任何其他 CSS。以上是用以下语法设计的：

jconsole.css.log(message to log,css code to style the logged message)

9赞 Aharon Ohayon 3/9/2020 #18

我怀疑有人会真正看到它，但我为那些想要在同一行中混合多种颜色的人提供了一个简单的解决方案：

export enum Colors {
    Black = '\033[30m',
    Red = '\x1b[31m',
    Green = '\x1b[32m',
    Yellow = '\x1b[33m',
    Blue = '\033[34m',
    Magenta = '\033[35m',
    Cyan = '\033[36m',
    White = '\033[37m'
}


function color(text: string, color: color: Colors) {
    return `${color}${text}\x1b[0m`;
}


console.log(`This is ${color('green text', Colors.Green)} but this is black. This is red ${color('red', Colors.Red)} etc`);

0赞 Rene van der Lende 3/31/2020

我看到了，谢谢！这里有一个链接，可以给你更多这样的好东西：使控制台.log（输出丰富多彩...。

4赞 Luis Lobo 7/23/2020 #19

选项 1

// log-css.js v2
const log = console.log.bind()
const css = (text, options) => {
    let cssOptions = ''
    for (let prop in options) {
        const value = options[prop]
        prop = camelCaseToDashCase(prop)
        cssOptions += `${prop}: ${value}; `
    }
    return [`%c${text}`, cssOptions.trim()]

    function camelCaseToDashCase(value) {
        return value.replace(/[A-Z]/g, matched => `-${matched.toLowerCase()}`)
    }
}

例：

log(...css('Example =P', {
    backgroundColor: 'blue',
    color: 'white',
    // fontFamily: 'Consolas',
    fontSize: '25px',
    fontWeight: '700',
    // lineHeight: '25px',
    padding: '7px 7px'
}))

选项 2

我现在创建 log-css.js https://codepen.io/luis7lobo9b/pen/QWyobwY

// log-css.js v1
const log = console.log.bind();
const css = function(item, color = '#fff', background = 'none', fontSize = '12px', fontWeight = 700, fontFamily) {
    return ['%c ' + item + ' ', 'color:' + color + ';background:' + background + ';font-size:' + fontSize + ';font-weight:' + fontWeight + (fontFamily ? ';font-family:' + fontFamily : '')];
};

例：

log(...css('Lorem ipsum dolor sit amet, consectetur adipisicing elit.', 'rebeccapurple', '#000', '14px'));

2赞 shivampip 9/15/2020 #20

我为此创建了一个包。CSLOG

使用

npm i cslog

像这样使用它

import log from 'cslog'

log.h2("This is heading 2")
log.p("This is colored paragraph")
log.d(person, "Person Info")

您也可以提供自定义颜色。这里

1赞 yu zhao 9/23/2020 #21

const coloring = fn => ({ background, color = 'white' }) => (...text) => fn(`%c${text.join('')}`, `color:${color};background:${background}`);
const colors = {
  primary: '#007bff',
  success: '#28a745',
  warning: '#ffc107',
  danger: '#dc3545',
  info: '#17a2b8',
};
const dir = (key = '', value = {}) => {
  logs.primary(`++++++++++++start:${key}++++++++++++++`);
  console.dir(value);
  logs.primary(`++++++++++++end:${key}++++++++++++++`);
};
const logs = Object.keys(colors)
  .reduce((prev, curr) => ({ ...prev, [curr]: coloring(console.log)({ background: colors[curr] }) }), { dir });
  
  logs.success('hello succes');
  logs.warning('hello fail');

17赞 Nguyễn Viết Đại 10/1/2020 #22

您可以尝试：

console.log("%cI am red %cI am green", "color: red", "color: green");

输出：

2赞 Crocsx 10/1/2020

这看起来有效，但您的图像是错误的。在这篇文章中也有像你这样的答案^^

-4赞 Nitin Manocha 10/1/2020 #23

如果你想给你的终端控制台着色，那么你可以使用 npm package chalk

npm i chalk

2赞 WrRaThY 9/2/2021

问题是关于浏览器解决方案的

41赞 Mojtaba Hosseini 10/10/2020 #24

表情符号

您可以像其他人在答案中提到的那样使用文本颜色，以获得带有背景或前景色的彩色文本。

但是你可以用表情符号来代替！例如，可用于警告消息和错误消息。⚠️🛑

或者干脆将这些笔记本用作颜色：

console.log('📕: error message');
console.log('📙: warning message');
console.log('📗: ok status message');
console.log('📘: action message');
console.log('📓: canceled status message');
console.log('📔: Or anything you like and want to recognize immediately by color');

🎁 奖金：

此方法还可以帮助您直接在源代码中快速扫描和查找日志。

_{但是一些 Linux 发行版默认的表情符号字体默认不是彩色的，您可能希望先让它们变得丰富多彩。}

如何打开表情符号面板？

Mac 操作系统： control + command + space

视窗： win + .

linux：+ 或control.control + ;

0赞 Ali 1/9/2021

你输入什么来显示这些？⚠️ 🛑 （我从你的回答中复制了它们）

1赞 Mojtaba Hosseini 1/10/2021

取决于操作系统和许多其他因素。在macOS中，表情符号和符号

2赞 Laurensius Adi 6/4/2021

在 Windows 中，您可以使用 Win + dot 键入表情符号。

0赞 Vaisakh K M 8/13/2022

如果您无法获得输入方法（例如 Linux 最小安装），只需在 Google 上搜索表情符号并从那里复制它.....

16赞 Amkhan 1/29/2021 #25

我发现您可以使用 ANSI 颜色代码制作带有颜色的日志，这样可以更轻松地在调试中查找特定消息。尝试一下：

console.log( "\u001b[1;31m Red message" );
console.log( "\u001b[1;32m Green message" );
console.log( "\u001b[1;33m Yellow message" );
console.log( "\u001b[1;34m Blue message" );
console.log( "\u001b[1;35m Purple message" );
console.log( "\u001b[1;36m Cyan message" );

3赞 George Linardis 11/8/2021

出于某种原因，在我的终端中，添加您的一个示例后，无论我是否使用相同的颜色，它都不会为该特定日志着色，而是在此之后为所有日志着色。

0赞 Sascha Klatt 1/20/2022

@Geroge Linardis：添加将结束着色，如以下帖子所示： stackoverflow.com/a/60602339/2438049 例如，可以按如下方式打印绿色消息："\x1b[0m"console.log("\u001b[1;32mGreen message\x1b[0m");

8赞 0x1ad2 6/8/2021 #26

如果你想变得现代，你也可以使用模板文字，这里是一个简单而复杂的例子;模板文字允许您使用表情符号、变量和更酷的东西 😎

简单

复杂

法典

/*
* Simple example
*/

console.log(
  `%c[line 42] | fooBar.js myFunc() -> YOU DEBUG MESSAGE HERE `,
  ` color:white; background-color:black; border-left: 1px solid yellow; padding: 4px;`
);

/*
* Complex example
*/

const path = `../this/goes/to/my/dir`;

const line = 42;

const ref = `myFunc()`;

const message = `A FANCY DEBUG MESSAGE 💎💎💎 `;

const styling = `
    color:white;
    background-color:black;
    border-left: 1px solid yellow;
    padding: 8px;
    font-weight: 600;
    font-family: Courier;
`;

console.log(
    `%c ✨ F A N C Y - L O G G E R ✨`,
    `${styling} font-size: 16px; border-top: 1px solid yellow;`
);

console.log(
    `%c  Path: ${path} `,
    `${styling} font-size: 10px; font-weight: 100;`
);

console.log(
    `%c  Line: ${line}`,
    `${styling} font-size: 10px; font-weight: 100;`
);

console.log(
    `%c  Ref: ${ref} `,
    `${styling} font-size: 10px; font-weight: 100;`
);

console.log(
  `%c  Message: ${message} `,
  `${styling} font-size: 12px; border-bottom: 1px solid yellow;`
);

28赞 Rohan Kumar Thakur 7/14/2021 #27

是的，只需在消息前添加 %c 符号，并在消息后添加样式即可。

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

如果您使用的是节点并想在终端中为控制台着色，那么您可以使用转义序列，例如

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

将控制台颜色为黄色，否则您可以使用粉笔等库来颜色控制台

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

0赞 Meera Datey 10/3/2021

问题是关于 Chrome 开发者控制台的。Chalk 无法在 Chrome 开发者控制台上运行。

2赞 Adam Eisfeld 1/26/2022 #28

这是另一种方法（在 Typescript 中），它覆盖 console.log 函数并检查传递的消息，以便根据消息中的起始标记应用 CSS 格式。这种方法的一个好处是被调用者不需要使用一些包装器控制台.log函数，他们可以坚持使用普通控制台.log，因此如果此覆盖消失，该功能将恢复到默认控制台.log：

// An example of disabling logging depending on environment:
const isLoggingEnabled = process.env.NODE_ENV !== 'production';

// Store the original logging function so we can trigger it later
const originalConsoleLog = console.log;

// Override logging to perform our own logic
console.log = (args: any) => {
    if (!isLoggingEnabled) {
        return;
    }

    // Define some tokens and their corresponding CSS
    const parsing = [
        {
            token: '[SUCCESS]',
            css: 'color: green; font-weight: bold;',
        },
        {
            token: '[ERROR]',
            css: 'color: red; font-weight: bold;',
        },
        {
            token: '[WARN]',
            css: 'color: orange; font-weight: bold;',
        },
        {
            token: '[DEBUG]',
            css: 'color: blue;',
        },
    ];

    // Currently only supports console.log(...) with a single string argument. 
    if (typeof args === 'string') {
        const message: string = args;
        let formattedArgs: string[] = [];
        for (let i = 0; i < parsing.length; i += 1) {
            const parser = parsing[i];
            if (args.startsWith(parser.token)) {
                formattedArgs = [`%c${message.substring(parser.token.length + 1, message.length)}`, parser.css];
                break;
            }
        }
        originalConsoleLog.apply(console, formattedArgs);
    } else {
        originalConsoleLog.apply(console, args);
    }
};

用法示例：

console.log('[ERROR] Something went wrong!');

输出：

0赞 Julian Knight 4/15/2022

松开调用上下文，并显示发生应用的行，而不是原始代码行

0赞 Ahmed Sayed Sk 3/10/2023

我认为这是最佳处理控制台日志记录的最佳答案。谢谢

6赞 Rohìt Jíndal 6/6/2022 #29

默认情况下，很少有内置的控制台方法来显示警告、错误和普通控制台以及特定的图标和文本颜色。

console.log('console.log');
console.warn('console.warn');
console.error('console.error');

但是，如果您仍然想应用自己的样式，则可以将消息和 CSS 样式规则用作第二个参数。%c

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

注意：在运行上述代码片段时，请在浏览器控制台中检查结果而不是代码片段结果。

1赞 Naor Yael 5/31/2023 #30

标记控制台日志的简单方法（我发现）是：

console.log("%c %s", "background-color:yellow; color: black", 'foo');

结果：

上一个：如何使用 Chrome 让 Web API ASP.NET 返回 JSON 而不是 XML？

下一个：删除 Chrome 自动完成功能的输入背景颜色？

JavaScript 控制台中的颜色

Colors in JavaScript console

评论

评论

评论

引用

评论

评论

评论

评论

评论

评论

输出：

评论

评论

评论

评论

评论

评论

表情符号

🎁 奖金：

如何打开表情符号面板？

评论

评论

评论

评论