blocks|key|558667|text|您可以使用自定义样式表为调试器着色。如果您使用的是WinXP，则可以将此代码放在C:\Documents+and+Settings\<User+Name>\Local+Settings\Application+Data\Google\Chrome\User+Data\Default\User+StyleSheets\Custom.css中，但目录因操作系统而异。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|558668|.console-error-level+.console-message-text{
++++color:+red;
}

.console-warning-level+.console-message-text+{
++++color:+orange;
}

.console-log-level+.console-message-text+{
++++color:green;
}|code-block|syntax|javascript|558669|entityMap^0|14|3L|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

You can use a custom stylesheet to color your debugger. You can put this code in <code>C:\Documents and Settings\&lt;User Name&gt;\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css</code> if you are in WinXP, but the directory varies by OS.

<pre><code>.console-error-level .console-message-text{
 color: red;
}

.console-warning-level .console-message-text {
 color: orange;
}

.console-log-level .console-message-text {
 color:green;
}
</code></pre>

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

console.log("%25cExample+%25s",+css,+'all+code+runs+happy');|code-block|syntax|javascript|558785|558786|558787|📷|atomic|offset|length|558788|558789|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/5dd24d6fd26ac1a0bb10f7f2ca5f05e9.jpeg|imageAlt^0|0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|14|8|@]|9|@$N|15|O|16|1|17]]|A|$]]|$1|P|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X|Y|-4]]]]

Here is an extreme example with rainbow drop shadow.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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');</code></pre>
</div>
</div>


<img src="https://i.stack.imgur.com/q9nSf.jpg" alt="enter image description here">

blocks|key|775360|text|控制台日志有一系列用于着色的内置函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|775361|//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('%25cHello+World','color:blue');
//here+blue+could+be+replaced+by+any+color+code

//for+custom+colored+text+with+custom+background+text
console.log('%25cHello+World','background:red;color:#fff')|code-block|syntax|javascript|775362|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

There are a series of inbuilt functions for coloring the console log:

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

blocks|key|558899|text|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');|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|558900|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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');
</code></pre>

blocks|key|775495|text|模板系统，如果您想要创建彩色线条文本，而不是为每个块创建完整样式，则非常有用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|775496|var+tpl+=+'background-color:greenyellow;+border:3px+solid+orange;+font-size:18px;+font-weight:+bold;padding:3px+5px;color:';
console.log('%25cNo+#1'+%2B+'.%25cRed+Text'+%2B+'%25cBlue+Text',+
+++++++++++++tpl%2B'magenta',+tpl%2B'red',+tpl%2B'blue');|code-block|syntax|javascript|775497|​|775498|📷|atomic|offset|length|775499|775500|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/d119682ec29197325f3e6d26ca2282a4.jpeg|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

template system, useful if you want to create colorful line text without creating full style for every block

<pre><code>var tpl = 'background-color:greenyellow; border:3px solid orange; font-size:18px; font-weight: bold;padding:3px 5px;color:';
console.log('%cNo #1' + '.%cRed Text' + '%cBlue Text', 
 tpl+'magenta', tpl+'red', tpl+'blue');
</code></pre>

<a href="https://i.stack.imgur.com/4fvl1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4fvl1.jpg" alt="colorful console log"></a>

