Кольори в консолі JavaScript

879

Чи може вбудована в Chrome консоль JavaScript відображати кольори?

Я хочу помилки в червоному, попередження в помаранчевому і console.logв зеленому. Це можливо?

javascript  google-chrome  console  google-chrome-devtools 
— Випадкованіжка
джерело
44
Ви можете отримати помилки в червоному (за замовчуванням), просто скориставшись console.error()замість console.log...
— nrabinowitz
16
console.warn()також доступний помаранчевий значок «попередження», хоча сам текст ще чорний.
— Чарлі Шліссер
3
console.log("%c", "background: red;padding: 100000px;");викличе дуже дивну поведінку в Chrome, особливо при прокручуванні консолі.
— програміст5000
1
— Suhaib Janjua
1
Я написав крихітний пакет для розфарбовування журналів: консольні кольори
— vsync

Відповіді:

1390

У Chrome & Firefox (+31) ви можете додавати CSS у console.logповідомлення:

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');
Розгорніть фрагмент

Приклад кольорової консолі в Chrome

Те саме можна застосувати для додавання декількох CSS до однієї команди. синтаксис для різнобарвних хромових консольних повідомлень Джерело для Google Chrome: Презентація Paul Irish & Webkit змінити
Джерело для Firefox: Веб-консоль Firefox - Стилізація повідомлень

Довідник API консолі Chrome: Довідник API консолі

— християнські повіри
джерело
20
— josh3736
11
Щоб використовувати елементи HTML span для стилювання
— Ганс,
22
Навіщо зупинятися на просто розфарбуванні тексту? Давайте також помістимо кілька зображень у консоль:console.log('%c', 'padding:28px 119px;line-height:100px;background:url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6) no-repeat;');
— Дерек 朕 會 功夫
2
це найкраще: background: #444; color: #bada55; padding: 2px; border-radius:2pxвсе про радіус кордону
— Нік Сотирос
8
# bada55 дійсно.
— Кайл Хотчкісс
571

Ось кращий приклад з тінню для крапель веселки.

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

console.log("%cExample %s", css, 'all code runs happy');
Розгорніть фрагмент

введіть тут опис зображення

— bartburkhardt
джерело
Як виявити підтримку цієї функції у веб-переглядачі? stackoverflow.com/questions/40428239/…
— Мухаммед Рехан Саїд
прикро в тому, що текст якось не схожий на твій приклад (у мене чи в останніх хромах, idk)
— Аскан
3
на моїй консолі він відсікається при переповненні висоти лінії ( Chrome 69, WIN7)
— vsync
1
@Asqan Просто напишіть достатньо великий текст для консолі, щоб обернути його, і ви побачите. : D
— Вікрант
94

Ви можете використовувати спеціальний таблицю стилів, щоб розфарбувати налагоджувач. Ви можете ввести цей код, C:\Documents and Settings\<User Name>\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.cssякщо ви перебуваєте в WinXP, але каталог залежить від ОС.

.console-error-level .console-message-text{
    color: red;
}

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

.console-log-level .console-message-text {
    color:green;
}
— Денніс
джерело
14
на Ubuntu 10.10, то таблиця стилів в~/.config/google-chrome/Default/User\ StyleSheets/Custom.css
— ciju
12
на Mac OS X він знаходиться ~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css.
— Ленс Поллард
4
Місце для Windows 7 виглядає як "C: \ Користувачі \ <Ім'я користувача> \ AppData \ Місцеві \ Google \ Chrome \ Дані користувача \ За замовчуванням \ Таблиці стилів користувача". Крім того, існує соліризована таблиця стилів кольорової схеми для цього.
— Weston C
1
Я хотів стилізувати весь рядок, а не лише текст, тому видаляю .console-message-textклас. Крім того, найбільш приємні кольори тла я виявив #ffece6за помилки, #fafad2застереження та #f0f9ffзвичайні.
— Меттью Кларк
2
Пам'ятайте, що ця таблиця стилів застосовується до всіх сторінок, які ви відвідуєте в Chrome, тому якщо ви видалите клас, щоб зменшити специфіку, ви можете знайти веб-сайт із використанням стилів у спливаючому вікні повідомлення чи щось подібне.
— Чарлі Шліссер
57

