Debugging JavaScript Efficiently with Chrome DevTools

Tired of console.log() to debug all the time? Use DevTools and these strategies to be a more efficient debugger!

Featured on Hashnode

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Are you still typing console.log() in your projects to debug? In this article, let's learn how to be a more efficient debugger using Chrome DevTools.

What is Chrome DevTools?

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

Introduction to DevTools Panels

The DevTools UI has a total of 8 panels. This article will mostly cover the Sources panel, as that's where we will debug.

image.png

Here's a quick overview of what each panel is responsible for.

  1. Elements: Inspect and edit DOM nodes and style attributes
  2. Console: View and run JavaScript code
  3. Sources: Debug JavaScript, add breakpoints, etc.
  4. Network: View and debug network-related activities
  5. Performance: Analyse speed and optimization
  6. Memory: Track memory usage and fix related issues
  7. Application: Inspect localStorage, sessionStorage, cookies, IndexDB, etc.
  8. Security: Debug certificate and other security issues
  9. Lighthouse: Audit the app quality, performance, accessibility, SEO, etc.

Using DevTools (Keyboard Shortcuts)

To open DevTools Elements panel, press Command + Option + C for Mac and CTRL + SHIFT + C for any other OS.

To open DevTools Console panel, press Command + Option + J for Mac and CTRL + SHIFT + J for any other OS.

How to Debug JavaScript with DevTools

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.

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

In this example, let's add a line-of-code 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.

Capture.PNG

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

image.png

4) Now, when I run the function, it will pause right before executing the POST request. And I can see the data that is being posted.

image.png

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.

image.png

There are many types of breakpoints you can add using DevTools. The image below is a summary of all the breakpoint types available.

image.png

For more details on how to add each type of breakpoint, please check out the documentation.

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

image.png

If you want to test the function with other values, you can double-click on the variables to edit.

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

image.png

On the Snippets panel, click + New Snippets and write the code in the middle panel as shown in the image below.

image.png

Then save your snippet with Command + S on Mac or CTRL + S on any other OS.

To run your snippet, you can do any of the following:

1) Right-click on the snippet and click 'Run'

image.png

2) Press Command + Enter on Mac or CTRL + Enter on any other OS.

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

image.png

5. Blackboxing

When you're debugging, you probably want to exclude some scripts from running. Perhaps it is some third party libraries or scripts you believe is unrelated to the error.

Instead of commenting them out line by line in your code, you can blackbox them on DevTools.

To do so, click on the script file you want to ignore on the left panel in the Sources tab. Then, right-click on the middle panel and click 'Add script to ignore list'.

image.png

Now this script will not run, so you can better focus on inspecting the buggy code and narrow down the cause of error or bug.

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. Please like and share this article if it is, and feel free to ask questions in the comments below. Cheers!


References

Interested in reading more such articles from Victoria Lo?

Support the author by donating an amount of your choice.

Recent sponsors
Cristiana Man's photo

This is the guide I needed when I started web development. Great content! How to use the Performance tab could be interesting!

Victoria Lo's photo

Yayyy! Thanks Cristiana! 😊 I'll keep your suggestion in mind~

Mr.Unity Buddy's photo

Thanks for sharing! Really helpful!

Victoria Lo's photo

Thanks friend! Glad it helped!

Claire Yu's photo

I didn't know I needed this! Thanks 😊

Victoria Lo's photo

You're welcome 😊😊

Rohaan Joshii's photo

Thank You for sharing your knowledge, it really helps me a lot. 🙌🙌👍👍👍

Victoria Lo's photo

Thanks for reading Rohaan 😊 I'll be sure to write more~

Favourite Jome's photo

Learning about the DevTools thoroughly is something I've ignored. I think it's high time I do so.

Thanks also for sharing once again, now I know about breakpoints which I think will be very handy!

Victoria Lo's photo

Yayy! Thanks Favourite! Hope it will help you while debugging 😊

Kieran Roberts's photo

Both the Chrome and Firefox devtools are extremely useful if you know how to use them. Nice article Victoria Lo.

Victoria Lo's photo

Indeed, I will try out Firefox too soon! 😊

Andrew Baisden's photo

Great article so much useful info.

Braydon Coyer's photo

Excellent article; insightful and well-crafted! Thanks for sharing!

Amish Shah's photo

Thank you for sharing this!

The last one about adding scripts to ignore list is going to help me a lot.

Uduak Obong-Eren's photo

This is a really great resource, thanks for sharing Victoria Lo.

Tracy Nuwagaba's photo

Great article. Bookmarked, this is the tutorial I needed so rare to find.

Sabarish Rajamohan's photo

Wow, this is helpful stuff Victoria. Thank you !!

Rahul's photo

I'm late 😅. Amazing article like always.

Sourav Dey's photo

This is a really amazing guide.💯

I was not aware of snippets. Surely, I will be trying that.

Olubisi Idris Ayinde's photo

This is great Victoria Lo Thanks for sharing

henry's photo

its so easy to comprehend , i love it

Paul Ibeabuchi's photo

Awesome and educative. Many thanks!