Kolory w konsoli JavaScript

879

Czy wbudowana konsola JavaScript w Chrome może wyświetlać kolory?

Chcę błędów na czerwono, ostrzeżeń na pomarańczowo i console.logna zielono. Czy to jest możliwe?

javascript google-chrome console google-chrome-devtools Randomblue
źródło

44

Możesz dostać błędy na czerwono (domyślnie) po prostu używając console.error()zamiast console.log...

nrabinowitz

16

console.warn()jest również dostępna z pomarańczową ikoną „ostrzeżenia”, chociaż sam tekst jest nadal czarny.

Charlie Schliesser

3

console.log("%c", "background: red;padding: 100000px;");spowoduje bardzo dziwne zachowanie w Chrome, szczególnie podczas przewijania konsoli.

programista

1

Łatwy / Najprościej zrobić to pokazać kolory w konsoli

Suhaib Janjua

1

Napisałem mały pakiet do kolorowania dzienników: kolory konsoli

vsync

1390

W Chrome i Firefox (+31) możesz dodawać CSS w console.logwiadomościach:

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

Rozwiń fragment kodu

Przykładowy kolor konsoli w Chrome

To samo można zastosować do dodawania wielu CSS do tego samego polecenia. Źródło dla Google Chrome: Prezentacja Paula Irisha i zmiana Webkita
Źródło dla Firefox: Firefox Web Console - Wiadomości o stylizacji

Dokumentacja interfejsu API konsoli Chrome: Dokumentacja interfejsu API konsoli

christianvuerings
źródło

20

Najwyraźniej Firebug wspierał to przez długi czas .

josh3736,

11

Aby użyć elementów span HTML do stylizowania różnych części wiadomości console.log, sprawdź ten kod: jsfiddle.net/yg6hk/5

Hans

22

Po co zatrzymywać się na kolorowaniu tekstu? Dodajmy też kilka zdjęć do konsoli:

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

Derek 朕會功夫

2

tak jest najlepiej: background: #444; color: #bada55; padding: 2px; border-radius:2pxchodzi o promień graniczny

Nick Sotiros

8

# bada55 rzeczywiście.

Kyle Hotchkiss

571

Oto ekstremalny przykład z tęczowym cieniem.

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

Rozwiń fragment kodu

wprowadź opis zdjęcia tutaj

Bartburkhardt
źródło

Jak wykrywasz obsługę tej funkcji w przeglądarce? stackoverflow.com/questions/40428239/…

Muhammad Rehan Saeed

smutne jest to, że tekst jakoś nie wygląda dokładnie tak, jak twój przykład (dla mnie lub w ostatnich chromach, idk)

Asqan

3

na mojej konsoli zostaje przycięty po przepełnieniu wysokości linii ( Chrome 69, WIN7)

vsync,

1

@Asqan Wystarczy napisać wystarczająco duży tekst, aby konsola mogła go owinąć, a zobaczysz. : D

Vikrant

94

Możesz użyć niestandardowego arkusza stylów, aby pokolorować swój debugger. Możesz umieścić ten kod, C:\Documents and Settings\<User Name>\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.cssjeśli jesteś w WinXP, ale katalog różni się w zależności od systemu operacyjnego.

.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
źródło

14

w systemie Ubuntu 10.10 arkusz stylów znajduje się w~/.config/google-chrome/Default/User\ StyleSheets/Custom.css

ciju

12

w systemie Mac OS X jest to ~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css.

Lance Pollard

4

Lokalizacja systemu Windows 7 wygląda na `C: \ Users \ <Nazwa użytkownika> \ AppData \ Local \ Google \ Chrome \ User Data \ Default \ User StyleSheets`. Jest też arkusz stylów z koloryzacją kolorów .

Weston C,

1

Chciałem nadać styl całej linii, a nie tylko tekstowi, więc usunąłem .console-message-textklasę. Również najbardziej przyjemne kolory tła, jakie znalazłem, dotyczyły #ffece6błędów, #fafad2ostrzeżeń i #f0f9ffnormalnych.

Matthew Clark,

2

Pamiętaj, że ten arkusz stylów dotyczy wszystkich stron, które odwiedzasz w Chrome, więc jeśli usuniesz klasę w celu zmniejszenia szczegółowości, możesz znaleźć witrynę internetową, używając swoich stylów w wyskakującym oknie wiadomości lub coś w tym stylu.

Charlie Schliesser

57

Starsze wersje Chrome nie pozwalają console.log()programowo wyświetlać s w określonym kolorze, ale wywołanie console.error()umieści czerwoną Xikonę na liniach błędów i sprawi, że tekst będzie czerwony, a ikona console.warn()żółta !.

