Farben in der JavaScript-Konsole

879

Kann die in Chrome integrierte JavaScript-Konsole Farben anzeigen?

Ich möchte Fehler in Rot, Warnungen in Orange und Warnungen console.login Grün. Ist das möglich?

Zufälliges Blau
quelle
44
Sie können Fehler in rot (die Standardeinstellung) erhalten, indem Sie einfach console.error()anstelle von console.log...
nrabinowitz
16
console.warn()ist auch mit einem orangefarbenen Warnsymbol erhältlich, obwohl der Text selbst immer noch schwarz ist.
Charlie Schliesser
3
console.log("%c", "background: red;padding: 100000px;");verursacht in Chrome ein sehr seltsames Verhalten, insbesondere beim Scrollen der Konsole.
Programmierer5000
1
Ich schrieb ein winziges Paket zum Ausmalen von Protokollen: Konsolenfarben
vsync

Antworten:

1390

In Chrome & Firefox (+31) können Sie CSS in console.logNachrichten hinzufügen :

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

Konsolenfarbbeispiel in Chrome

Das Gleiche gilt für das Hinzufügen mehrerer CSS zu demselben Befehl. Syntax für mehrfarbige Chrome-Konsolenmeldungen Quelle für Google Chrome: Präsentation von Paul Irish & Webkit ändern
Quelle für Firefox: Firefox Web Console - Styling Messages

Chrome Console API-Referenz: Console API-Referenz

christianvuerings
quelle
20
Anscheinend hat Firebug dies schon lange unterstützt .
Josh3736
11
Um HTML-Span-Elemente zum Stylen verschiedener Teile einer console.log-Nachricht zu verwenden, lesen Sie diesen Code: jsfiddle.net/yg6hk/5
Hans
22
Warum aufhören, nur den Text zu färben? Lassen Sie uns auch einige Bilder in die Konsole console.log('%c', 'padding:28px 119px;line-height:100px;background:url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6) no-repeat;');
einfügen
2
Das ist das Beste: Es background: #444; color: #bada55; padding: 2px; border-radius:2pxdreht sich alles um den Grenzradius
Nick Sotiros
8
# bada55 in der Tat.
Kyle Hotchkiss
571

Hier ist ein extremes Beispiel mit Regenbogen-Schlagschatten.

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

Geben Sie hier die Bildbeschreibung ein

bartburkhardt
quelle
Wie erkennen Sie die Unterstützung für diese Funktion in einem Browser? stackoverflow.com/questions/40428239/…
Muhammad Rehan Saeed
Die Traurigkeit ist, dass der Text irgendwie nicht genau wie Ihr Beispiel aussieht (bei mir oder in den letzten Chromes, idk)
Asqan
3
auf meiner Konsole wird es abgeschnitten, Chrome 69, WIN7
wenn
1
@Asqan Schreiben Sie einfach einen Text, der groß genug ist, damit die Konsole ihn einschließt, und Sie werden sehen. : D
Vikrant
94

Sie können ein benutzerdefiniertes Stylesheet verwenden, um Ihren Debugger einzufärben. Sie können diesen Code eingeben, C:\Documents and Settings\<User Name>\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.csswenn Sie sich in WinXP befinden, das Verzeichnis variiert jedoch je nach Betriebssystem.

.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
quelle
14
auf Ubuntu 10.10 ist die Stylesheet~/.config/google-chrome/Default/User\ StyleSheets/Custom.css
ciju
12
unter Mac OS X ist es bei ~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css.
Lance Pollard
4
Der Windows 7-Speicherort scheint "C: \ Benutzer \ <Benutzername> \ AppData \ Local \ Google \ Chrome \ Benutzerdaten \ Standard \ User StyleSheets" zu sein. Außerdem gibt es dafür ein Solarized Color Scheme Stylesheet .
Weston C
1
Ich wollte die gesamte Zeile stylen, nicht nur den Text, also entferne ich die .console-message-textKlasse. Die angenehmsten Hintergrundfarben, die ich gefunden habe, waren #ffece6Fehler, #fafad2Warnungen und #f0f9ffNormalfarben.
Matthew Clark
2
Beachten Sie, dass dieses Stylesheet für alle Seiten gilt, die Sie in Chrome besuchen. Wenn Sie also eine Klasse entfernen, um die Spezifität zu verringern, finden Sie möglicherweise eine Website, die Ihre Styles in einem Nachrichten-Popup oder ähnlichem verwendet.
Charlie Schliesser
57

