Màu sắc trong bảng điều khiển JavaScript

879

Bảng điều khiển JavaScript tích hợp của Chrome có thể hiển thị màu không?

Tôi muốn lỗi màu đỏ, cảnh báo bằng màu cam và console.logmàu xanh lá cây. Điều đó có thể không?

— Ngẫu nhiên
nguồn

44

Bạn có thể nhận được lỗi màu đỏ (mặc định) chỉ bằng cách sử dụng console.error()thay vì console.log...

— nrabinowitz

16

console.warn()cũng có sẵn với biểu tượng 'cảnh báo' màu cam, mặc dù bản thân văn bản vẫn có màu đen.

— Charlie Schliesser

3

console.log("%c", "background: red;padding: 100000px;");sẽ gây ra hành vi rất kỳ lạ trong Chrome, đặc biệt là khi cuộn bảng điều khiển.

— lập trình

1

Một cách dễ dàng / đơn giản nhất để hiển thị màu sắc trong bảng điều khiển

— Suhaib Janjua

1

Tôi đã viết một gói nhỏ để tô màu nhật ký: màu giao diện điều khiển

— vsync

1390

Trong Chrome & Firefox (+31), bạn có thể thêm CSS trong console.logtin nhắn:

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

Mở rộng đoạn trích

Ví dụ về màu bảng điều khiển trong Chrome

Điều tương tự có thể được áp dụng để thêm nhiều CSS vào cùng một lệnh. Nguồn cho Google Chrome: Bài thuyết trình của Paul Irish & Webkit thay đổi
Nguồn cho Firefox: Bảng điều khiển web Firefox - Thông điệp tạo kiểu

Tham chiếu API bảng điều khiển Chrome: Tham chiếu API bảng điều khiển

— christianvuerings
nguồn

20

Rõ ràng, Fireorms đã hỗ trợ điều này trong một thời gian dài .

— josh3736

11

Để sử dụng các phần tử nhịp HTML để định kiểu các phần khác nhau của thông điệp console.log, hãy xem mã này: jsfiddle.net/yg6hk/5

— Hans

22

Tại sao chỉ dừng lại ở việc tô màu văn bản? Chúng ta cũng hãy đặt một số hình ảnh vào bảng điều khiển:

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

điều này là tốt nhất: background: #444; color: #bada55; padding: 2px; border-radius:2pxtất cả là về bán kính biên giới

— Nick Sotiros

8

# bada55 thực sự.

— Kyle Hotchkiss

571

Dưới đây là một ví dụ cực đoan với bóng thả cầu vồng.

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

Mở rộng đoạn trích

nhập mô tả hình ảnh ở đây

— bartburkhardt
nguồn

Làm thế nào để bạn phát hiện hỗ trợ cho tính năng này trong trình duyệt? stackoverflow.com/questions

— 40428239 / từ

điều đáng buồn là văn bản bằng cách nào đó không giống hệt ví dụ của bạn (ở tôi hoặc trong các sắc thái gần đây, idk)

— Asqan

3

trên bảng điều khiển của tôi, nó được cắt bớt khi vượt quá chiều cao của dòng ( Chrome 69, WIN7)

— vsync

1

@Asqan Chỉ cần viết một văn bản đủ lớn để giao diện điều khiển bao bọc nó và bạn sẽ thấy. : D

— Vikrant

94

Bạn có thể sử dụng biểu định kiểu tùy chỉnh để tô màu trình gỡ lỗi của mình. Bạn có thể đặt mã này vào C:\Documents and Settings\<User Name>\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.cssnếu bạn ở trong WinXP, nhưng thư mục thay đổi theo hệ điều hành.

.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
nguồn

14

trên Ubuntu 10.10, bản định kiểu có tại~/.config/google-chrome/Default/User\ StyleSheets/Custom.css

— ciju

12

trên Mac OS X là tại ~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css.

— Lance Pollard

4

Vị trí Windows 7 dường như là `C: \ Users \ <Tên người dùng> \ AppData \ Local \ Google \ Chrome \ Dữ liệu người dùng \ Mặc định \ User StyleSheets`. Ngoài ra, còn có Biểu định kiểu màu mặt trời cho nó.

— Weston C

1

Tôi muốn tạo kiểu cho toàn bộ dòng, không chỉ là văn bản, vì vậy tôi xóa .console-message-textlớp. Ngoài ra, màu nền dễ chịu nhất mà tôi tìm thấy là #ffece6do lỗi, #fafad2cảnh báo và #f0f9ffbình thường.

— Matthew Clark

2

Hãy ghi nhớ biểu định kiểu này áp dụng cho tất cả các trang bạn truy cập trong Chrome, vì vậy nếu bạn xóa một lớp để giảm tính cụ thể, bạn có thể tìm thấy một trang web sử dụng các kiểu của bạn trên cửa sổ bật lên thông báo hoặc đại loại như thế.

