JavaScript控制台中的颜色

Question

Chrome内置的JavaScript控制台能够显示颜色吗？

我希望错误消息以红色显示，警告消息以橙色显示，而console.log中的消息以绿色显示。这可能吗？

- Randomblue

---

只需使用console.error()代替console.log，即可在红色（默认）中获得错误提示。请注意，此操作仅为翻译，不包含任何解释或其他信息。 - nrabinowitz

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

在Chrome浏览器中，特别是在滚动控制台时，console.log("%c", "background: red;padding: 100000px;");会导致非常奇怪的行为。 - user6560716

在控制台中显示颜色的最简单的方法是： - Suhaib Janjua

我写了一个用于给日志着色的小型软件包：console colors。 - vsync

Answer 1

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

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

同样的方法也可以应用于将多个CSS添加到同一个命令中。

参考资料

• MDN：样式化控制台输出
• Chrome：控制台API参考
• WebKit：控制台对象API

- christianvuerings

---

显然，Firebug长期支持此功能。 - josh3736

使用 HTML span 元素来为控制台输出消息的不同部分添加样式，请参考以下代码：http://jsfiddle.net/yg6hk/5/ - Hans

为什么仅限于给文本上色？让我们也在控制台中添加一些图片吧：console.log('%c', 'padding:28px 119px;line-height:100px;background:url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6) no-repeat;'); - Derek 朕會功夫

这是最佳的样式代码：background: #444; color: #bada55; padding: 2px; border-radius:2px，它与圆角边框有关。 - Nick Sotiros

如何仅对单个单词进行 CSS 样式设置？ 更新: 在单词后面传递空字符串 CSS。 - Nakilon

Answer 2

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

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');

- bartburkhardt

---

遗憾的是，这段文本在我的电脑上或最近的Chrome浏览器中看起来并不完全像你的示例。 - Asqan

在我的控制台中，当一行文本超出了其高度时，它会被剪裁。 （Chrome 69，WIN7） - vsync

只需编写足够长的文本以使控制台自动换行即可，您会看到的。 :D - Vikrant

L.M.A.O 这变得越来越疯狂了！！ - Mohd Abdul Mujib

为了给它更多的空间，将其视为“div”，并修改第二行为： console.log("%cExample %s", "padding: 0 64px 44px 0; " + css, 'all code runs happy'); 整个“图片”的大小约为400像素，要查看全部内容，请将“44px”更改为“400px” :) - ellockie

Answer 3

您可以使用自定义样式表来为调试器着色。您可以将此代码放入%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;
}

- Dennis

---

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

在 Mac OS X 上，Custom.css 文件位于 ~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/ 目录下。请注意，这里的斜杠需要转义。 - Lance

Windows 7系统中Chrome的用户样式表所在位置为 C:\Users\<用户名>\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\。此外，还有一个适用于该位置的Solarized Color Scheme Stylesheet。 - Weston C

我想要为整行添加样式，而不仅是文本，因此我移除了 .console-message-text 类。同时，我发现最适合作为背景颜色的分别是 #ffece6 用于错误，#fafad2 用于警告，以及 #f0f9ff 用于正常情况。 - Matthew Clark

请注意，此样式表适用于您在Chrome中访问的所有页面，因此如果您删除一个类以减少特异性，则可能会发现某个网站在消息弹出窗口或类似内容上使用了您的样式。 - Charlie Schliesser

自定义用户样式表（Custom.css）在OSX上已经无法使用（https://codereview.chromium.org/66383005/）。 - Kim

Answer 4

旧版本的Chrome不允许您通过编程方式以特定颜色显示console.log()，但调用console.error()会在错误行上放置一个红色的X图标并使文本变为红色，而console.warn()则会获得黄色的！图标。

接下来可以使用控制台下方的所有、错误、警告和日志按钮来过滤控制台条目。

---

事实证明，自2010年起Firebug已经支持对console.log应用自定义CSS了，而Chrome支持已从Chrome 24开始添加。

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

当第一个参数中出现%c时，下一个参数被用作CSS样式来设置控制台显示行的样式。其他参数将被连接在一起（一直以来都是这样）。

- josh3736

---

它必须是第一个参数吗？这段代码不起作用... 返回 console.log("%s", message, "%c%s", "color:#BBBBBB", get_type(message)); - Michael Minter

当第一个参数中出现"%c"时，下一个参数将用作CSS样式来给控制台输出的行进行样式设置。更正为："当任何参数中出现"%c"时，下一个参数将用作CSS样式来给跟在"%c"后面的控制台输出行进行样式设置。例如：http://i.imgur.com/msfPNbK.png" - ChrisJJ

