Debugging Javascript events with Developer Tools breakpoints

Hello campers! If you’re anything like me, you’ve probably tried to set up an event listener in your code only to have it fail in a way that leaves you asking, “what happened between me (clicking, scrolling, pressing a key) and this code running?”

Well, I recently came across an excellent suggestion as to how to debug events (scroll, click, etc) using breakpoints (basically going step by step through the code and pausing at each one) in the Developer Tools on Chrome. Please see below, and let me know if there are any questions, concerns, or corrections!

Debugging Javascript Events Tutorial

Step 1

Open up the Developer Tools in Chrome (F12) when on the page you want to debug.

Step 2

Navigate to the Sources tab.

Step 3

Open Event Listeners Breakpoints in one of the panels. Select whatever event you want to debug (in this case the mouse click event).

Step 4

Start the event that you are trying to debug (in this case the “test” button click). The js file with the event listener should come up on the Sources tab.

Step 5

Step through the code line by line with F11 or by function with F10. Observe the values changing in the Sources tab. If the listener references another file, that will open up as well as you cycle through the code.

Summary and Notes

Ideally using event listener breakpoints, you will be able to find where your code went wrong by walking through it incrementally.

Keep in mind, if you are using any libraries like React or jQuery, it will walk you through that source as well if your event listener depends on them. This could make finding the error more time-consuming and difficult, but overall, I believe it is a great tool to have at your disposal.

Hopefully everything here was semi-coherent and understandable. If there is any confusion, please don’t hesitate to let me know, and I’ll get back to you (or some that sees it first) with an answer when able.