blocks|key|559054|text|看看这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|559055|控制台中的动画，加上CSS|559056|(function()+{
++var+frame+=+0;
++var+frames+=+[
++++"This",
++++"is",
++++"SPARTA!",
++++"+",
++++"SPARTA!",
++++"+",
++++"SPARTA!",
++++"+",
++++"SPARTA!",
++++"+",
++++"SPARTA!",
++++"+",
++++"SPARTA!"
++];
++var+showNext+=+()+=>+{
++++console.clear();
++++console.log(
++++++`%25c+`,
++++++"background:+red;+color:+white;+font-size:+15px;+padding:+3px+41%25;"
++++);
++++console.log(
++++++`%25c+${frames[frame]}`,
++++++"background:+red;+color:+white;+font-size:+25px;+padding:+3px+40%25;"
++++);
++++console.log(
++++++`%25c+`,
++++++"background:+red;+color:+white;+font-size:+15px;+padding:+3px+41%25;"
++++);
++++setTimeout(
++++++showNext,
++++++frames[frame]+===+"SPARTA!"+%7C%7C+frames[frame]+===+"+"+?+100+:+1500
++++);
++++//+next+frame+and+loop
++++frame%2B%2B;
++++if+(frame+>=+frames.length)+{
++++++frame+=+0;
++++}
++};
++showNext();
})();|code-block|syntax|javascript|559057|https://jsfiddle.net/a8y3jhfL/|offset|length|559058|您可以在每一帧中粘贴ASCII以观看ASCII动画|559059|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|U|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Y|8|@]|9|@$K|Z|L|10|1|11]]|A|$]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|J]]]]

Check this out:

Animation in console, plus CSS

<pre><code>(function() {
 var frame = 0;
 var frames = [
 "This",
 "is",
 "SPARTA!",
 " ",
 "SPARTA!",
 " ",
 "SPARTA!",
 " ",
 "SPARTA!",
 " ",
 "SPARTA!",
 " ",
 "SPARTA!"
 ];
 var showNext = () =&gt; {
 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 &gt;= frames.length) {
 frame = 0;
 }
 };
 showNext();
})();
</code></pre>

<a href="https://jsfiddle.net/a8y3jhfL/" rel="noreferrer">https://jsfiddle.net/a8y3jhfL/</a>

you can paste ASCII in each frame to watch an ASCII animation

blocks|key|559204|text|我最近想解决一个类似的问题，并构造了一个小函数，只给我关心的关键字上色，这些关键字很容易通过花括号{keyword}识别出来。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|559205|这就像一个护身符：|559206|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+(/%5E\{/.test(split))+{
++++++++cssRules.push('color:blue');
++++}+else+{
++++++++cssRules.push('color:inherit')
++++}
++++styledText+%2B=+`%25c${split}+`
});
console.log(styledText+,+...cssRules)|code-block|syntax|javascript|559207|​|559208|📷|atomic|559209|559210|从技术上讲，您可以将if语句替换为switch/case语句，以允许出于不同原因使用多种样式|559211|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/19500aace19348b209b8a5e2ea60fb51.png|imageAlt^0|1D|9|0|0|0|0|0|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|19|8|@]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|R|3|N|5|6|7|1D|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1E|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11|12|-4]]]]

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 <code>{keyword}</code>.

This worked like a charm:

<pre><code>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) =&gt; {
 if (/^\{/.test(split)) {
 cssRules.push('color:blue');
 } else {
 cssRules.push('color:inherit')
 }
 styledText += `%c${split} `
});
console.log(styledText , ...cssRules)
</code></pre>

<a href="https://i.stack.imgur.com/M96j1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M96j1.png" alt="enter image description here"></a>

technically you could swap out the if statement with a switch/case statement to allow multiple stylings for different reasons

