Debugging JavaScript Efficiently with Chrome DevTools

Debugging JavaScript Efficiently with Chrome DevTools

The Google Chrome browser offers a built-in developer tools that help developers edit their code directly on the browser, add breakpoints to detect issues and debug their code quicker.

The DevTools UI has a total of 8 panels. Here's a quick overview of each panel.

Elements: Inspect and edit DOM nodes and style attributes

Console: View and run JavaScript code

Sources: Debug JavaScript, add breakpoints, etc.

Network: View and debug network-related activities

Performance: Analyse speed and optimization

Memory: Track memory usage and fix related issues

Application: Inspect localStorage, sessionStorage, cookies, IndexDB, etc.

Security: Debug certificate and other security issues

Lighthouse: Audit the app quality, performance, accessibility, SEO, etc

So now that we have a quick overview of DevTools, let's discuss some useful debugging strategies to debug your code more efficiently and how to achieve that with DevTools.

Add Breakpoints

Breakpoints are useful because they pause your code, so you can inspect line by line and choose to resume once you're ready. This is especially useful for large code bases or when it is hard to pinpoint the source of the bug.

Adding a Breakpoint

1) To add a breakpoint, open DevTools Sources Panel.

2) Click on the left navigation panel to select the .js file where a breakpoint will be added. The code of the .js file will appear in the middle panel.

3) Right-click the line where you want to add a breakpoint on, then select 'Add Breakpoint'.

4) Now, when I run the function, it will pause right before executing the line in which breakpoint was added.

Pausing then inspecting the code is a productive way to debug rather than console.log(data) and reloading pages. Once everything seems to be okay, click on the resume button on the page to unpause.

View/Make Changes to Local, Closure and Global Properties

While the app is paused, you can view and edit the local, closure and global properties. For example, you have a bug that does not return the correct value for a variable, so you want to check its value at a certain point in a function. After you add a breakpoint, you can simply head to the right panel. Expand the 'Scope' pane and view the variable value. As you can see, this panel gives a lot of information that you can use to fix bugs.

Create, Save and Run Snippets

Another efficient strategy is to use snippets. Snippets allow you to easily execute and reuse scripts in any part of your app. You can add a snippet by clicking on the Snippets menu on the left panel. On the Snippets panel, click + New Snippets and write the code in the middle panel. Right-click on the snippet and click 'Run' to run the snippet.

View the Call Stack

DevTools also allow you to view the call stack. This is useful when you have a lot of asynchronous functions, and you want to track the changes to the call stack while debugging an error.

To view the call stack, open DevTools Sources panel and on the right panel, expand the Call Stack pane to see all the current functions in the call stack.

Conclusion

There's so much more you can do with Chrome DevTools. I encourage you to visit the links in the Resources section below to explore more yourself.

Once you get the hang of it, you will be a more efficient debugger and your days of endless console.log() will be history.

Thanks for reading. I hope it has been a helpful read. Cheers!

References

youtu.be/H0XScE08hy8?list=PLNYkxOF6rcIC74v_.. developer.chrome.com/docs/devtools/javascript