In älteren Versionen von Chrome können Sie console.log()s nicht programmgesteuert in einer bestimmten Farbe anzeigen lassen. Beim Aufrufen console.error()wird jedoch ein rotes XSymbol auf die Fehlerzeilen gesetzt, der Text wird rot und console.warn()Sie erhalten ein gelbes !Symbol.

Sie können dann Konsoleneinträge mit den Schaltflächen Alle, Fehler, Warnungen und Protokolle unter der Konsole filtern.


Es stellt sich heraus, dass Firebug seit 2010 benutzerdefiniertes CSS für console.logs unterstützt und Chrome-Unterstützung ab Chrome 24 hinzugefügt wurde.

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

Wenn %cirgendwo im ersten Argument angezeigt wird , wird das nächste Argument als CSS verwendet, um die Konsolenzeile zu formatieren. Weitere Argumente werden verkettet (wie immer).

josh3736
quelle
2
Muss es das erste Argument sein? Dieser Code funktioniert nicht ... return console.log ("% s", Nachricht, "% c% s", "Farbe: #BBBBBB", get_type (Nachricht));
Michael Minter
2
"Wenn% c an einer beliebigen Stelle im ersten Argument angezeigt wird, wird das nächste Argument als CSS zum Formatieren der Konsolenzeile verwendet." Korrektur "Wenn% c an einer beliebigen Stelle in einem Argument angezeigt wird, wird das nächste Argument als CSS zum Formatieren der Konsolenzeile verwendet Ausgabe nach dem% ceg i.imgur.com/msfPNbK.png
ChrisJJ
49

Ich habe template-colours-web https://github.com/icodeforlove/Console.js geschrieben , damit wir dies etwas einfacher tun können

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

Die oben wäre extrem hart mit dem Standard zu tun console.log .

Für eine interaktive Live-Demo klicken Sie hier .

Geben Sie hier die Bildbeschreibung ein

Chad Scira
quelle
2
Im Gegensatz zu den meisten anderen Lösungen können hiermit auch Zeichenfolgen enthaltende Variablen eingefärbt werden.
Max Pleaner
2
Eigentlich wird dies nicht wirklich unterstützt, zum Beispiel können Sie dies derzeit nicht tun. console.log(`this is inline ${'red'.red.bold} and this is more text`.grey)Das Styling würde nach dem ersten gestalteten Artikel aufhören
Chad Scira
2
Auch wenn es keine "Inline" -Farbe gibt, ist es dennoch möglich, Dinge wie var txt = "asd"; txt.redoder zu tun `${txt}`.red + `${txt}`.green. Mir ist keine Möglichkeit bekannt, dies mit der von %canderen empfohlenen Syntax zu tun . Also danke für den Bau der Bibliothek
Max Pleaner
1
Wie erkennen Sie die Unterstützung für diese Funktion in einem Browser? Ich habe mir den Code für Ihre Bibliothek angesehen und konnte ihn nicht erkennen. stackoverflow.com/questions/40428239/…
Muhammad Rehan Saeed
1
@ MuhammadRehanSaeed Browser-Erkennung
Chad Scira
32

Aktualisieren:

Ich habe letztes Jahr eine JavaScript-Bibliothek für mich geschrieben. Es enthält andere Funktionen, z. B. Ausführlichkeit für Debug-Protokolle, und bietet auch eine Download-Protokollmethode, mit der eine Protokolldatei exportiert wird. Schauen Sie sich die JS Logger- Bibliothek und ihre Dokumentation an.


Ich weiß, es ist etwas spät zu antworten, aber als das OP darum bat, benutzerdefinierte Farbnachrichten in der Konsole für verschiedene Optionen zu erhalten. Jeder übergibt die Farbstileigenschaft in jeder console.log()Anweisung, was den Leser verwirrt, indem er Komplexität im Code erzeugt und auch das allgemeine Erscheinungsbild des Codes beeinträchtigt.

Ich schlage vor, eine Funktion mit wenigen vorgegebenen Farben (z. B. Erfolg, Fehler, Informationen, Warnung, Standardfarben) zu schreiben, die auf der Grundlage des an die Funktion übergebenen Parameters angewendet wird.

Es verbessert die Lesbarkeit und reduziert die Komplexität des Codes. Es ist zu einfach zu warten und entsprechend Ihren Anforderungen weiter zu erweitern.


Im Folgenden finden Sie eine JavaScript-Funktion, die Sie einmal schreiben und dann immer wieder verwenden müssen.

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

Ausgabe:

Geben Sie hier die Bildbeschreibung ein


