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”
- 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?
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:
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.
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.
Breakpoints can be triggered via the program code itself.
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:
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:
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:
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.