Debugging JavaScript applications on chrome

I have been using chrome developer tools for the last 4 years to debug frontend applications. Hope I will be able to give a good overview around debugging frontend applications. :)

Use F12 to open chrome dev tools.

There are 10+ tabs on the dev tools — I’ll try to cover the ones which we actually need in day to day debugging.

1. Element — This is mainly focused on how the UI looks. Clicking on the UI shows the HTML code block which was used to design the UI part .

See the screenshot below — it points to a particular place on the UI , and reveals the HTML code in dev tools.

2. Console — Here you can run your javascript code. All the print statements including warnings and errors are shown on this tool.

3. Sources — This gives you access to all the files that are used in building the application. Generally you would not find the code for application when companies go live and deploy it on production. What we see in bundle minified files. However when developers work on an application, they can start the application locally and debug.

4. Network — Here we can see all of the requests for the files required to load a web page.

5. Application — Gives you a viewing area where one can see all the local/session data and cookies stored in the browser for smooth sailing of an application. As we know http is stateless which means that requests are independent of each other — so it should have enough information to recognize individual requests. All these information like tokens are found in the application tab.

Steps to debug a frontend application -

1. Open your chrome dev tools (F12)
2. Go to sources tab and find your file or Press Ctrl + G and type your file name
3. Place your debug points by clicking on lines . On the right side, there is a panel which shows all debug points placed.

4. The below picture gives more details on the usage of buttons while debugging :

That’s it, reload your page and start debugging.

On the above picture we see watch, scope, call stack panes as well, which can assist in debugging :

Watch : Here while debugging we can watch variables changing as we go through the process of debugging. Just make sure to add your variables to the watch list.

Scope : When you’re debugging scope pane shows you the values of variables currently defined locally/globally with respect to your debug point.

Call Stack : Call Stack is a LIFO data structure that is used for function calls that record where we are in the program. When you call a function it is pushed to the top of stack, when it is done executing it is popped out from the stack. This will help you in debugging as it will show all the function calls that have been made in an orderly fashion.

See the picture below stopped at a debug point with call stack and scope panes :

You can check the official chrome dev tools article for more details : https://developers.google.com/web/tools/chrome-devtools/javascript/

Summary

This article explains the debugging of a frontend application using chrome dev tools.