Die Standardfarbe ist Schwarz und Sie müssen in diesem Fall kein Schlüsselwort als Parameter übergeben. In anderen Fällen sollten Sie success, error, warning, or infoSchlüsselwörter für die gewünschten Ergebnisse übergeben.

Hier arbeitet JSFiddle . Siehe Ausgabe in der Browserkonsole.

Suhaib Janjua
quelle
Ich hatte eine Implementierung im Sinn, die mehr log.info("this would be green")war usw. Nah genug.
Kyle Baker
Cool, aber bedenken Sie, dass der Standardansatz mit console.error (), console.warn (), console.info () in diesem Szenario besser erscheint, da er auch 1) eine Semantik bietet, die wir hier verlieren, wodurch Nachrichten nach Schweregrad gefiltert werden können Verwenden Sie in Konsole 2) Farben, die für die Benutzerkonfiguration am besten geeignet sind, z. Browser im dunklen Modus oder im kontrastreichen Modus
Paweł Bulwan
console.info () und console.log () zeigen dasselbe Standardprotokoll an, und Sie können nicht unterscheiden, wenn Sie nur die Ausgabe betrachten. Aber ja, console.warn () und console.error () können später zum Filtern von Nachrichten verwendet werden. Wie das OP fragte; So drucken Sie Farbprotokolle in der Konsole. Ich denke, die Antwort ist am besten gemäß der vom OP gestellten Frage. Wir filtern keine Nachrichten, konzentrieren uns jedoch auf das Drucken von Farbprotokollen. Ich schätze Ihren Vorschlag sehr und das Beispiel kann weiter verbessert werden, um auch Ihren Anforderungen zu entsprechen.
Suhaib Janjua
@SuhaibJanjua Wie geht das, aber die gute Zeilennummernreferenz vom Inspektor behalten?
LexaGC
25

Ich fand das zufällig nur neugierig, was passieren würde, aber Sie können tatsächlich Bash-Farbflags verwenden, um die Farbe einer Ausgabe in Chrome festzulegen:

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

Ausgabe:

Hallo Welt rot und blau

Geben Sie hier die Bildbeschreibung ein

Unter diesem Link erfahren Sie, wie Farbflags funktionieren: https://misc.flogisoft.com/bash/tip_colors_and_formatting

