Chrome Developer Tools: What is this "Break on" option present on DOM elements?

userhMrc 0
Viewed 14

I was watching a frontend development course. In it, the author just mentioned an option in chrome developer tools "Break on", but didn't explain it.

This break on option appears when we right click a DOM element. Anyone has any idea what's the purpose of it?

I have attached an image for the context. enter image description here

google-chrome google-chrome-devtools
1 Answers

As the name suggests, Break on... let's you pause on the code that changes the DOM node in one of the following ways,

  1. Subtree modifications: Triggered when the child node is added/removed or its contents modified.
  2. Attributes modifications: Triggered when the attribute of the node is added/removed or its value changed.
  3. Node Removal: Triggered when the selected node is removed.

More info:
https://developer.chrome.com/docs/devtools/javascript/breakpoints/#dom

enter image description here

Pankaj Parashar0
Related