— Charlie Schliesser

57

Các phiên bản cũ hơn của Chrome không cho phép bạn console.log()hiển thị màu cụ thể theo chương trình, nhưng việc gọi console.error()sẽ đặt Xbiểu tượng màu đỏ trên các dòng lỗi và làm cho văn bản có màu đỏ và console.warn()giúp bạn có !biểu tượng màu vàng .

Sau đó, bạn có thể lọc các mục trong bảng điều khiển với các nút Tất cả, Lỗi, Cảnh báo và Nhật ký bên dưới bảng điều khiển.

Hóa ra Fireorms đã hỗ trợ CSS tùy chỉnh cho console.logs từ năm 2010 và hỗ trợ Chrome đã được thêm vào kể từ Chrome 24.

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

Khi %cxuất hiện ở bất cứ đâu trong đối số đầu tiên , đối số tiếp theo được sử dụng làm CSS để tạo kiểu cho dòng bàn điều khiển. Đối số tiếp theo được nối (như đã luôn luôn như vậy).

— josh3736
nguồn

2

Liệu nó có phải là đối số đầu tiên? Mã này sẽ không hoạt động ... return console.log ("% s", tin nhắn, "% c% s", "color: #BBBBBB", get_type (message));

— Michael Minter

2

"Khi% c xuất hiện ở bất cứ đâu trong đối số đầu tiên, đối số tiếp theo được sử dụng làm CSS để tạo kiểu cho dòng bàn điều khiển" Correction "Khi% c xuất hiện ở bất kỳ đâu trong bất kỳ đối số nào, đối số tiếp theo được sử dụng làm CSS để tạo kiểu cho dòng giao diện điều khiển đầu ra theo% ceg i.imgur.com/msfPNbK.png

— ChrisJJ

49

Tôi đã viết template-colors-web https://github.com/icodeforlove/Console.js để cho phép chúng tôi làm điều này dễ dàng hơn một chút

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

Ở trên sẽ cực kỳ khó thực hiện với console.log mặc định .

Đối với một bản demo tương tác trực tiếp bấm vào đây .

— Chad Scira
nguồn

2

Không giống như hầu hết các giải pháp khác, điều này cũng cho phép tô màu các biến chứa chuỗi.

— tối đa pleaner

2

Trên thực tế, điều này không thực sự được hỗ trợ, ví dụ bạn hiện không thể làm điều này console.log(`this is inline ${'red'.red.bold} and this is more text`.grey), kiểu dáng sẽ dừng lại sau món đồ được tạo kiểu đầu tiên

— Chad Scira

2

Mặc dù không có màu "nội tuyến", nó vẫn có thể làm những việc như var txt = "asd"; txt.redhoặc `${txt}`.red + `${txt}`.green. Tôi không biết một cách để làm điều này với %ccú pháp mà những người khác đang đề xuất. Vì vậy, cảm ơn bạn đã xây dựng thư viện

— max pleaner

1

Làm thế nào để bạn phát hiện hỗ trợ cho tính năng này trong trình duyệt, tôi đã xem mã cho thư viện của bạn và không thể phát hiện ra nó? stackoverflow.com/questions

— 40428239 / từ

1

@MuhammadRehanSaeed Trình duyệt phát hiện

— Chad Scira

32

Cập nhật:

Tôi đã viết một thư viện JavaScript vào năm ngoái cho chính mình. Nó chứa các tính năng khác, ví dụ như tính chi tiết cho nhật ký gỡ lỗi và cũng cung cấp phương thức nhật ký tải xuống xuất tệp nhật ký. Hãy xem thư viện JS Logger và tài liệu của nó.

Tôi biết Sẽ hơi muộn để trả lời nhưng khi OP yêu cầu nhận thông báo màu tùy chỉnh trong bảng điều khiển cho các tùy chọn khác nhau. Mọi người đều chuyển thuộc tính kiểu màu trong mỗi console.log()câu lệnh gây nhầm lẫn cho người đọc bằng cách tạo ra sự phức tạp trong mã và cũng gây hại cho giao diện và cảm nhận chung của mã.

Những gì tôi đề nghị là viết một hàm với một vài màu được xác định trước (ví dụ: thành công, lỗi, thông tin, cảnh báo, màu mặc định) sẽ được áp dụng trên cơ sở tham số được truyền cho hàm.

Nó cải thiện khả năng đọc và giảm độ phức tạp trong mã. Nó quá dễ dàng để duy trì và mở rộng hơn nữa theo nhu cầu của bạn.