Verwenden Sie grundsätzlich das \x1boder \x1Banstelle von \e. z.B. \x1b[31mund der gesamte Text danach wird auf die neue Farbe umgeschaltet.

Ich habe dies in keinem anderen Browser versucht, fand es aber erwähnenswert.

James Heazlewood
quelle
3
Das ist cool, scheint aber chrom / chromspezifisch zu sein. Ich habe es in Firefox 65 getestet, es funktioniert nicht
navigaid
Ja, Firefox warnt Sie auch vor dem Einfügen in die Konsole. Für Firefox müssen Sie% c und Stile verwenden.
James Heazlewood
20

Diese Bibliothek ist fantastisch:

https://github.com/adamschwartz/log

Verwenden Sie Markdown für Protokollnachrichten.

Vaughan
quelle
Diese Bibliothek braucht Arbeit. log(true, 'this is [c="color:red"]red[c]')=>true "this is %cred%c" "color:red" ""
Bryc
20

Es gibt eine Reihe von integrierten Funktionen zum Färben des Konsolenprotokolls:

//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
quelle
4
Es scheint, dass console.info()das Info-Symbol nicht mehr hinzugefügt wird. Ich bin mir nicht sicher, wann dies passiert ist. Es ist jetzt nicht anders als console.log () (zumindest auf Chrome und 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
quelle
4
Oder console.log(color.red+' this is red color on text');als bereits zugewiesene Farben.
Vusan
6
Tut nichts auf Chrome und Safari.
Mauron85
4
@ mauron85 Es ist nicht in der Antwort, aber das ist für Node.js.
Gustavo Rodrigues
Ja, ich war eine Minute lang verwirrt, halb beeindruckt, dass Chrome Escape-Sequenzen unterstützt
i336_
1
@ i336_ - es funktioniert (Chrome 69 hier). Sie können Ihren vorherigen halb beeindruckten Zustand wieder aufnehmen;)
vsync
13

Google hat dies unter https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css dokumentiert

Mit dem CSS-Formatbezeichner können Sie die Anzeige in der Konsole anpassen. Beginnen Sie die Zeichenfolge mit dem Bezeichner und geben Sie den Stil an, den Sie als zweiten Parameter anwenden möchten.

Ein Beispiel:

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
Craig Myles
quelle
1
"Google hat diese developer.chrome.com/devtools/docs/… dokumentiert ." Es gibt dort jetzt keine Erwähnung des Konsolenstils.
ChrisJJ
9

Vorlagensystem, nützlich, wenn Sie farbenfrohen Linientext erstellen möchten, ohne für jeden Block den vollständigen Stil zu erstellen

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

buntes Konsolenprotokoll

uingtea
quelle
8

Überprüfen Sie dies heraus:

Animation in der Konsole 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/

Sie können ASCII in jeden Frame einfügen, um eine ASCII-Animation anzusehen

Pawel
quelle
6

In Chrome 60 haben sie beim Schreiben von console.info die Funktion der blauen Textfarbe entfernt und viele Änderungen an der Konsolen-API vorgenommen.

Wenn Sie ein Zeichenfolgenliteral in das es6-Muster schreiben und die Backticks `` als Bezeichner (als Vorlagenzeichenfolge bezeichnet) in console.log () verwenden , kann die Konsolenausgabe weiter unten eingefärbt werden.

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

Gehen Sie folgendermaßen vor, um CSS3-Stile zu verketten, die sich über mehrere Zeilen erstrecken:

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

Ergebnis

Geben Sie hier die Bildbeschreibung ein

Weitere Informationen: - https://coderwall.com/p/fskzdw/colorful-console-log

Prost.

Anjana Silva
quelle
3

Ich habe vor einigen Jahren ein realllllllllllllllllly einfaches Plugin für mich geschrieben:

Um Ihrer Seite etwas hinzuzufügen, müssen Sie nur Folgendes in den Kopf setzen:

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

Dann in JS:

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

Das Framework enthält Code für:

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

ebenso gut wie:

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

für jede andere CSS. Das Obige wurde mit der folgenden Syntax entworfen:

jconsole.css.log(message to log,css code to style the logged message)
Jack Crane
quelle
herausragende Anstrengungen.
Dhirajforyou
2

Ich wollte kürzlich ein ähnliches Problem lösen und habe eine kleine Funktion erstellt, um nur Schlüsselwörter einzufärben, die mir wichtig waren und die durch umgebende geschweifte Klammern leicht zu identifizieren waren {keyword}.

Das hat wie ein Zauber gewirkt:

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)

Geben Sie hier die Bildbeschreibung ein

Technisch gesehen können Sie die if-Anweisung gegen eine switch / case-Anweisung austauschen, um mehrere Stile aus unterschiedlichen Gründen zuzulassen

Aurielle Perlmann
quelle
2

Ich bezweifle, dass es tatsächlich jemand sehen wird, aber ich habe eine einfache Lösung für diejenigen, die mehrere Farben in derselben Linie mischen möchten:

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
quelle
Ich habe es gesehen, danke! Und hier ist ein Link, der Sie noch mehr Goodies wie das gibt: Make console.log () -Ausgabe bunt ... .
Rene van der Lende
1

Versuche dies:

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

Jetzt sind sie alle so, wie Sie es wollten:

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

Hinweis: Die Formatierung wie console.log("The number = %d", 123);ist nicht fehlerhaft.

Sergey
quelle
1

Ich habe ein npmModul geschrieben, das einem die Möglichkeit gibt, zu bestehen:

  • Benutzerdefinierte Farben - sowohl für Text als auch für Hintergrund;
  • Präfixe - um die Quelle zu identifizieren, wie z[MyFunction]
  • Typen - wie warning, success, infound andere vordefinierte Nachrichtentypen

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

Ausgabe (mit benutzerdefinierten Präfixen):

Geben Sie hier die Bildbeschreibung ein

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

Ausgabe (ohne benutzerdefinierte Präfixe):

Geben Sie hier die Bildbeschreibung ein

Eingabe :

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

Um sicherzustellen, dass der Benutzer keine ungültige Farbe rendert, habe ich auch einen Farbvalidator geschrieben . Es wird validieren Farben name, hex, rgb, rgba, hsloder hslaWerte

Wallace Sidhrée
quelle
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;
user10090004
quelle
2
Dieses Code-Snippet kann das Problem zwar lösen, erklärt jedoch nicht, warum oder wie es die Frage beantwortet. Bitte geben Sie eine Erklärung für Ihren Code an , da dies wirklich zur Verbesserung der Qualität Ihres Beitrags beiträgt. Denken Sie daran, dass Sie die Frage für Leser in Zukunft beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen.
Luca Kiebel