Useful techniques for debugging code using Chrome DevTools

Post Editor

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

4 min read
post

Useful techniques for debugging code using Chrome DevTools

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

post
post
4 min read

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)
Content imageContent image

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).

Content imageContent image
See line below the Arrow 

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
Content imageContent image
Right click and Select highlighted option to Store as variable

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:

Content imageContent image
use COPY method to copy data to Clipboard
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.

Content imageContent image
Screenshot from Network Tab

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.

Content imageContent image
  • 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
Content imageContent image
Toggle this option if required

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 -

Content imageContent image

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)
Link to this section

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

Copy Node path 
Content imageContent image

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:

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

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.

Share

About the author

author_image
author_image

About the author

Pardeep Jain

About the author

author_image
Looking for a JS job?
Job logo
Full-Stack JavaScript Developer (Iv)

PSR

Ukraine
Remote
$42k - $72k
Job logo
Fullstack JavaScript Developer

Software Rocket

Ukraine
Remote
$48k - $72k
Job logo
Middle\Senior Fullstack JavaScript ( Node.js) Developer

SoftWare Rocket

Ukraine
Remote
$48k - $72k
Job logo
Senior Front End React JavaScript Developer

Stellar Software

United States
Remote
$70k - $120k
More jobs

Featured articles