Effective Debugging

Debugging is an important skill for every developer and the Chrome Developer Console offers powerful tools to debug more efficiently. In this guide, we’ll explore some debugging techniques using Chrome Developer Console that can help you identify and fix issues in your web applications.

Breakpoints

Normal breakpoints are the bread and butter of debugging. They allow you to pause JavaScript execution at a specific line of code, giving you an opportunity to inspect variables, step through code, and identify issues.

To set a normal breakpoint:

Open Chrome Developer Tools by pressing F12, Ctrl + Shift + I or Cmd + Option + I on macOS.

1. Navigate to the “Sources” tab.
2. Find the JavaScript file containing the code you want to debug.
3. Click on the line number where you want to set the breakpoint.

Breakpoint

When the code execution reaches the breakpoint, it will pause the code allowing you to inspect variables. You can see the values from the scope or by hovering on the variables.

Conditional Breakpoints

Conditional breakpoints are useful when you want to pause execution only when a certain condition is met. This can help you find a problem without pausing the code for each execution.

To set a conditional breakpoint:

1. Follow the same steps as setting a normal breakpoint.
2. Right-click on the breakpoint and select “Edit breakpoint”.
3. Or right-click on the line number and select “Add Conditional breakpoint”
4. Enter the condition you want to check.
5. Then press “Enter”.

The code will only pauses at the breakpoint if the condition evaluates to true.

DOM Breakpoints

DOM breakpoints allow you to pause the code execution when a DOM element is modified. This can be incredibly useful for debugging issues related to DOM manipulation.

To set a DOM breakpoint:

1. Open Chrome Developer Tools.
2. Navigate to the “Elements” tab.
3. Right-click on the DOM element you want to monitor.
4. Select “Break on” and choose the appropriate action (e.g., “subtree modifications”).

1. Subtree Modifications: Pauses the code execution when a child node is added or removed within the selected DOM element.
2. Attribute Modifications: Pauses the code execution when an attribute is added, removed, or modified in the selected DOM element .
3. Node Removal: Pauses the code execution when the selected DOM element or any of its child nodes are removed from the DOM tree.

XHR/fetch Breakpoints

XHR/fetch breakpoints allow you to pause the code execution when an XHR or fetch request is sent or received. This can be helpful for debugging issues related to AJAX requests.

To set an XHR/fetch breakpoint:

1. Open Chrome Developer Tools.
2. Navigate to the “Source” tab.
3. Find the XHR/fetch Breakpoints and Click on “+” icon.
4. Type the URL for which you want to pause execution when sent.

If you run fetch('https://api.example.com/data') in the console you can see that execution is paused.

Event Listener Breakpoints

Event breakpoints allow you to pause the code execution when a specific event is triggered. This can be useful for debugging issues related to event handling.

To set an event breakpoint:

1. Open Chrome Developer Tools.
2. Navigate to the “Sources” tab.
3. Find and expand the “Event Listener Breakpoints” section.
4. Select the event(s) you want to break on.

Call Stack

The call stack is crucial for understanding the flow of execution in JavaScript, and is often used in debugging to trace the sequence of function calls. It is used to keep track of function calls during the code execution.

It operates on a Last-In, First-Out (LIFO) basis. The most recently called function is added to the top of the stack.

To see the call stack of an execution:

1. Open Chrome Developer Tools.
2. Use a breakpoint mentioned above.
3. When the code pauses on the breakpoint, find and expand the “Call Stack”

Playground

You can try the above techniques using the codes at https://github.com/ugurcann/debugging-example.git