Skip to main content

Setting DOM Breakpoints for Debugging

In this tutorial, we will show you how to set DOM breakpoints in browser developer tools to debug and test DOM manipulation in your web applications.

What are DOM breakpoints?​

DOM breakpoints are a feature of browser developer tools that allow you to pause the execution of your JavaScript code when a specific DOM element is modified. This is particularly useful when debugging complex applications with many DOM manipulations, as it enables you to identify the exact point at which a DOM element is changed.

Setting DOM breakpoints​

To set a DOM breakpoint, follow these steps:

  1. Open the Elements panel in your browser's developer tools (refer to the previous tutorial on how to access developer tools).

  2. Find the DOM element you want to set a breakpoint on, and right-click on it. In the context menu, hover over the Break on option, and then select the type of DOM breakpoint you want to set:

  • Subtree modifications: This breakpoint will pause the execution of your JavaScript code whenever a child element of the selected element is added, removed, or modified.
  • Attributes modifications: This breakpoint will pause the execution of your JavaScript code whenever an attribute of the selected element is added, removed, or modified.
  • Node removal: This breakpoint will pause the execution of your JavaScript code whenever the selected element is removed from the DOM.
  1. Trigger the DOM manipulation in your web application, and the browser will pause the JavaScript execution when the breakpoint is hit. You can then inspect the call stack, variables, and other debugging information in the developer tools.

Example​

Let's say we have the following HTML and JavaScript code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM Breakpoints Example</title>
  </head>
  <body>
    <button id="changeButton">Change Attribute</button>
    <div id="targetElement" style="width: 100px; height: 100px; background-color: red;"></div>

    <script>
      document.getElementById('changeButton').addEventListener('click', function () {
        console.log('Changing attribute...');
        document.getElementById('targetElement').style.backgroundColor = 'blue';
      });
    </script>
  </body>
</html>

To set a DOM breakpoint on the targetElement div for attribute modifications:

  1. Open the Elements panel in your browser's developer tools.
  2. Right-click on the targetElement div, hover over Break on, and select Attributes modifications.
  3. Click on the "Change Attribute" button in your web application.

When the breakpoint is hit, the browser will pause the JavaScript execution, and you can inspect the call stack and variables to debug the DOM manipulation.

Setting DOM breakpoints is a powerful technique for debugging and testing DOM manipulation in your web applications. It enables you to identify the exact point at which a DOM element is changed, making it easier to understand and resolve issues.