Answer 5

我编写了 template-colors-web https://github.com/icodeforlove/Console.js，以让我们更轻松地实现这一点。

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

使用默认的console.log方法来完成上述操作非常困难。

如需进行实时交互演示，请单击此处。

- Chad Cache

---

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

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

尽管没有“inline”着色，仍然可以做像var txt =“asd”; txt.red或\${txt}`.red + `${txt}`.green这样的事情。我不知道用%c`语法来实现这一点的方法，其他人正在推荐。所以感谢您构建这个库。 - max pleaner

你如何检测浏览器对此功能的支持？我查看了你的库代码，但没有发现它。 - Muhammad Rehan Saeed

浏览器检测 - Chad Cache

Answer 6

其实我只是好奇尝试了一下，发现可以使用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

基本上，可以在需要改变颜色的地方使用\x1b或\x1B代替\e。例如：\x1b[31m之后的所有文本都将被切换到新的颜色。

虽然我没有在其他浏览器中尝试过，但我认为这值得一提。

- James Heazlewood

---

这很棒，但似乎只适用于Chrome/Chromium。我在Firefox 65中测试了一下，它不起作用。 - btwiuse

是的，Firefox 也会警告您不要将内容粘贴到控制台中。对于 Firefox，您需要使用 %c 和样式。 - James Heazlewood

为什么这种着色只在第一个参数中起作用？也就是说，下面这个不会起作用：console.log('\x1b[36m Hello', '\x1b[34m Colored', '\x1b[35m World!'); - Qwerty

Answer 7

更新：

去年我为自己编写了一个 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或info关键字以获得期望的结果。

这是工作的JSFiddle。请在浏览器控制台中查看输出。

- Suhaib Janjua

---

我心中想的实现方式更像是 log.info("this would be green") 等等。差不多就这样了。 - Kyle Baker

很酷，但请考虑在此情况下使用标准的console.error()、console.warn()和console.info()方法更好，因为它还：

1. 提供了我们在这里丢失的语义，允许按严重程度过滤掉信息。
2. 使用最适合用户配置（例如黑暗模式或高对比度模式下的浏览器）的颜色。

- Paweł Bulwan

console.info() 和 console.log() 显示相同的标准日志，只通过输出无法区分。但是 console.warn() 和 console.error() 可以用于稍后过滤消息。正如 OP 所问：如何在控制台中打印彩色日志。我认为最好根据 OP 提出的问题来回答。我们不是在过滤消息，而是专注于打印彩色日志。我真的很感谢您的建议，示例也可以进一步改进以满足您的要求。 - Suhaib Janjua

@SuhaibJanjua 如何在保留检查器中的良好行号引用的情况下完成此操作？ - LexaGC

Answer 8

Emoji

You can use emojis instead of colors for text to have more visual and interesting messages. For example, you can use ⚠️ for warning messages and for error messages.

You could also use these emojis as a replacement for colors:

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 os: control + command + space

windows: win + .

linux: control + . 或者 control + ;

- Mojtaba Hosseini

---

你要输入什么来显示这些内容？⚠️（我从您的回答中复制了它们） - Ali Al Amine

取决于操作系统和许多其他因素。在macOS中，Emoji＆Symbols - Mojtaba Hosseini

在Windows中，您可以使用Win +句点键来输入表情符号。 - Laurensius Adi

如果你无法找到一种输入方式（例如：Linux最小安装），可以在Google上搜索表情符号并从中复制... - Vaisakh K M

Answer 9

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');

- mostafa.mortazavi

---

或者使用 console.log(color.red+' this is red color on text');，因为已经赋值了colors.red。 - vusan

在Chrome和Safari上没有任何作用。 - mauron85

@mauron85 这并不是答案，但它是针对 Node.js 的。 - Gustavo Rodrigues

是的，我有一瞬间感到困惑，但同时也半佩服Chrome支持转义序列。 - i336_

@i336_ - 它可以工作（我这里用的是Chrome 69）。你可以恢复之前的半感动状态;) - vsync

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

Answer 10

有一系列内置函数可以为控制台日志添加颜色：

//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')

- Sandeep Gantait

---

似乎console.info()不再添加信息图标了，不确定是什么时候发生的。至少在Chrome和Firefox浏览器上，现在它与console.log()相同。 - Brad Kent

多年前，console.info()输出的行曾经是蓝色的。然后有一天，它被移除了。今天，它使用默认的黑色。它不再具有内置的着色功能。 - Clomp

请注意，样式也可以添加到警告和错误：%cconsole.error（“％c蓝色”，“颜色：蓝色”） - Frazer Kirkman