How to debug any Javascript issue in Google Chrome

Google Chrome Javascript debugging

Imagine you have a legacy project with spaghetti javascript code and need to troubleshoot. You have no idea where to start other than searching your IDE for some special keywords to find the right spot.

I needed to do this in an older Ext JS application. With no idea where to find the problem, I remembered to write the following line somewhere that could be in the program flow:

debugger;

After adding this line to your code, you need to open the Dev Tools in Google Chrome and click on the Sources tab. Reload your application and trigger your Javascript code. Once the debugger keyword position is triggered, Google Chrome will stop right there like a breakpoint:

Now you can step through the code with the arrow buttons on the right side and check the variables with their corresponding values in the Scope panel.

Tip: If you don’t have any starting point, add the debugger keyword in the entrypoint Javascript file of your application and step through, until you get an idea where the problem might be located.