Następnie można filtrować wpisy konsoli za pomocą przycisków Wszystkie, Błędy, Ostrzeżenia i Dzienniki pod konsolą.

Okazuje się, że Firebug obsługuje niestandardowe CSS dla console.logs od 2010 roku, a obsługa Chrome została dodana od Chrome 24.

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

Kiedy %cpojawia się gdziekolwiek w pierwszym argumencie , następny argument jest używany jako CSS do stylowania linii konsoli. Dalsze argumenty są łączone (jak zawsze tak było).

josh3736
źródło

2

Czy to musi być pierwszy argument? Ten kod nie zadziała ... zwróć console.log ("% s", komunikat, "% c% s", "kolor: #BBBBBB", get_type (komunikat));

Michael Minter,

2

„Gdy% c pojawia się w dowolnym miejscu pierwszego argumentu, następny argument jest używany jako CSS do stylowania linii konsoli.„ Korekta ”Kiedy% c pojawia się gdziekolwiek w dowolnym argumencie, następny argument jest używany jako CSS do stylowania linii konsoli wyjście po% ceg i.imgur.com/msfPNbK.png

ChrisJJ,

49

Napisałem szablon-kolory-www https://github.com/icodeforlove/Console.js, aby pozwolić nam to zrobić trochę łatwiej

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

Powyższe byłoby niezwykle trudne w przypadku domyślnego pliku console.log .

Aby obejrzeć interaktywną prezentację na żywo, kliknij tutaj .

Chad Scira
źródło

2

W przeciwieństwie do większości innych rozwiązań, pozwala to również na kolorowanie zmiennych zawierających ciąg znaków.

max pleaner

2

W rzeczywistości nie jest to obsługiwane, na przykład nie możesz tego zrobić, console.log(`this is inline ${'red'.red.bold} and this is more text`.grey)stylizacja zatrzyma się po pierwszym stylu

Chad Scira

2

Mimo że nie ma kolorowania „w linii”, nadal można robić takie rzeczy jak var txt = "asd"; txt.redlub `${txt}`.red + `${txt}`.green. Nie wiem, jak to zrobić, korzystając ze %cskładni zalecanej przez innych. Dzięki za zbudowanie biblioteki

max pleaner

1

Jak wykrywasz obsługę tej funkcji w przeglądarce, spojrzałem na kod twojej biblioteki i nie mogłem go wykryć? stackoverflow.com/questions/40428239/…

Muhammad Rehan Saeed

1

@MuhammadRehanSaeed Wykrywanie przeglądarki

Chad Scira

32

Aktualizacja:

W zeszłym roku napisałem bibliotekę JavaScript. Zawiera inne funkcje, np. Gadatliwość dzienników debugowania, a także zapewnia metodę pobierania dzienników, która eksportuje plik dziennika. Zajrzyj do biblioteki JS Logger i jej dokumentacji.

Wiem, że jest trochę za późno na odpowiedź, ale OP poprosił o niestandardowe kolorowe komunikaty w konsoli dla różnych opcji. Każdy przekazuje właściwość stylu koloru w każdej console.log()instrukcji, która dezorientuje czytelnika, powodując złożoność kodu, a także szkodząc ogólnemu wyglądowi i stylowi kodu.

Sugeruję napisanie funkcji z kilkoma wcześniej określonymi kolorami (np. Sukces, błąd, informacja, ostrzeżenie, kolory domyślne), które zostaną zastosowane na podstawie parametru przekazanego do funkcji.

Poprawia to czytelność i zmniejsza złożoność kodu. Jest zbyt łatwy w utrzymaniu i rozszerzany zgodnie z Twoimi potrzebami.

Poniżej podano funkcję JavaScript, którą musisz napisać raz, a następnie używać jej wielokrotnie.

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

Wynik:

Domyślnym kolorem jest czarny i nie musisz w tym przypadku podawać parametru jako słowa kluczowego. W innych przypadkach należy przekazać success, error, warning, or infosłowa kluczowe w celu uzyskania pożądanych wyników.

Tutaj działa JSFiddle . Zobacz dane wyjściowe w konsoli przeglądarki.

Suhaib Janjua
źródło

Miałem na myśli implementację, która była więcej log.info("this would be green"), itp. Wystarczająco blisko.

Kyle Baker

Fajnie, ale weź pod uwagę, że standardowe podejście z console.error (), console.warn (), console.info () wydaje się lepsze w tym scenariuszu, ponieważ również 1) zapewnia semantykę, którą tracimy tutaj, co pozwala filtrować wiadomości według ważności w konsoli 2) użyj kolorów, które najlepiej pasują do konfiguracji użytkownika, np. przeglądarka w trybie ciemnym lub trybie wysokiego kontrastu

