Tips to effectively use Google chrome developer tool

Chrome Dev tools

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 – With great power comes great responsibility.

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 and effective troubleshooting of web application becomes integral part of project development. One of the best tool to troubleshoot web applications are available freely – Google chrome developer tools.

In this blog post, we will uncover lots of tips and tricks about using chrome developer tools.

To launch, chrome developer tools in chrome, use shortcut ctrl+shift+I or ctrl+shift+J. We can directly execute Javascript in chrome dev tools without creating any html or javascript file.

Console API

we will start with console API of chrome developer tool first.

Printing Debug statements in Javascript

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.

	console.error('Google chrome dev tools - error');
	console.warn('Google chrome dev tools - warn');'Google chrome dev tools - info'); 
	console.debug('Google chrome dev tools - debug'); 
	console.log('Google chrome dev tools - log');  

Below is output, how its displayed in chrome

Console.log levels
Console.log levels

As shown in above image, different log levels of console method printed in different color. error log level even prints complete stack trace of methods showing origin of error.

Change Style of Console.log debug 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

Top Google chrome extensions for Salesforce

1. Salesforce ORGanizer by Enrico

The ORGanizer Chrome Extension [BETA] lets you forget about your® username and passwords and help you to recognise® tabs on your browser.

salesforce chrome extension organizer
salesforce chrome extension organizer

With Salesforce ORGanizer you can:

  • Store your frequently used accounts (basic encryption for password, details on the guide): username / password / login url / landing page
  • Login an account on a new tab, window and window on incognito mode or get the full login URL for other browsers
  • Change an ORG tab and title to instantly recognize which tab belongs to which ORG
  • Use the built in Quick Link tool to quickly access your most used standard Salesforce links
  • Create your personal ORG’s quick link library to handle special links
  • Use the Quick Links tool to make a global search or open a custom relative link (e.g. from a copied Salesforce ID) or login to another ORG
  • Use the Quick Console right inside your Salesforce tab to have quick access to describe manager, queries, execute anonymous and other handy tools

download it from here.

2. Salesforce DevTools

Salesforce Dev tools - Chrome Extension
Salesforce Dev tools – Chrome Extension

Salesforce DevTools is a simple but powerful developer chrome extension for doing the below things :

  • Salesforce data modal (ERDs) generator (My Favorite)
  • Powerful Apex debug log viewer
  • Easy export definition of objects to Excel file
  • Display fields API name on Salesforce object detail page
  • Quick generate Apex code / SOQL
  • Quick access to new record page, list page and object setting page of any object
  • All Check / Select on profile edit page and field permissions edit page.

download it from here.

3. Salesforce Developer Tool Suite by

Does it takes a lot to view debug logs i.e. via setup area or dev console. This extension is an attempt to make this use case simple, by making debug logs visible in 2 clicks, without leaving the current Salesforce tab. Plus, you get a better hierarchical view of debug logs, which are better to analyse.

I have lots of expectation from this extension as this is the one of extension which takes feedback actively (You can find discussion tab just inside app) and frequently releases new capabilities. More features, like Execute Anonymous, Code Coverage, Test Cases are in pipe, will be released soon.

Chrome extension - Salesforce Developer Tool Suite
Chrome extension – Salesforce Developer Tool Suite

install it from here. you can find more about this extension on company blog page.

4. Salesforce Navigator

Second in my list is “Salesforce Navigator” and I cant live without it a single day. On average, it saves more than 50% of my clicks needed for administration. My shortcut for this utility is “Ctrl + Alt + Space” and I guess this most used combination on my system. Using this utility, you can directly navigate to any setup page like Object, Apex class, Pages, Workflow rule etc.

Salesforce Navigator - Google Chrome extension
Salesforce Navigator – Google Chrome extension

install it from here.