blocks|key|559371|text|实际上，我只是偶然发现了这一点，想知道会发生什么，但实际上你可以使用bash着色标志来设置Chrome中输出的颜色：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|559372|console.log('\x1b[36m+Hello+\x1b[34m+Colored+\x1b[35m+World!');
console.log('\x1B[31mHello\x1B[34m+World');
console.log('\x1b[43mHighlighted');|code-block|syntax|javascript|559373|输出：|559374|​|559375|📷|atomic|offset|length|559376|559377|559378|559379|559380|有关颜色标志的工作原理，请参阅此链接：https://misc.flogisoft.com/bash/tip_colors_and_formatting|559381|基本上用\x1b或\x1B代替\e。例如：\x1b[31m和之后的所有文本都将切换为新颜色。|style|CODE|559382|虽然我没有在任何其他浏览器中尝试过，但我认为它值得一提。|559383|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/195cb6822961a49a892aade8d63e188a.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/07fc202742bcee5a6ae1ee0e99e7724a.png|2|LINK|MUTABLE|url|https://misc.flogisoft.com/bash/tip_colors_and_formatting^0|0|0|0|0|0|1|0|0|0|0|0|1|1|0|0|J|1L|2|0|4|4|9|4|F|2|L|8|0|0^^$0|@$1|2|3|4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1I|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1J|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1K|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|1L|8|@]|9|@$N|1M|O|1N|1|1O]]|A|$]]|$1|P|3|J|5|6|7|1P|8|@]|9|@]|A|$]]|$1|Q|3|J|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|R|3|L|5|M|7|1R|8|@]|9|@$N|1S|O|1T|1|1U]]|A|$]]|$1|S|3|J|5|6|7|1V|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1W|8|@]|9|@$N|1X|O|1Y|1|1Z]]|A|$]]|$1|V|3|W|5|6|7|20|8|@$N|21|O|22|X|Y]|$N|23|O|24|X|Y]|$N|25|O|26|X|Y]|$N|27|O|28|X|Y]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|29|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|2A|8|@]|9|@]|A|$]]]|12|$13|$5|14|15|16|A|$17|18|19|-4]]|1A|$5|14|15|16|A|$17|1B|19|-4]]|1C|$5|1D|15|1E|A|$1F|1G]]]]

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:

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

Output:

<a href="https://i.stack.imgur.com/7R5C9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7R5C9.png" alt="Hello World red and blue"></a>

<a href="https://i.stack.imgur.com/Mg29a.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Mg29a.png" alt="enter image description here"></a>

See this link for how colour flags work: <a href="https://misc.flogisoft.com/bash/tip_colors_and_formatting" rel="noreferrer">https://misc.flogisoft.com/bash/tip_colors_and_formatting</a>

Basically use the <code>\x1b</code> or <code>\x1B</code> in place of <code>\e</code>. eg. <code>\x1b[31m</code> and 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.

blocks|key|775891|text|我怀疑没有人会真的看到它，但我有一个简单的解决方案，对于那些想要在同一行中混合几种颜色的人：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|775892|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`);|code-block|syntax|javascript|775893|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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:

<pre><code>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`);
</code></pre>

blocks|key|559484|text|我现在创建了https://codepen.io/luis7lobo9b/pen/QWyobwY+-css.js日志|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|559485|//+log-css.js+v1
const+log+=+console.log.bind();
const+css+=+function(item,+color+=+'#fff',+background+=+'none',+fontSize+=+'12px',+fontWeight+=+700,+fontFamily)+{
++++return+['%25c+'+%2B+item+%2B+'+',+'color:'+%2B+color+%2B+';background:'+%2B+background+%2B+';font-size:'+%2B+fontSize+%2B+';font-weight:'+%2B+fontWeight+%2B+(fontFamily+?+';font-family:'+%2B+fontFamily+:+'')];
};
//+example
log(...css('Lorem+ipsum+dolor+sit+amet,+consectetur+adipisicing+elit.',+'rebeccapurple',+'#000',+'14px'));|code-block|syntax|javascript|559486|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/luis7lobo9b/pen/QWyobwY^0|6|16|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

I create now the log-css.js
<a href="https://codepen.io/luis7lobo9b/pen/QWyobwY" rel="nofollow noreferrer">https://codepen.io/luis7lobo9b/pen/QWyobwY</a>
<pre><code>// 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 : '')];
};
// example
log(...css('Lorem ipsum dolor sit amet, consectetur adipisicing elit.', 'rebeccapurple', '#000', '14px'));
</code></pre>

