Change Style of Console.log debug statements in JavaScript

Applying css style to console.log statements in JavaScript

Most of web developers or Salesforce Lightning Component developers are working on JavaScript. If they run into any issue and in need of debugging mechanism then Console.log is always there to rescue. Imagine your application has many debug statements and some of them are very important for problem solving, wouldn’t it be nice, if those statements can stand out from others ?

Recently, I noticed something amazing in Facebook console when I pressed “Ctrl+Shift+J” (Developer tools) as shown in below image.

Changed Style of Console.log in Facebook
Changed Style of Console.log in Facebook

As we can see, text “Stop” has bigger font and red color followed by instruction which again has different style than normal console.log statements.

If Facebook can do it, then we can. When I tried to investigate, came to know that we can apply style in console.log and supported by Google Chrome and Mozilla. It can be done using below syntax

console.log(‘%c%s’ , ‘color:red;font-size:2em’ , ‘I am debug text in JavaScript’);

Syntax:

  1. %c%s – placeholder saying CSS and string will be passed
  2. style – style to be applied in debug output
  3. debug text – actual text to be displayed

Lightning Component in Salesforce can have JavaScript controller. Below image shows how “developer view” of chrome shows output of console.log in different style.

Style Console.log in Salesforce Lightning Component
Style Console.log in Salesforce Lightning Component

Related posts

2 thoughts on “Change Style of Console.log debug statements in JavaScript”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.