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.
These browsers include but are not limited to Safari and Internet Explorer 8. Therefore, even with JavaScript’s reputation as having cross-browser problems. And being a tough nut to crack when it comes to debugging code. These tips and tricks will ensure that you resolve bugs faster across multiple inspectors.
-
Table View for Objects
When you are writing JavaScript code, the set of objects may become quite complex and tabulating them using console.log or ‘console.table’ tools will make it easier to scroll through them and clearly view the objects involved.
-
Adding Breakpoints
‘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.
-
Exceptions Pause
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 the 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.
-
DOM Elements
Firebug a Firefox debugging tool and Chrome Developer Tools help 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.
-
Auditing
Just like an audit of a business’s transactions enables you to see its performance so do performance audit tools in debugging JavaScript. The audit tab on Chrome Developer Tools allows you to detect under-optimization for your website and hence, adjust accordingly.
-
Unminifying Code
Chrome (Pretty Print button) allows you to minify your JavaScript file to become friendlier for human eye-consumption allowing you to read it easily and see what is happening.
-
Benchmarking Loops
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.
-
Helpful Snippets
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.