blocks|key|559503|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|559504|const+coloring+=+fn+=>+({+background,+color+=+'white'+})+=>+(...text)+=>+fn(`%25c${text.join('')}`,+`color:${color};background:${background}`);
const+colors+=+{
++primary:+'#007bff',
++success:+'#28a745',
++warning:+'#ffc107',
++danger:+'#dc3545',
++info:+'#17a2b8',
};
const+dir+=+(key+=+'',+value+=+{})+=>+{
++logs.primary(`%2B%2B%2B%2B%2B%2B%2B%2B%2B%2B%2B%2Bstart:${key}%2B%2B%2B%2B%2B%2B%2B%2B%2B%2B%2B%2B%2B%2B`);
++console.dir(value);
++logs.primary(`%2B%2B%2B%2B%2B%2B%2B%2B%2B%2B%2B%2Bend:${key}%2B%2B%2B%2B%2B%2B%2B%2B%2B%2B%2B%2B%2B%2B`);
};
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');|code-block|syntax|javascript|559505|559506|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const coloring = fn =&gt; ({ background, color = 'white' }) =&gt; (...text) =&gt; fn(`%c${text.join('')}`, `color:${color};background:${background}`);
const colors = {
 primary: '#007bff',
 success: '#28a745',
 warning: '#ffc107',
 danger: '#dc3545',
 info: '#17a2b8',
};
const dir = (key = '', value = {}) =&gt; {
 logs.primary(`++++++++++++start:${key}++++++++++++++`);
 console.dir(value);
 logs.primary(`++++++++++++end:${key}++++++++++++++`);
};
const logs = Object.keys(colors)
 .reduce((prev, curr) =&gt; ({ ...prev, [curr]: coloring(console.log)({ background: colors[curr] }) }), { dir });
 
 logs.success('hello succes');
 logs.warning('hello fail');</code></pre>
</div>
</div>

