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.
<script>
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');
</script>
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.