Старіші версії Chrome не дозволяють вам console.log()відображати програму s у певному кольорі програмно, але при виклику console.error()буде розміщено червоний Xзначок на рядках помилок і текст console.warn()стане червоним, а ви отримаєте жовтий !значок.

Потім можна фільтрувати записи консолі за допомогою кнопок Усі, Помилки, Попередження та Журнали під консоллю.

Виявляється, Firebug підтримує користувальницький CSS для console.logs з 2010 року, а підтримку Chrome додано в Chrome 24.

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

Коли %cз'являється де-небудь у першому аргументі , наступний аргумент використовується як CSS для стилістичної лінії консолі. Подальші аргументи об'єднуються (як це було завжди).

— josh3736
джерело
2
Чи повинен це бути перший аргумент? Цей код не працює ... поверніть console.log ("% s", повідомлення, "% c% s", "color: #BBBBBB", get_type (message));
— Майкл Мінтер
2
"Коли% c з'являється де-небудь у першому аргументі, наступний аргумент використовується як CSS для стилістичної лінії консолі" Виправлення ". Коли% c з'являється де-небудь у будь-якому аргументі, наступний аргумент використовується як CSS для стилістичної лінії консолі. вихід після% ceg i.imgur.com/msfPNbK.png
— ChrisJJ
49

Я написав шаблон-color-web https://github.com/icodeforlove/Console.js, щоб ми могли зробити це трохи простіше

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

Вищезазначене було б надзвичайно важко зробити з консоллю за замовчуванням .

Щоб переглянути інтерактивну демонстрацію, натисніть тут .

введіть тут опис зображення

— Чад Сайра
джерело
2
На відміну від більшості інших рішень, це дозволяє також забарвити змінні, що містять рядки.
— максимальний прихильник
2
Насправді це не дуже підтримується, наприклад, ви зараз не можете це зробити, console.log(`this is inline ${'red'.red.bold} and this is more text`.grey)стилізація припиниться після першого стильового предмета
— Чад Scira
2
Незважаючи на те, що немає "вбудованого" забарвлення, все одно можна робити такі речі, як var txt = "asd"; txt.redабо `${txt}`.red + `${txt}`.green. Я не знаю, як це зробити за допомогою %cсинтаксису, який рекомендують інші. Тож спасибі за те, що побудували бібліотеку
— максимальний прихильник
1
Як ви виявите підтримку цієї функції в браузері, я переглянув код вашої бібліотеки і не зміг її помітити? stackoverflow.com/questions/40428239/…
— Мухаммад Рехан Саїд
1
Виявлення браузера @MuhammadRehanSaeed
— Чад Счіра
32

Оновлення:

Я написав бібліотеку JavaScript минулого року для себе. Він містить інші функції, наприклад багатослівність для журналів налагодження, а також забезпечує метод журналів завантаження, який експортує файл журналу. Погляньте на бібліотеку JS Logger та її документацію.

Я знаю, що відповісти трохи пізно, але як ОП попросив отримати власні кольорові повідомлення в консолі для різних варіантів. Кожен передає властивість стилю кольору у кожному console.log()висловлюванні, яке бентежить читача, створюючи складність у коді, а також завдаючи шкоди загальному вигляду та вигляду коду.

Я пропоную записати функцію з кількома заздалегідь визначеними кольорами (наприклад, успіх, помилка, інформація, попередження, кольори за замовчуванням), які будуть застосовані на основі параметру, переданого функції.

Це покращує читабельність та зменшує складність коду. Це занадто просто в обслуговуванні та подальшому розширенні відповідно до ваших потреб.

Наведене нижче - це функція JavaScript, яку потрібно писати один раз, а потім використовувати її знову і знову.