Paweł Bulwan

console.info () i console.log () pokazuje ten sam standardowy dziennik i nie można odróżnić, patrząc tylko na wynik. Ale tak, console.warn () i console.error () mogą być później użyte do filtrowania wiadomości. Jak poprosił PO; jak wydrukować kolorowe logi w konsoli. Myślę, że odpowiedź jest najlepsza zgodnie z pytaniem zadanym przez PO. Nie filtrujemy wiadomości, ale skupiamy się na drukowaniu dzienników kolorów. Naprawdę doceniam twoją sugestię, a przykład można dodatkowo ulepszyć, aby spełnić również Twoje wymagania.

Suhaib Janjua

@ SuhaibJanjua Jak to zrobić, ale zachowując dobry numer referencyjny wiersza od inspektora?

LexaGC

25

Właśnie przypadkiem odkryłem, że jestem ciekawy, co się stanie, ale możesz tak naprawdę użyć flag barwiących bash, aby ustawić kolor wydruku w Chrome:

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

Wynik:

Zobacz ten link, aby zobaczyć, jak działają kolorowe flagi: https://misc.flogisoft.com/bash/tip_colors_and_formatting

Zasadniczo użyj \x1blub \x1Bzamiast \e. na przykład. \x1b[31ma następnie cały tekst zostanie przełączony na nowy kolor.

Nie próbowałem tego jednak w żadnej innej przeglądarce, ale uznałem, że warto o tym wspomnieć.

James Heazlewood
źródło

3

To jest fajne, ale wydaje się być specyficzne dla chromu / chromu. Przetestowałem to w Firefoksie 65, nie działa

Navigaid

Tak, Firefox ostrzega również przed wklejeniem do konsoli. W przeglądarce Firefox musisz użyć% c i stylów.

James Heazlewood

20

Ta biblioteka jest fantastyczna:

https://github.com/adamschwartz/log

Użyj Markdown dla komunikatów dziennika.

Vaughan
źródło

Ta biblioteka wymaga pracy. log(true, 'this is [c="color:red"]red[c]')=>true "this is %cred%c" "color:red" ""

bryc

20

Istnieje szereg wbudowanych funkcji do kolorowania dziennika konsoli:

//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
źródło

3

Wygląda na to, że console.info()nie dodaje już ikony informacyjnej. Nie jestem pewien, kiedy to się stało. Teraz nie różni się niczym od console.log () (przynajmniej w Chrome i Firefox)

Brad Kent

15

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
źródło

4

Lub console.log(color.red+' this is red color on text');jako colors.red już przypisane.

vusan

6

Nic nie robi w Chrome i Safari.

mauron85

4

@ mauron85 Nie ma tego w odpowiedzi, ale dotyczy to Node.js.

Gustavo Rodrigues

Tak, byłem zdezorientowany przez minutę, pod wrażeniem, że Chrome obsługuje sekwencje specjalne

i336_

1

@ i336_ - działa (tutaj Chrome 69). możesz wznowić swój poprzedni stan pod wrażeniem;)

vsync

13

Google udokumentowało to https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

Specyfikator formatu CSS pozwala dostosować wyświetlanie w konsoli. Rozpocznij ciąg ze specyfikatorem i podaj styl, który chcesz zastosować jako drugi parametr.

Jeden przykład:

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

Craig Myles
źródło

1

„Google udokumentowało to developer.chrome.com/devtools/docs/… .” Nie ma teraz wzmianki o stylistyce konsoli.

ChrisJJ

1

To tutaj developers.google.com/web/tools/chrome-devtools/console/…

ChrisJJ

9

system szablonów, przydatny, jeśli chcesz utworzyć kolorowy tekst linii bez tworzenia pełnego stylu dla każdego bloku

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

uingtea
źródło

8

Spójrz na to:

Animacja w konsoli plus 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/

możesz wkleić ASCII w każdej klatce, aby obejrzeć animację ASCII

Paweł
źródło

6

z Chrome 60 usunęli możliwość niebieskiego koloru tekstu podczas pisania console.info i wielu zmian w interfejsie API konsoli.

jeśli napiszesz dosłowny ciąg znaków we wzorze es6, używając backsticks `` jako identyfikatora (zwanego ciągiem szablonu) w console.log (), poniżej możesz pokolorować wyjście konsoli.

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

diEcho
źródło

3

Aby połączyć style CSS3 obejmujące wiele linii, możesz to zrobić w następujący sposób,

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

Wynik

Znajdź więcej: - https://coderwall.com/p/fskzdw/colorful-console-log

Twoje zdrowie.

Anjana Silva
źródło

3

Kilka lat temu napisałem dla siebie bardzo prostą wtyczkę:

