Rusty
Reputation: 4473
Chrome Developer Tools: What is this "Break on" option present on DOM elements?
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.
Upvotes: 0
Views: 353
Answers (1)
Pankaj Parashar
Reputation: 10192
As the name suggests, Break on... let's you pause on the code that changes the DOM node in one of the following ways,
- Subtree modifications: Triggered when the child node is added/removed or its contents modified.
- Attributes modifications: Triggered when the attribute of the node is added/removed or its value changed.
- Node Removal: Triggered when the selected node is removed.
More info:
https://developer.chrome.com/docs/devtools/javascript/breakpoints/#dom
Upvotes: 1
Related Questions
- Chrome DOM breakpoint keeps enabling itself
- &nbsp when inspecting the element?
- Event listener breakpoints in Google Chrome Devtools
- what are Google Chrome DevTool debugger blue marks?
- how to set DOM Breakpoints in chrome
- What's the difference between deactivating and disabling a breakpoint in Chrome Dev Tools
- How to set event listener breakpoints in Chrome's Elements tab?
- Where should i put the break point in chrome developer tools?
- Chrome developer tools. DOM subtree modification breakpoint?
- inactive break points in Chrome dev tools