{"id":5602,"date":"2016-07-29T04:36:53","date_gmt":"2016-07-29T04:36:53","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=5602"},"modified":"2016-07-29T14:20:42","modified_gmt":"2016-07-29T14:20:42","slug":"tips-to-effectively-use-google-chrome-developer-tool","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/tips-to-effectively-use-google-chrome-developer-tool\/","title":{"rendered":"Tips to effectively use Google chrome developer tool"},"content":{"rendered":"

Web based applications are dominating the software industry and various frameworks like Angular 2, React, polymer and Lightning are on rise. From movie Spider man, this dialogue stands very true –\u00a0With great power comes great responsibility.<\/em><\/p>\n

As a web developer, its our job to make sure the application implemented by us, stands on performance benchmark and at the same time development time is reduced. To achieve this, fast\u00a0and effective troubleshooting of web application becomes integral part of project development. One of the best tool to troubleshoot web applications are available freely –\u00a0Google chrome developer tools.<\/em><\/p>\n

In this blog post, we will uncover lots of tips and tricks about using\u00a0chrome developer tools.<\/em><\/p>\n

To launch, chrome\u00a0developer tools\u00a0<\/em>in chrome, use shortcut\u00a0ctrl+shift+I\u00a0<\/em>or\u00a0ctrl+shift+J.\u00a0<\/em>We can directly execute Javascript in chrome dev tools without creating any html or javascript file.<\/p>\n

Console API<\/h2>\n

we will start with console API of chrome developer tool first.<\/p>\n

Printing Debug statements in Javascript<\/strong><\/h3>\n

we can use various methods of console in javascript to debug our code. Previously, if we wanted to debug JavaScript, alert methods were mostly used however they were very annoying. Below code snippet shows available methods to print debug statements in chrome console.<\/p>\n

\r\n<script> \r\n\tconsole.error('Google chrome dev tools - error');\r\n\tconsole.warn('Google chrome dev tools - warn'); \r\n\tconsole.info('Google chrome dev tools - info'); \r\n\tconsole.debug('Google chrome dev tools - debug'); \r\n\tconsole.log('Google chrome dev tools - log');  \r\n<\/script>\r\n<\/pre>\n
Below is output, how its displayed in chrome<\/p>\n
\"Console.log<\/a>
Console.log levels<\/figcaption><\/figure>\n
As shown in above image, different log levels of console method printed in different color.\u00a0error\u00a0<\/em>log level even prints complete stack trace of methods showing origin of error.<\/p>\n
<\/p>\n
Assert statements<\/strong><\/h3>\n
If you are coming from Java, .net or Salesforce background, you already know importance of assertion. Luckily in chrome dev tools as well, we can use assert statement to make sure expectation of code is properly met. If assertion is true then nothing happens, however if its not true then prints stack trace of error as shown in image below<\/p>\n
\"Console.assert<\/a>
Console.assert in chrome developer tool<\/figcaption><\/figure>\n
\u00a0Grouping console log statements<\/strong><\/h3>\n
In situation, where we need to print lots of debug statements however it may be cumbersome to find intended statements in a heap of logs. Assume that we have multiple components in a page, wouldn’t it be nice, if some how we can group debug statements per components?console.group()\u00a0<\/em>method helps us to achieve this. We can give a name of group and then close it using\u00a0console.groupEnd()\u00a0<\/em>. Group of these debug statements can be expanded or collpased in console view. Below code snippet shows how to use it<\/p>\n
\r\n<script>\r\nconsole.group('Point and Click');\r\nconsole.log('Learn basics of CRM');\r\nconsole.log('Learn Workflow, process builder');\r\nconsole.log('Learn Approval Process');\r\nconsole.log('Learn Reporting');\r\nconsole.groupEnd();\r\n\r\nconsole.group('Coding');\r\nconsole.log('Understand OOPs');\r\nconsole.log('Learn Apex');\r\nconsole.log('Learn Trigger');\r\nconsole.log('Learn HTML, Javascript');\r\nconsole.log('Learn Lightning Components');\r\nconsole.groupEnd();\r\n<\/script>\r\n<\/pre>\n
\"Grouping<\/a>
Grouping in chrome dev tools<\/figcaption><\/figure>\n
\u00a0Printing object using console.dir<\/strong><\/h3>\n
We can print object in console using console.log, however it will print in string format. There is one utility method console.dir,<\/em> specially to print object in directory structure. It makes object more\u00a0readable.<\/p>\n
Example:<\/p>\n
\r\n<script>  \r\nvar person = { name : 'John Doe', company : 'Cognizant', country : 'India'  };\r\nconsole.log(person);\r\nconsole.dir(person); \r\n<\/script>\r\n<\/pre>\n
Output:<\/p>\n
\"console.dir\"<\/a>
usage of console.dir<\/figcaption><\/figure>\n
Calculate time taken to execute code<\/strong><\/h3>\n
We can use console.time to calculate time taken by some piece of code. Time label needs to be supplied in\u00a0console.time\u00a0<\/em>and\u00a0console.timeEnd.<\/em><\/p>\n
Example :<\/p>\n
 \r\n<script>  \r\nconsole.time('Object initialization');\r\nvar person = { name : 'John Doe', company : 'Cognizant', country : 'India'  };\r\nconsole.log(person);\r\nconsole.dir(person);\r\nconsole.timeEnd('Object initialization');\r\n<\/script>\r\n<\/pre>\n
Output:<\/p>\n
\"Usage<\/a>
Usage of console.time<\/figcaption><\/figure>\n
Formatting console.log<\/strong><\/h3>\n
Console logging methods can also be formatted using %s for string, %i for integers, just like printf method of C language.<\/p>\n
Example :<\/p>\n
\r\n<script>\r\nvar apiV = 36;\r\nvar tech = 'Apex';\r\nconsole.log('%s is running on version %i',tech,apiV);\r\n<\/script>\r\n\r\nOutput : Apex is running on version 36\r\n<\/pre>\n
We can also use %c, to apply css style on console log statements\u00a0as discussed in this article<\/a>.<\/p>\n
Clear method<\/strong><\/h3>\n
If there are lots of information available on console and we want to rid off it, then clear()<\/em> method can be executed on console to clean console panel.<\/p>\n
Console.table<\/h3>\n
This command can be used to display list of any object in tabular format. Consider below\u00a0array of object in JavaScript code<\/p>\n
\r\n<script>\r\nvar persons = [\r\n{ name : 'Marthas', company : 'Cognizant', country : 'USA' },\r\n{ name : 'John Doe', company : 'Cognizant', country : 'India' },\r\n];\r\n<\/script>\r\n<\/pre>\n
Below image shows two outputs. one using simple console.info method and other using table method.<\/p>\n
\"using<\/a>
using table to show array of data in tabular format<\/figcaption><\/figure>\n
Command line API<\/h2>\n
Next, talk about Command line API supported by chrome developer tool. Using Command line API, we can execute JavaScript in context of current page or monitor events. We can execute any method declared on web page or check variable values.<\/p>\n
Selectors<\/h3>\n
There are basically three types of selectors available to use in chrome dev tools, its syntax might look familiar to you if you have used JQuery in past. We can use element Id, class or tag names to select elements, all CSS selectors will work.<\/p>\n
    \n
  1. $(Selection)<\/li>\n
  2. $$(Selection)<\/li>\n
  3. $x(xpath)<\/li>\n<\/ol>\n
    Consider below html example<\/p>\n
    \"HTML<\/a>
    HTML code snippet for selectors<\/figcaption><\/figure>\n
    We can use selectors, as shown in below gif image<\/p>\n
    \"Selectors<\/a>
    Selectors in Chrome developer tools<\/figcaption><\/figure>\n
    Inspect<\/h3>\n
    We can combine\u00a0selector\u00a0<\/em>and\u00a0inspect\u00a0<\/em>method together to inspect any element in web page as shown in below image<\/p>\n
    \"Inspect<\/a>
    Inspect element in Chrome dev tools<\/figcaption><\/figure>\n
    Monitor events<\/h3>\n
    We can monitor any supported events in chrome using\u00a0monitorEvents\u00a0<\/em>methods. Let’s assume, we need to monitor click event on first\u00a0p\u00a0<\/em>tag in document. Below image shows, output when we click on first paragraph element in web page.\u00a0monitorEvents\u00a0<\/em>takes first parameter as selector and other parameters as event types to be monitored.<\/p>\n
    \"Monitor<\/a>
    Monitor events in chrome dev tools<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
    While building Lightning Components in Salesforce, how to effectively use Google chrome developer tools to troubleshoot and analyze issue<\/p>\n","protected":false},"author":1,"featured_media":5633,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":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":""},"categories":[19],"tags":[323,109],"class_list":["post-5602","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webtech","tag-chrome","tag-google"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/07\/Chrome-Dev-tools.png?fit=600%2C400&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":5259,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/change-style-of-console-log-debug-statements-in-javascript\/","url_meta":{"origin":5602,"position":0},"title":"Change Style of Console.log debug statements in JavaScript","author":"Jitendra","date":"January 30, 2016","format":false,"excerpt":"Applying css style to console.log statements in JavaScript","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Style Console.log in Salesforce Lightning Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Style-Console.log-in-Salesforce-Lightning.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Style-Console.log-in-Salesforce-Lightning.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Style-Console.log-in-Salesforce-Lightning.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Style-Console.log-in-Salesforce-Lightning.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":4559,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/top-google-chrome-extensions-for-salesforce\/","url_meta":{"origin":5602,"position":1},"title":"Top Google chrome extensions for Salesforce","author":"Jitendra","date":"June 12, 2015","format":false,"excerpt":"Checkout if your favorite Google Chrome extension made it in Top extensions for Salesforce","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Dev tools - Chrome Extension","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/06\/Salesforce-Devtools-Chrome-Extension.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/06\/Salesforce-Devtools-Chrome-Extension.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/06\/Salesforce-Devtools-Chrome-Extension.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":30599,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/omniscript-debugging-methods-complete-developer-guide\/","url_meta":{"origin":5602,"position":2},"title":"OmniScript Debugging Methods","author":"Jitendra Zaa","date":"November 6, 2025","format":false,"excerpt":"Comprehensive guide to all OmniScript debugging methods in Salesforce OmniStudio. Covers built-in tools, browser debugging, Chrome extensions, Apex debugging, and third-party solutions.","rel":"","context":"In "Apex"","block_context":{"text":"Apex","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/apex\/"},"img":{"alt_text":"OmniScript Debugging Methods","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2025\/12\/OmniScript-Debugging-Methods.png?fit=1200%2C354&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2025\/12\/OmniScript-Debugging-Methods.png?fit=1200%2C354&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2025\/12\/OmniScript-Debugging-Methods.png?fit=1200%2C354&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2025\/12\/OmniScript-Debugging-Methods.png?fit=1200%2C354&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2025\/12\/OmniScript-Debugging-Methods.png?fit=1200%2C354&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":4721,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/list-of-ide-available-for-salesforce-coding\/","url_meta":{"origin":5602,"position":3},"title":"List of IDE available for Salesforce coding","author":"Jitendra","date":"July 17, 2015","format":false,"excerpt":"List of all major IDE like Eclipse, Welkins, Cloud9 etc to code Apex, Visualforce, Trigger and lightning components in Salesforce","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Cloud9 IDE","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/Salesforce-Cloud9-IDE.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/Salesforce-Cloud9-IDE.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/Salesforce-Cloud9-IDE.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/Salesforce-Cloud9-IDE.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/Salesforce-Cloud9-IDE.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":353,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/difference-between-sandbox-and-developer-edition-in-salesforce\/","url_meta":{"origin":5602,"position":4},"title":"Difference between Sandbox and developer edition in Salesforce","author":"Jitendra","date":"June 27, 2010","format":false,"excerpt":"Explains the basic difference in Sandbox and developer edition of Salesforce","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4698,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/my-favorite-appexchange-products\/","url_meta":{"origin":5602,"position":5},"title":"Top Salesforce tools , AppExchange and Heroku applications","author":"Jitendra","date":"July 1, 2015","format":false,"excerpt":"List of all my favorite Appexchange products, Heroku applications , Git repository , Free Source codes and some important Blog posts in Salesforce","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Top Salesforce Tools","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/Top-Salesforce-Tools.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/Top-Salesforce-Tools.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/Top-Salesforce-Tools.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/Top-Salesforce-Tools.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/Top-Salesforce-Tools.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5602","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=5602"}],"version-history":[{"count":21,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5602\/revisions"}],"predecessor-version":[{"id":5636,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5602\/revisions\/5636"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/5633"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=5602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=5602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=5602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}