Colors in JavaScript console

Question

Can Chrome s built-in JavaScript console display colors   I want errors in red  warnings in orange and console log s in green  Is that possible

User · Answer

x000D   x000D  const coloring   fn   gt     background  color    white       gt      text    gt  fn   c  text join         color   color  background   background     const colors       primary    007bff     success    28a745     warning    ffc107     danger    dc3545     info    17a2b8      const dir    key       value         gt      logs primary              start   key                     console dir value     logs primary              end   key                      const logs   Object keys colors     reduce  prev  curr    gt        prev   curr   coloring console log    background  colors curr           dir          logs success  hello succes      logs warning  hello fail    x000D   x000D   x000D

User · Answer

I wrote a reallllllllllllllllly simple plugin for myself several years ago   To add to your page all you need to do is put this in the head     lt script src  https   jackcrane github io static cdn jconsole js  type  text javascript  gt    Then in JS   jconsole color red log  hellllooo world      The framework has code for   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      as well as   jconsole css log  hello world   color red       for any other css  The above is designed with the following syntax   jconsole css log message to log css code to style the logged message

User · Answer

Google has documented this https   developers google com web tools chrome-devtools console console-write styling console output with css     The CSS format specifier allows you to customize the display in the console  Start the string with the specifier and give the style you wish to apply as the second parameter    One example   console log   cThis will be formatted with large  blue text    color  blue  font-size  x-large

User · Answer

I doubt that anyone will actually see it but I have a simple solution for those who want to mix several colors in the same line   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

User · Answer

I recently wanted to solve for a similar issue and constructed a small function to color only keywords i cared about which were easily identifiable by surrounding curly braces  keyword    This worked like a charm   var text    some text with some  special  formatting on this  keyword  and this  keyword   var splitText   text split       var cssRules       var styledText         each splitText   split    gt        if        test split             cssRules push  color blue          else           cssRules push  color inherit             styledText      c  split        console log styledText      cssRules      technically you could swap out the if statement with a switch case statement to allow multiple stylings for different reasons

User · Answer

This library is fantastic   https   github com adamschwartz log  Use Markdown for log messages

User · Answer

Here is an extreme example with rainbow drop shadow    x000D   x000D  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    x000D   x000D  console log   cExample  s   css   all code runs happy    x000D   x000D   x000D

User · Answer

from Chrome 60  they removed the facility of blue text color while writing console info and does many much changes in console API   if you write a string literal in the es6 pattern  using the backticks    as the identifier  called as template string   in console log   then below way can colorize the console output   console log   cToday date  gt  c  new Date      color  F74C2F    color green       output  Today date  in red color    gt  Date  in green color

User · Answer

Update   I have written a JavaScript library last year for myself  It contains other features e g verbosity for debug logs and also provides a download logs method that exports a log file  Have a look at the JS Logger library and its documentation     I know It s a bit late to answer but as the OP asked to get custom color messages in console for different options  Everyone is passing the color style property in each console log   statement which confuses the reader by creating complexity in the code and also harm the overall look  amp  feel of the code   What I suggest is to write a function with few predetermined colors  e g success  error  info  warning  default colors  which will be applied on the basis of the parameter passed to the function    It improves the readability and reduces the complexity in the code  It is too easy to maintain and further extend according to your needs     Given below is a JavaScript function that you have to write once and than use it  again and again   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       Output       The default color is black and you don t have to pass any keyword as parameter in that case  In other cases  you should pass success  error  warning  or info keywords for desired results   Here is working JSFiddle  See output in the browser s console

User · Answer

There are a series of inbuilt functions for coloring the console log     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

User · Answer

I wrote a npm module that gives one the possibility to pass    Custom colors - to both text and background  Prefixes - to help identify the source  like  MyFunction  Types - like warning  success  info and other predefined message types   https   www npmjs com package console-log-plus  Output  with custom prefixes      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        Output  without custom prefixes      Input   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        To make sure the user won t render an invalid color  I wrote a color validator as well  It will validate colors by name  hex  rgb  rgba  hsl or hsla values

User · Answer

To chain CSS3 styles which spans across multiple lines  you can do like this  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    Result  Find more  - https   coderwall com p fskzdw colorful-console-log Cheers

User · Answer

In Chrome  amp  Firefox   31  you can add CSS in console log messages   x000D   x000D  console log   c Oh my heavens      background   222  color   bada55    x000D   x000D   x000D    The same can be applied for adding multiple CSS to same command   References  MDN  Styling console output Chrome  Console API Reference

User · Answer

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

User · Answer