Đưa ra dưới đây là một hàm JavaScript mà bạn phải viết một lần và hơn là sử dụng nó nhiều lần.

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

Đầu ra:

Màu mặc định là màu đen và bạn không phải chuyển bất kỳ từ khóa nào làm tham số trong trường hợp đó. Trong các trường hợp khác, bạn nên vượt qua success, error, warning, or infocác từ khóa cho kết quả mong muốn.

Đây là JSFiddle hoạt động . Xem đầu ra trong bảng điều khiển của trình duyệt.

— Suhaib Janjua
nguồn

Tôi đã nghĩ đến việc thực hiện nhiều hơn log.info("this would be green"), vv Đóng đủ.

— Kyle Baker

Thật tuyệt, nhưng hãy xem xét cách tiếp cận tiêu chuẩn đó với console.error (), console.warn (), console.info () có vẻ tốt hơn trong kịch bản này, vì nó cũng 1) cung cấp ngữ nghĩa mà chúng ta mất ở đây, cho phép lọc các thông điệp theo mức độ nghiêm trọng trong bảng điều khiển 2) sử dụng màu sắc phù hợp nhất với cấu hình của người dùng, ví dụ: trình duyệt ở chế độ tối hoặc chế độ tương phản cao

— Paweł Bulwan

console.info () và console.log () hiển thị cùng một nhật ký tiêu chuẩn và bạn không thể phân biệt bằng cách chỉ nhìn vào đầu ra. Nhưng yeah console.warn () và console.error () có thể được sử dụng để lọc tin nhắn sau này. Như OP yêu cầu; Làm thế nào để in nhật ký màu trong giao diện điều khiển. Tôi nghĩ rằng câu trả lời là tốt nhất theo câu hỏi của OP. Chúng tôi không lọc tin nhắn nhưng chúng tôi đang tập trung vào việc in nhật ký màu. Tôi thực sự đánh giá cao đề xuất của bạn và ví dụ có thể được nâng cao hơn nữa để đáp ứng yêu cầu của bạn.

— Suhaib Janjua

@SuhaibJanjua Làm thế nào để làm điều đó nhưng giữ tham chiếu số hàng tốt từ thanh tra?

— LexaGC

25

Tôi thực sự chỉ thấy điều này một cách tình cờ vì tò mò với những gì sẽ xảy ra nhưng bạn thực sự có thể sử dụng cờ màu bash để đặt màu của đầu ra trong Chrome:

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

Đầu ra:

Xem liên kết này để biết cách các cờ màu hoạt động: https://misc.flogisoft.com/bash/tip_colors_and_formatted

