Be A Debug Ninja

Some decades ago debugging is something you have to pay for. But now the debugging tools have evolved into a whole new dimension.

“Debugging is like being the detective in a crime movie where you are also a murderer”

In this article we’ll explore the hidden debugging options for JavaScript with Google Chrome.

• What code is changing this section of the page?
• Trigger a breakpoint when an exception occurs
• Create Conditional Breakpoints
• Add Event Breakpoints
• Create Programmatic Breakpoints
• Using Snippets in Debugging
  • Add a breakpoint before a given function
  • Search an object for matching properties
  • Break when an object property is accessed
• Who is doing this Ajax request?

What code is changing this section of the page?

Many developers are familiar with the breakpoints that can be added to JavaScript in the Sources panel of the Chrome DevTools. Applying breakpoints to specific lines will break (pause) your JavaScript during execution so that you can get a better look into what’s going on. However, many people don’t realize that you can also break any time the HTML is modified.

One common scenario happens when a section of the page is modified, but its not clear by which part of the code. By pointing and right-clicking the HTML element on the page, it’s possible to setup a breakpoint that will be triggered when that page element is modified:

• Subtree Modifications item will break if there are any child elements that are added, removed, or modified.
• Attributes Modifications item will break if the element’s attributes change in any way.
• Node Removal will break if the element is deleted entirely.

Trigger a breakpoint when an exception occurs

The Chrome Dev Tools allow to to have the debugger stop every time that an exception is thrown. This can be activated using the pause button in the sources tab. The checkbox just below it allows to pause the debugger only if the exception is uncaught:

Conditional Breakpoints

Sometimes we may only need to trigger a breakpoint in a certain condition. Such as to trigger a breakpoint for a certain index of the for loop or to a specific id. This conditional breakpoint can be added by right clicking on the line number section and selecting the edit breakpoint option.

Event Breakpoints

Sometimes you may have to trigger the breakpoint in the function if a mouse button is clicked, focused etc. To trigger breakpoints to event the source tab has event listener breakpoints section.

Programmatic Breakpoints

Breakpoints can be triggered via the program code itself.

“Debugger”

By adding the debugger statement in the code it will trigger the breakpoint when the line is getting executed. This option is helpful because we don’t have to manually go and click the breakpoint in the source tab. This functionality is also used to create debug tools.

Using Snippets in Debugging

The chrome developer tools provides functionality to save small scripts for future usage. This functionality is under the source tab and in the sub tab called snippets. This can be used to store frequently used debugging scripts made by other developers to make the debugging easy.

Add a breakpoint before a given function

The stopBefore.js snippet allows to setup a breakpoint that is triggered just before a certain function is called. For example, this will trigger a breakpoint just before the document.getElementById function is called:

stopBefore(document, ‘getElementById’)

Search an object for matching properties

The grep.js snippet allows to search an object and its prototypical chain for properties that match a given search criteria.

For example this instruction will search for all properties matching get in the document object:

grep(document, ‘get’);

Break when an object property is accessed

The debugAccess.js snippet allows to trigger a breakpoint when a given property is accessed. For example this will trigger a breakpoint each time document.cookie is called:

debugAccess(document, ‘cookie’);

Who is doing this Ajax request?

Sometime an ajax request is made, but it’s not clear which part of the code is doing it. On the sources tab there is an XHR breakpoint section, where it’s possible to add Ajax breakpoints by clicking Any XHR:

An ajax breakpoint

Alternatively by clicking the plus sign on the section header, it’s possible to add an ajax breakpoint that breaks only if the url of the request contains a matching string.