I create now the log-css js https   codepen io luis7lobo9b pen QWyobwY    log-css js v1 const log   console log bind    const css   function item  color     fff   background    none   fontSize    12px   fontWeight   700  fontFamily        return    c     item         color     color     background     background     font-size     fontSize     font-weight     fontWeight    fontFamily     font-family     fontFamily               example log    css  Lorem ipsum dolor sit amet  consectetur adipisicing elit     rebeccapurple     000    14px

User · Answer

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

User · Answer

template system  useful if you want to create colorful line text without creating full style for every block  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

User · Answer

Emoji You can use colors for text as others mentioned in their answers to have colorful text with a background or foreground color  But you can use emojis instead  for example  you can use   for warning messages and  for error messages  Or simply use these notebooks as a color   x000D   x000D  console log    error message    console log    warning message    console log    ok status message    console log    action message    console log    canceled status message    console log    Or anything you like and want to recognize immediately by color    x000D   x000D   x000D    Bonus  This method also helps you to quickly scan and find logs directly in the source code  But Linux default emoji font is not colorful by default and you may want to make them colorful  first

User · Answer

Check this out   Animation in console  plus CSS   function       var frame   0    var frames          This        is        SPARTA                  SPARTA                  SPARTA                  SPARTA                  SPARTA                  SPARTA          var showNext        gt        console clear        console log          c           background  red  color  white  font-size  15px  padding  3px 41               console log          c   frames frame            background  red  color  white  font-size  25px  padding  3px 40               console log          c           background  red  color  white  font-size  15px  padding  3px 41               setTimeout        showNext        frames frame       SPARTA      frames frame            100   1500               next frame and loop     frame        if  frame  gt   frames length          frame   0               showNext            https   jsfiddle net a8y3jhfL   you can paste ASCII in each frame to watch an ASCII animation

User · Answer

You can try  console log  quot  cI am red  cI am green quot    quot color  red quot    quot color  green quot

User · Answer

Older versions of Chrome do not allow you to get console log  s to show in a specific color programmatically  but calling console error   will put a red X icon on error lines and make the text red  and console warn   gets you a yellow   icon   You can then filter console entries with the All  Errors  Warnings  and Logs buttons beneath the console     It turns out Firebug has supported custom CSS for console logs since 2010 and Chrome support has been added as of Chrome 24   console log   c Oh my heavens      background   222  color   bada55                more text      When  c appears anywhere in the first argument  the next argument is used as the CSS to style the console line   Further arguments are concatenated  as has always been the case

User · Answer

Try this   var funcNames     log    warn    error    var colors     color green    color orange    color red     for  var i   0  i  lt  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              now they all are as you wanted   console log  Log is green     console warn  Warn is orange     console error  Error is red       note  formatting like console log  The number    d   123   is not broken

User · Answer

I actually just found this by accident being curious with what would happen but you can actually use bash colouring flags to set the colour of an output in Chrome   console log   x1b 36m Hello  x1b 34m Colored  x1b 35m World     console log   x1B 31mHello x1B 34m World    console log   x1b 43mHighlighted      Output       See this link for how colour flags work  https   misc flogisoft com bash tip colors and formatting  Basically use the  x1b or  x1B in place of  e  eg   x1b 31m and all text after that will be switched to the new colour   I haven t tried this in any other browser though  but thought it worth mentioning

User · Answer

I ve discovered that you can make logs with colors using ANSI color codes  what makes easier to find specific messages in debug  Try it  console log   quot  u001b 1 31m Red message quot     console log   quot  u001b 1 32m Green message quot     console log   quot  u001b 1 33m Yellow message quot     console log   quot  u001b 1 34m Blue message quot     console log   quot  u001b 1 35m Purple message quot     console log   quot  u001b 1 36m Cyan message quot

User · Answer

I wrote template-colors-web https   github com icodeforlove Console js to allow us to do this a bit easier  console log c red   c green    blue  bold  blue   green  red     The above would be extremely hard to do with the default console log   For a live interactive demo click here

User · Answer

I created a package for the same  cslog  Install it with npm i cslog  Use It like this import log from  cslog   log h2  quot This is heading 2 quot   log p  quot This is colored paragraph quot   log d person   quot Person Info quot    You can give your custom colors as well  here

User · Answer

If you want to color your terminal console  then you can use npm package chalk npm i chalk

User · Answer

You can use a custom stylesheet to color your debugger   You can put this code in C  Documents and Settings  lt User Name gt  Local Settings Application Data Google Chrome User Data Default User StyleSheets Custom css if you are in WinXP  but the directory varies by OS    console-error-level  console-message-text      color  red      console-warning-level  console-message-text       color  orange      console-log-level  console-message-text       color green

[javascript] Colors in JavaScript console

Examples related to javascript

Examples related to google-chrome

Examples related to console

Examples related to google-chrome-devtools