While building Lightning Components in Salesforce, how to effectively use Google chrome developer tools to troubleshoot and analyze issue
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.
we will start with console API of chrome developer tool first.
console.error('Google chrome dev tools - error');
console.warn('Google chrome dev tools - warn');
console.info('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
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.
Recently, I noticed something amazing in Facebook console when I pressed “Ctrl+Shift+J” (Developer tools) as shown in below image.
Checkout if your favorite Google Chrome extension made it in Top extensions for Salesforce
1. Salesforce Developer Tool Suite
First in my list is “Salesforce Developer Tool Suite” by concret.io.
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.
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.