Web development is more than just writing codes. Excellent debugging is imperative if you are to be efficient and faster at providing value through your codes. However, it is difficult to debug as efficiently if you do not know your tools. These tools include the all popular Chrome Developer Tools, Firefox developer tools and other browsers who while they may not match Chrome’s high standards do enable you to test and debug.
Table of Contents
Table View for Objects
‘Debugger’ is a great tool for debugging and allows you to add breakpoints and conditional breakpoints by using debugger statement. This means that Chrome stops at the statement when executing the code.
Chrome Developer Tools is especially great at this and allows you to pose the execution of your code whenever you throw an exception. This means that you have a chance to view the state of your code at the moment of creation of the Error object.
Optimize for Size
It is neither practical nor feasible to try out the sizes of devices using different types of mobile devices as the samples. To beat this, you can resize your viewpoint by clicking on the ‘toggle device mode’ button on your Chrome inspector.
Firebug a Firefox debugging tool and Chrome Developer Tools helps you find your DOM elements more quickly by providing you with console bookmarks for the DOM elements based on when you last clicked them.
Call Stack Access
In Chrome Dev Tools, you can access the call stack as it is displayed below the Watch expressions in the Sources tab. Using ‘console.trace’ as the command will allow you to log a stack trace which is like a menu for your functions allowing you to see what happened and where in your code without combing through a mountain of code. This helps in easy Java application server debugging.
Using ‘console.timeEnd’ and ‘console.time’ commands, you can tell the exact length of time something has taken to execute therefore, enabling you to handle slow loops.
Find a Function Quickly for Debugging
To do this, you can insert a breakpoint before a function making it stop execution before the function is called to quick-find it.
The Snippets sub-tab on the Sources Tab stores code snippets for easier debugging instead of constantly using the console to do this.
Track Specific Function Calls
The Chrome console is a debugger magic box and allows you to watch specific functions such that each time it is called, it is logged with those values and arguments it is passed in.
Node Change Break
Chrome can allow you to pause on DOM element changes and monitor its attributes.
Quick Access of Console Elements
The ‘querySelector’ found in the console returns the first or all of the matches of the CSS selector. And hence, saving a frequently used element as a variable is better.