Về cơ bản sử dụng \x1bhoặc \x1Bthay thế \e. ví dụ. \x1b[31mvà tất cả văn bản sau đó sẽ được chuyển sang màu mới.

Tôi đã không thử điều này trong bất kỳ trình duyệt nào khác, nhưng nghĩ rằng nó đáng được đề cập.

— James Heazlewood
nguồn

3

Điều này là mát mẻ nhưng dường như là chrome / crom cụ thể. Tôi đã thử nghiệm nó trong firefox 65 nó không hoạt động

— hướng

Yeah Firefox cũng cảnh báo bạn về việc dán vào bảng điều khiển. Đối với Firefox, bạn sẽ phải sử dụng% c và kiểu.

— James Heazlewood

20

Thư viện này thật tuyệt vời:

https://github.com/adamschwartz/log

Sử dụng Markdown cho các thông điệp tường trình.

— vaughan
nguồn

Lib này cần làm việc log(true, 'this is [c="color:red"]red[c]')=>true "this is %cred%c" "color:red" ""

— bryc

20

Có một loạt các chức năng sẵn có để tô màu nhật ký giao diện điều khiển:

//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
nguồn

4

có vẻ như console.info()không còn thêm biểu tượng thông tin .. không chắc chắn khi điều này xảy ra. Bây giờ không khác gì console.log () (ít nhất là trên Chrome và 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');

— mostaha.mortazavi
nguồn

4

Hoặc console.log(color.red+' this is red color on text');như colors.red đã được chỉ định.

— vusan

6

Không làm gì trên Chrome và Safari.

— mauron85

4

@ mauron85 Không có trong câu trả lời, nhưng đó là cho Node.js.

— Gustavo Coleues

Vâng, tôi đã bối rối trong một phút ấn tượng rằng Chrome đang hỗ trợ các chuỗi thoát

— i336_

1

@ i336_ - nó hoạt động (Chrome 69 tại đây). bạn có thể khôi phục trạng thái nửa ấn tượng trước đó của mình;)

— vsync

13

Google đã ghi lại tài liệu này https://developers.google.com/web/tools/chrome-devtools/console/console-write#stomme_consoleDefput_with_css

Trình xác định định dạng CSS cho phép bạn tùy chỉnh màn hình trong bảng điều khiển. Bắt đầu chuỗi với specifier và đưa ra kiểu bạn muốn áp dụng làm tham số thứ hai.

Một ví dụ:

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

— Craig Myles
nguồn

1

"Google đã ghi lại tài liệu này cho nhà phát triển.chrom.com / devtools / docs / ." Bây giờ không có đề cập đến phong cách giao diện điều khiển ở đó.

— ChrisJJ

1

Đây là nhà phát

— triển.google.com/web/tools/chrome

9

hệ thống mẫu, hữu ích nếu bạn muốn tạo văn bản dòng đầy màu sắc mà không tạo kiểu đầy đủ cho mọi khối

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
nguồn

8

Kiểm tra này:

Hoạt ảnh trong bảng điều khiển, cộng với 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/

bạn có thể dán ASCII vào mỗi khung hình để xem hoạt hình ASCII

— Chân
nguồn

6

từ Chrome 60, họ đã loại bỏ tiện ích màu văn bản màu xanh lam trong khi viết console.info và thực hiện nhiều thay đổi trong API bảng điều khiển.

nếu bạn viết một chuỗi ký tự theo mẫu es6, sử dụng backticks `` làm định danh (được gọi là chuỗi mẫu) trong console.log () thì dưới đây có thể tô màu đầu ra của giao diện điều khiển.

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

— diEcho
nguồn

3

Để xâu chuỗi các kiểu CSS3 trải dài trên nhiều dòng, bạn có thể làm như thế này,

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

Kết quả

Tìm thêm: - https://coderwall.com/p/fskzdw/colorful-console-log

Chúc mừng.

— Anjana Silva
nguồn

3

Tôi đã viết một plugin đơn giản reallllllllllllllly cho chính mình vài năm trước:

Để thêm vào trang của bạn, tất cả những gì bạn cần làm là đặt cái này vào đầu:

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

Sau đó, trong JS:

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

Khung này có mã cho:

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

cũng như:

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

cho bất kỳ css khác. Ở trên được thiết kế với cú pháp sau:

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

— Cần cẩu
nguồn

nỗ lực vượt trội.

— dhirajforyou

2

Gần đây tôi muốn giải quyết một vấn đề tương tự và xây dựng một chức năng nhỏ để chỉ tô màu các từ khóa tôi quan tâm, có thể dễ dàng xác định bằng các dấu ngoặc nhọn xung quanh {keyword}.

Điều này làm việc như một nét duyên dáng:

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)

về mặt kỹ thuật, bạn có thể hoán đổi câu lệnh if bằng câu lệnh switch / case để cho phép nhiều kiểu dáng vì những lý do khác nhau

— Aurielle Perlmann
nguồn

2

Tôi nghi ngờ rằng bất cứ ai cũng sẽ thực sự nhìn thấy nó nhưng tôi có một giải pháp đơn giản cho những ai muốn trộn nhiều màu trong cùng một dòng:

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
nguồn

Tôi đã nhìn thấy nó, cảm ơn! Và đây là một liên kết mà sẽ cung cấp cho bạn nhiều hơn goodies như thế: Make console.log () đầu ra đầy màu sắc ... .

— Rene van der Lende

1

Thử cái này:

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

bây giờ tất cả đều như bạn muốn:

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

lưu ý: định dạng như console.log("The number = %d", 123);không bị hỏng.

— Serge
nguồn

1

Tôi đã viết một npmmô-đun cung cấp cho một khả năng để vượt qua:

Màu sắc tùy chỉnh - cho cả văn bản và nền;
Tiền tố - để giúp xác định nguồn, như[MyFunction]
Loại - như warning, success, infovà các loại tin nhắn được xác định trước khác

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

Đầu ra (với tiền tố tùy chỉnh):

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

Đầu ra (không có tiền tố tùy chỉnh):

Đầu vào :

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

Để đảm bảo người dùng sẽ không hiển thị màu không hợp lệ, tôi cũng đã viết trình xác nhận màu . Nó sẽ xác nhận màu sắc bằng name, hex, rgb, rgba, hslhoặc hslagiá trị

— Wallace Sidhrée
nguồn

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;

— người dùng10090004
nguồn

2

Mặc dù đoạn mã này có thể giải quyết vấn đề, nhưng nó không giải thích tại sao hoặc làm thế nào để trả lời câu hỏi. Vui lòng bao gồm một lời giải thích cho mã của bạn , vì điều đó thực sự giúp cải thiện chất lượng bài đăng của bạn. Hãy nhớ rằng bạn đang trả lời câu hỏi cho độc giả trong tương lai và những người đó có thể không biết lý do cho đề xuất mã của bạn.

— Luca Kiebel