Aby dodać do swojej strony, wystarczy umieścić w nagłówku:

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

Następnie w JS:

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

Struktura ma kod dla:

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

jak również:

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

dla każdego innego css. Powyższe zostało zaprojektowane z następującą składnią:

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

Jack Crane
źródło

wybitne wysiłki.

dhirajforyou

2

Niedawno chciałem rozwiązać podobny problem i skonstruowałem małą funkcję kolorowania tylko słów kluczowych, na których mi zależało, które były łatwo rozpoznawalne przez otaczające nawiasy klamrowe {keyword} .

To działało jak urok:

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)

technicznie możesz zamienić instrukcję if na instrukcję switch / case, aby zezwolić na wiele stylów z różnych powodów

Aurielle Perlmann
źródło

2

Wątpię, czy ktokolwiek to zobaczy, ale mam proste rozwiązanie dla tych, którzy chcą mieszać kilka kolorów w tej samej linii:

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

Aharon Ohayon
źródło

Widziałem to, dzięki! I tu jest link, który daje jeszcze więcej bajerów tak: Producent console.log () Wyjście kolorowe ... .

Rene van der Lende

1

Spróbuj tego:

var funcNames = ["log", "warn", "error"];
var colors = ['color:green', 'color:orange', 'color:red'];

for (var i = 0; i < funcNames.length; i++) {
    let funcName = funcNames[i];
    let color = colors[i];
    let oldFunc = console[funcName];
    console[funcName] = function () {
        var args = Array.prototype.slice.call(arguments);
        if (args.length) args = ['%c' + args[0]].concat(color, args.slice(1));
        oldFunc.apply(null, args);
    };
}

teraz wszystkie są takie, jak chcesz:

console.log("Log is green.");
console.warn("Warn is orange.");
console.error("Error is red.");

Uwaga: formatowanie typu console.log("The number = %d", 123);nie jest zepsute.

Siergiej
źródło

1

Napisałem npmmoduł, który daje możliwość przejścia:

Niestandardowe kolory - zarówno dla tekstu, jak i tła;
Prefiksy - aby pomóc zidentyfikować źródło, np[MyFunction]
Typy - jak warning, success, infoi inne typy predefiniowane wiadomość

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

Dane wyjściowe (z niestandardowymi prefiksami):

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

Dane wyjściowe (bez niestandardowych prefiksów):

Wejście :

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

Aby upewnić się, że użytkownik nie wyrenderuje nieprawidłowego koloru, napisałem również walidator kolorów . Będzie to potwierdzić kolory autorem name, hex, rgb, rgba, hsllub hslawartości

Wallace Sidhrée
źródło

0

// log in color 
// consolelog({"color":"red","background-color":"blue"},1,2,3)

// consolelog({"color":"red"},1,2,3)
// consolelog(1,2,3)
function consolelog()
{
    var style=Array.prototype.slice.call(arguments,0,1)||["black"];
    var vars=(Array.prototype.slice.call(arguments,1)||[""])
    var message=vars.join(" ")
    var colors = 
        {
            warn:
                {
                    "background-color"  :"yellow",
                    "color"             :"red"
                },
            error:
                {
                    "background-color"  :"red",
                    "color"             :"yellow"
                },
            highlight:
                {
                    "background-color"  :"yellow",
                    "color"             :"black"
                },
            success : "green", 
            info    : "dodgerblue"  

        }
    var givenstyle=style[0];
    var colortouse= colors[givenstyle] || givenstyle;
    if(typeof colortouse=="object")
    {
        colortouse= printobject(colortouse)
    }
    if(colortouse)
    {
        colortouse=(colortouse.match(/\W/)?"":"color:")+colortouse;
    }
    function printobject(o){
        var str='';

        for(var p in o){
            if(typeof o[p] == 'string'){
                str+= p + ': ' + o[p]+'; \n';
            }else{
            str+= p + ': { \n' + print(o[p]) + '}';
            }
        }

        return str;
    }
    if(colortouse)
    {
        console.log("%c" + message, colortouse);
    }
    else
    {
        console.log.apply(null,vars);
    }
}
console.logc=consolelog;

użytkownik10090004
źródło

2

Ten fragment kodu może rozwiązać problem, ale nie wyjaśnia, dlaczego ani w jaki sposób odpowiada na pytanie. Dołącz wyjaśnienie swojego kodu , ponieważ to naprawdę pomaga poprawić jakość Twojego postu. Pamiętaj, że w przyszłości odpowiadasz na pytanie czytelników, a ci ludzie mogą nie znać przyczyn Twojej sugestii kodu.

Luca Kiebel,

Kolory w konsoli JavaScript

Odpowiedzi:

Wynik: