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.
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:
- %c%s – placeholder saying CSS and string will be passed
- style – style to be applied in debug output
- 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.
Leave a Reply