function colorLog(message, color) {

    color = color || "black";

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

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

Вихід:

введіть тут опис зображення

Колір за замовчуванням - чорний, і в цьому випадку вам не потрібно передавати жодне ключове слово як параметр. В інших випадках вам слід ввести success, error, warning, or infoключові слова для отримання бажаних результатів.

Тут працює JSFiddle . Дивіться вихід у консолі браузера.

— Сухайб Джанджуа
джерело
Я мав на увазі реалізацію, якої було більше log.info("this would be green")тощо. Досить близько.
— Кайл Бейкер
Класно, але врахуйте, що стандартний підхід з console.error (), console.warn (), console.info () здається кращим у цьому сценарії, оскільки він також 1) забезпечує семантику, яку ми втрачаємо тут, що дозволяє фільтрувати повідомлення за суворістю в консолі 2) використовувати кольори, які найкраще підходять для налаштування користувача, наприклад. браузер у темному режимі або режимі з високим контрастом
— Paweł Bulwan
console.info () та console.log () показує той самий стандартний журнал, і ви не можете розмежуватись лише дивлячись на вихід. Але так console.warn () та console.error () можна використовувати для фільтрації повідомлень згодом. Як запитав ОП; як друкувати кольорові журнали в консолі. Я вважаю, що відповідь найкраща відповідно до питання, яке задає ОП. Ми не фільтруємо повідомлення, але робимо упор на друк кольорових журналів. Я дуже вдячний за вашу пропозицію, і приклад можна додатково покращити для задоволення ваших потреб.
— Suhaib Janjua
@SuhaibJanjua Як це зробити, але зберігаючи добрий номер рядка від інспектора?
— LexaGC
25

Насправді я випадково виявив, що це випадково цікаво, що трапиться, але ви можете використовувати прапори для забарвлення bash, щоб встановити колір виводу в Chrome:

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

Вихід:

Привіт, світ червоний і синій

введіть тут опис зображення

Дивіться це посилання про те, як працюють кольорові прапори: https://misc.flogisoft.com/bash/tip_colors_and_formatting

В основному використовувати \x1bабо \x1Bзамість \e. напр. \x1b[31mі весь текст після цього буде переключений на новий колір.

Я не пробував цього в будь-якому іншому браузері, але вважав, що варто згадати.

— Джеймс Хезлвуд
джерело
3
Це круто, але, здається, є специфічним для хрому / хрому. Я перевірив його в firefox 65, він не працює
— навігація
Так, Firefox також попереджає вас про вставлення в консоль. Для Firefox вам доведеться використовувати% c та стилі.
— Джеймс Хейзлвуд
20

Ця бібліотека фантастична:

https://github.com/adamschwartz/log

Використовуйте розмітку для повідомлень журналу.

— вуан
джерело
Цій лібці потрібна робота. log(true, 'this is [c="color:red"]red[c]')=>true "this is %cred%c" "color:red" ""
— bryc
20

Існує ряд вбудованих функцій для фарбування журналу консолі:

//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')
— Сандіп Гантайт
джерело
3
здається, що console.info()більше не додає піктограму інформації .. не впевнений, коли це сталося. Тепер це не відрізняється від console.log () (принаймні на Chrome і Firefox)
— Бред Кент
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');
— мостафа.мортазаві
джерело
4
Або console.log(color.red+' this is red color on text');як кольори.ред вже призначені.
— vusan
6
Не робить нічого в Chrome і Safari.
— mauron85
4
@ mauron85 Це не у відповіді, але це для Node.js.
— Густаво Родрігес
Так, я на хвилину розгубився, що вражений тим, що Chrome підтримує послідовності втечі
— i336_
1
@ i336_ - працює (Chrome 69 тут). ви можете відновити свій попередній напів вражений стан;)
— vsync
13

Google задокументував це https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

Специфікатор формату CSS дозволяє налаштувати відображення в консолі. Почніть рядок із специфікатора і надайте стиль, який ви хочете застосувати як другий параметр.

