{"id":5259,"date":"2016-01-30T05:08:44","date_gmt":"2016-01-30T05:08:44","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=5259"},"modified":"2016-01-30T05:16:38","modified_gmt":"2016-01-30T05:16:38","slug":"change-style-of-console-log-debug-statements-in-javascript","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/change-style-of-console-log-debug-statements-in-javascript\/","title":{"rendered":"Change Style of Console.log debug statements in JavaScript"},"content":{"rendered":"

Most of\u00a0web developers or Salesforce Lightning Component developers are working on JavaScript. If they run into any issue and in need of debugging mechanism\u00a0then 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 ?<\/p>\n

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

\"Changed<\/a>
Changed Style of Console.log in Facebook<\/figcaption><\/figure>\n

<\/p>\n

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.<\/p>\n

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<\/p>\n

console.log(‘%c%s’ , ‘color:red;font-size:2em’ , ‘I am debug text in JavaScript’);<\/p><\/blockquote>\n

Syntax:<\/p>\n

    \n
  1. %c%s – placeholder saying CSS and string will be passed<\/li>\n
  2. style – style to be applied in debug output<\/li>\n
  3. debug text – actual text to be displayed<\/li>\n<\/ol>\n

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

    \"Style<\/a>
    Style Console.log in Salesforce Lightning Component<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

    Applying css style to console.log statements in JavaScript<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[26,19],"tags":[323],"class_list":["post-5259","post","type-post","status-publish","format-standard","hentry","category-web","category-webtech","tag-chrome"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":5602,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/tips-to-effectively-use-google-chrome-developer-tool\/","url_meta":{"origin":5259,"position":0},"title":"Tips to effectively use Google chrome developer tool","author":"Jitendra","date":"July 29, 2016","format":false,"excerpt":"While building Lightning Components in Salesforce, how to effectively use Google chrome developer tools to troubleshoot and analyze issue","rel":"","context":"In "Web Technology"","block_context":{"text":"Web Technology","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/"},"img":{"alt_text":"Chrome Dev tools","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/07\/Chrome-Dev-tools.png?fit=600%2C400&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/07\/Chrome-Dev-tools.png?fit=600%2C400&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/07\/Chrome-Dev-tools.png?fit=600%2C400&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":5751,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/get-selected-html-or-lightning-component-in-aura-iterator\/","url_meta":{"origin":5259,"position":1},"title":"Get Selected HTML or Lightning component in Aura Iterator","author":"Jitendra","date":"September 28, 2016","format":false,"excerpt":"How to detect event from Lightning Component and HTML5 components in Aura Iterator","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Get selected item in aura iterator component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Get-Selected-Item-from-Aura-Iterator-Component-in-Lightning.gif?fit=548%2C432&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Get-Selected-Item-from-Aura-Iterator-Component-in-Lightning.gif?fit=548%2C432&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Get-Selected-Item-from-Aura-Iterator-Component-in-Lightning.gif?fit=548%2C432&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":4788,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-radar-chart-lightning-component\/","url_meta":{"origin":5259,"position":2},"title":"Salesforce Lightning Component – Radar Chart","author":"Jitendra","date":"August 29, 2015","format":false,"excerpt":"How to create Radar chart using Lightning Component in Salesforce with the help of Chart.js library","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Lightning Component for Radar Chart","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/08\/GIF-Radar-Chart.gif?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":6880,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/get-current-user-id-in-salesforce\/","url_meta":{"origin":5259,"position":3},"title":"Get Current User Id in Salesforce","author":"Jitendra","date":"February 2, 2019","format":false,"excerpt":"How to get Current Logged in user Id in Apex, Visualforce, Lightning Component and Formula fields in Salesforce","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2499,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/getting-started-with-apex-debug-logs-in-salesforce\/","url_meta":{"origin":5259,"position":4},"title":"Getting started with Apex debug logs in salesforce","author":"Jitendra","date":"November 26, 2011","format":false,"excerpt":"Introduction to debug logs in salesforce with step by step procedure and screenshot, Difference between Debug log and System log in Salesforce","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Debug Logs in Monitoring section of Administration setup - salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/11\/Debug-Logs-in-Monitoring-section-of-Administration-setup-salesforce.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":5970,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/generic-and-responsive-table-component-in-salesforce-lightning\/","url_meta":{"origin":5259,"position":5},"title":"Generic and Responsive Table Component in Salesforce Lightning","author":"Jitendra","date":"March 31, 2017","format":false,"excerpt":"Complete Source code to create generic and responsive Table component in Salesforce Lightning","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"JSON format for responsive datagrid Lightning component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/03\/JSON-format-for-responsive-datagrid-Lightning-component.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=5259"}],"version-history":[{"count":5,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5259\/revisions"}],"predecessor-version":[{"id":5266,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5259\/revisions\/5266"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=5259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=5259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=5259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}