blocks|key|559594|text|您可以尝试console.log("%25cI+am+red+%25cI+am+green"，"color:+red"，"color:绿色“)；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|559595|📷|atomic|offset|length|559596|​|559597|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/8105b52d7b933320460c430507b3b2df.png|imageAlt^0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@$E|T|F|U|1|V]]|A|$]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P|Q|-4]]]]

You can try console.log(&quot;%cI am red %cI am green&quot;, &quot;color: red&quot;, &quot;color: green&quot;);
<a href="https://i.stack.imgur.com/a5MPr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a5MPr.png" alt="enter image description here" /></a>

blocks|key|776107|text|如果您想给终端控制台着色，那么可以使用npm+package+chalk|type|unstyled|depth|inlineStyleRanges|entityRanges|data|776108|npm+i+chalk|code-block|syntax|javascript|776109|​|776110|📷|atomic|offset|length|776111|776112|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/33453a2d2e5efdedec81f6e8ad13e621.png|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

If you want to color your terminal console, then you can use npm package chalk
<pre><code>npm i chalk
</code></pre>
<a href="https://i.stack.imgur.com/jZDYc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jZDYc.png" alt="enter image description here" /></a>

blocks|key|559744|text|我发现您可以使用ANSI颜色代码制作带有颜色的日志，这使得在调试中更容易找到特定的消息。试试看：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|559745|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"+);|code-block|syntax|javascript|559746|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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:
<pre><code>console.log( &quot;\u001b[1;31m Red message&quot; );
console.log( &quot;\u001b[1;32m Green message&quot; );
console.log( &quot;\u001b[1;33m Yellow message&quot; );
console.log( &quot;\u001b[1;34m Blue message&quot; );
console.log( &quot;\u001b[1;35m Purple message&quot; );
console.log( &quot;\u001b[1;36m Cyan message&quot; );
</code></pre>

blocks|key|776223|text|可以，只需在消息前添加%25c符号以及消息后面的样式即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|776224|console.log('%25c+Hello+World','color:red;border:1px+solid+dodgerblue');|code-block|syntax|javascript|776225|如果您正在使用node，并希望在终端中对控制台进行着色，则可以使用转义序列，如|776226|console.log('\x1b[33m%25s\x1b[0m',+'hi!')+|776227|将颜色控制台设置为黄色，否则您可以使用像粉笔这样的库来设置颜色控制台|776228|const+chalk+=+require('chalk')+
console.log(chalk.yellow('hi!'))+|776229|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Yes just add %c sign before your message and the style followed by your message.
<pre><code>console.log('%c Hello World','color:red;border:1px solid dodgerblue');
</code></pre>
If you are using node and want to color console in terminal then you can use escape sequences like
<pre><code>console.log('\x1b[33m%s\x1b[0m', 'hi!') 
</code></pre>
will color console yellow, else you can use libraries like chalk to color console
<pre><code>const chalk = require('chalk') 
console.log(chalk.yellow('hi!')) 
</code></pre>

blocks|key|776467|text|这是另一种方法(在Typescript中)，它覆盖console.log函数并检查传递的消息，以便根据消息中的开始标记应用CSS格式。这种方法的一个好处是被调用者不需要使用一些包装器console.log函数，他们可以坚持使用普通的console.log()，所以如果这个覆盖消失了，功能就会恢复到默认的console.log：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|776468|//+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+%2B=+1)+{
++++++++++++const+parser+=+parsing[i];
++++++++++++if+(args.startsWith(parser.token))+{
++++++++++++++++formattedArgs+=+[`%25c${message.substring(parser.token.length+%2B+1,+message.length)}`,+parser.css];
++++++++++++++++break;
++++++++++++}
++++++++}
++++++++originalConsoleLog.apply(console,+formattedArgs);
++++}+else+{
++++++++originalConsoleLog.apply(console,+args);
++++}
};|code-block|syntax|javascript|776469|示例用法：|776470|console.log('[ERROR]+Something+went+wrong!');|776471|输出：|776472|​|776473|📷|atomic|offset|length|776474|776475|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/0cafb29bb9ede6e45eaac38bde2c54b3.png|imageAlt^0|0|0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|15|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|17|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|19|8|@]|9|@$R|1A|S|1B|1|1C]]|A|$]]|$1|T|3|N|5|6|7|1D|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11|12|-4]]]]

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:
<pre><code>// 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) =&gt; {
 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 &lt; 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);
 }
};
</code></pre>
Example usage:
<pre><code>console.log('[ERROR] Something went wrong!');
</code></pre>
Output:
<a href="https://i.stack.imgur.com/iMFP9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iMFP9.png" alt="Output Of Log" /></a>

blocks|key|560183|text|这是一个很好的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|560184|function+superLog()+{
++str+=+''
++css+=+'background:+black;+color:+yellow;+font-size:20px'
++for+(let+i+=+0;+i+<+arguments.length;+i%2B%2B)+{
++++str+%2B=+`${+arguments[i]+}+\n`
+++}
++console.log(`%25c+${+str+}`,+css)
}|code-block|syntax|javascript|560185|此函数可以使用任意数量的参数进行记录|560186|用法：|560187|superLog(“%25s”)|560188|superLog('s'，123)|560189|superLog('s'，123，'asw')|560190|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

This is a good solution
<pre><code>function superLog() {
 str = ''
 css = 'background: black; color: yellow; font-size:20px'
 for (let i = 0; i &lt; arguments.length; i++) {
 str += `${ arguments[i] } \n`
 }
 console.log(`%c ${ str }`, css)
}
</code></pre>
This function can log with any number of arguments
Usage: 
superLog('s') 
superLog('s', 123) 
superLog('s', 123, 'asw')

Can Chrome's built-in JavaScript console display colors?

I want errors in red, warnings in orange and <code>console.log</code>'s in green. Is that possible?

Colors in JavaScript console

调试器

Chrome内置的JavaScript控制台可以显示颜色吗？我希望错误是红色的，警告是橙色的，console.log的是绿色的。可以吗？

问JavaScript控制台中的颜色
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript控制台中的颜色EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript控制台中的颜色
EN