QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads JavaScript Change Console Log Color

JavaScript Change Console Log Color

In this tutorial I will show you the easiest way to style output string of JavaScript browser console.

The first parameter of console.log() may contain format specifiers(a string token composed of the % sign followed by a letter that indicates the formatting to be applied). And then we can provide a comma seperated list of values for the format specifiers serially.

One of the format specifier is %c which formats the output string according to CSS styles you provide.

Here is example code on how to style

console.log("%c QNimate is Awesome", "color: green; font-style: italic; font-size: 40px");

Here is how it looks in console screen

Screen Shot 2015-02-24 at 8.33.23 pm

If you want to log error message, warning message or some extra information then instead of styling the color its preferred to use console.error(), console.warning() and console.info() respectively.

Feb 24, 2015Narayan Prusty
Change Position of WordPress Dashboard WidgetCreating JavaScript Modules

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

7 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Add a New Feed Format Type to WordPress
  • CSS3 Text And Box Shadows
  • Creating A Simple Backdrop Effect
  • Generating Random Color’s In JavaScript
  • Adding Buttons to WordPress Visual Editor
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license