Один приклад:

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
— Крейг Майлз
джерело
1
"Google задокументував цей розробник.chrome.com/ devtools/ docs/… ." Зараз про згадку про стилі консолі немає.
— ChrisJJ
1
— ChrisJJ
9

система шаблонів, корисна, якщо ви хочете створити барвистий текст рядка без створення повного стилю для кожного блоку

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
джерело
8

Заціни:

Анімація в консолі, плюс CSS

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

https://jsfiddle.net/a8y3jhfL/

ви можете вставити ASCII у кожен кадр для перегляду анімації ASCII

— Pawel
джерело
6

з Chrome 60 вони видалили інструмент синього кольору тексту під час написання console.info та зробили багато змін у API консолі.

якщо ви пишете рядковий літерал у шаблоні es6, використовуючи зворотні позначки `` як ідентифікатор (називається як рядок шаблону) в console.log (), то нижче способу можна розфарбувати вихід консолі.

console.log(`%cToday date=>%c${new Date()}`,`color:#F74C2F`, `color:green`);
// output :Today date (in red color) => Date (in green color)
— діЕхо
джерело
3

Для ланцюжка стилів CSS3, що охоплює кілька рядків, ви можете зробити так,

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

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

Результат

введіть тут опис зображення

Дізнайтеся більше: - https://coderwall.com/p/fskzdw/colorful-console-log

Ура.

— Аньяна Сілва
джерело
3

Я написав для себе справжній плагін reallllllllllllllllly кілька років тому:

Щоб додати на свою сторінку все, що вам потрібно зробити, це покласти це в голову: 

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

Тоді в JS:

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

Рамка має код для:

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

так само, як:

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

для будь-якого іншого css. Вищезазначене розроблено із наступним синтаксисом:

jconsole.css.log(message to log,css code to style the logged message)
— Джек Крейн
джерело
видатні зусилля.
— dhirajforyou
2

Нещодавно я хотів вирішити подібну проблему і побудував невелику функцію, щоб розфарбувати лише ключові слова, про які я дбав, які були легко ідентифіковані навколишніми фігурними дужками {keyword}.

Це спрацювало як шарм:

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

введіть тут опис зображення

технічно ви можете замінити оператор if на оператор switch / case, щоб дозволити кілька стилів з різних причин

— Aurielle Perlmann
джерело
2

Я сумніваюся, що хтось насправді це побачить, але у мене є просте рішення для тих, хто хоче змішати кілька кольорів в одній лінії:

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`);
— Ахарон Огайон
джерело
Я це бачив, дякую! А ось посилання , яка дасть вам ще більше позитивних героїв , як , що: Make console.log () вихід барвистий ... .
— Рене ван дер Ленде
1

Спробуйте це:

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

тепер усі вони такі, як хотіли:

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

Примітка: форматування як би console.log("The number = %d", 123);не порушено.

— Сергій
джерело
1

Я написав npmмодуль, який дає можливість пройти:

  • Користувацькі кольори - як до тексту, так і до фону;
  • Префікси - щоб допомогти визначити джерело, наприклад[MyFunction]
  • Типи - як warning, success, infoі інші типи зумовленого повідомлення

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

Вихід (із спеціальними префіксами):

введіть тут опис зображення

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

Вихід (без спеціальних префіксів):

введіть тут опис зображення

Вхід :

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

Щоб користувач не видав недійсний колір, я також написав валідатор кольорів . Він буде перевіряти кольору від name, hex, rgb, rgba, hslабо hslaзначень

— Уоллес Сідрее
джерело
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;
— користувач10090004
джерело
2
Хоча цей фрагмент коду може вирішити проблему, він не пояснює, чому або як він відповідає на питання. Будь ласка, додайте пояснення до свого коду , оскільки це дійсно допомагає покращити якість вашої публікації. Пам’ятайте, що ви відповідаєте на запитання читачів у майбутньому, і ці люди можуть не знати причини вашої пропозиції щодо коду.
— Лука Кібел
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.