Useful techniques for debugging code using Chrome DevTools

In every frontend developer’s life browser takes a very important role. From playing with webpage to debugging, analytics, page speed optimisation, CSS customisation, and more.

Once in a lifetime, everyone gets stuck with how to debug problem which took lots of time, to check the network request/response, to pause and continue code at some point of time.

In this article, I will explain my learning so far related to Chrome DevTools, which includes some really handy tips for easy debugging.

The BreakPoint on Attribute Change (Template/DOM)

There are cases when you need to add a breakpoint/debugger on some DOM element which changes dynamically or conditionally.

You can simply navigate to the DOM element, right-click on it and select Break on -> Attribute modification. Some other options are also available to use.

Monitor/Unmonitor

The Monitor function is being used to detect when a specific function is being called manually or via code (dynamically).

Here is the monitoring function named checkFlag and whenever we call this function, one log entry will be generated to show with parameters.

PS: This won’t work when we refresh the page by any reason. You have to call the monitor function again to track.

To remove the monitoring function you can simply use unmonitor and pass the function name as parameter. for example —

unmonitor(checkFlag)

Store heavy JSON data and Copy to clipboard

This method is very useful when we need to copy heavy data coming from the API response.

Right click on Response from the Preview tab and choose Store as Global variable. It will store your data as a temp variable, generally with the name of temp1.

Use the copy(variableName) method to copy your selected data into the clipboard. For reference please see the below picture:

Copy Full Response data from XHR request

You can filter out the type of requests from the Network Tab in the Dev Tool of the browser. In case you need to copy the whole data of the response, right click on the request and you will find these options stated below.

How to get most out of the console logging

Almost every developer uses console.log to print data in the console, no matter what kind of data, message, object it is. Chrome utility contains a lot more methods apart from `console.log` to log data.

• Wrap & show data as an object  —  instead of simply log try to wrap variable name with {}, it will log your data in a meaningful way with the variable name.
• Use console.table(Array)to represent your array data in a tabular form.
• console.clear() to clear all the logs present.
• The console.count() method logs the number of times that this particular message has been logged into the console. [Link to doc]
• console.error() used to log message in red in color which is the perfect view for errors instead of a simple log. (likewise, you can try console.info() and console.warning())

Preserve Log

Very useful feature while debugging Form Post, Page reloading, API Debugging on navigation, etc. By enabling this feature you will be able to Preserve/See all the network request even after a page refresh, they won’t clear it out as default behaviour.

Apart from network tab logs, you can Save console logs as well. You can find out the option by clicking Gear button on console and choose Preserve Log. Refer the below screenshot -

Capture Screenshot  —  For Node, Entrie Screen, Specific Area etc

Often we need to take a screenshot of some specific area of the screen, of some specific element (DOM Node), Fullscreen, or screen. Dev tools this feature comes to rescue here. There are 4 options available to do so. Try it out.

Press CMD+P (on mac) | Ctrl+shift+P (on windows)

Copy Node path 

Sometimes it will take time to find a node path and use it in the code, here is a handy solution for you.

Right click on the element -> Click copy -> Click copy JS path

Change Dock Position  —  Shortcut

Sometimes we are too lazy to use mouse and try to perform every action using the keyboard (at least I am that kind of person). So it’s easy to change the dock position using keyboard shortcut from the source panel. See the example:

Zoom Out/In

Use cmd+/cmd - (on mac) and Ctrl+/Ctrl - (On windows) to Zoom In/Out of the DevTools Windows.

These are some time-saving Dev Tool utility hacks for you. If you know and want to add some more hack put a comment below I would be more than happy to add those.