https://github.com/knowler/break-on-element
A custom element that is a declarative MutationObserver for debugging. Instead of opening your developer tools to set these breakpoints wrap the element in the <break-on> custom element.
https://github.com/knowler/break-on-element
custom-elements web-components
Last synced: 8 months ago
JSON representation
A custom element that is a declarative MutationObserver for debugging. Instead of opening your developer tools to set these breakpoints wrap the element in the <break-on> custom element.
- Host: GitHub
- URL: https://github.com/knowler/break-on-element
- Owner: knowler
- Created: 2023-12-01T21:25:56.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-03T01:44:08.000Z (over 2 years ago)
- Last Synced: 2025-01-29T08:11:18.051Z (over 1 year ago)
- Topics: custom-elements, web-components
- Language: HTML
- Homepage: https://knowler.github.io/break-on-element/demo
- Size: 18.6 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Break On Element
A custom element that is a declarative `MutationObserver` for debugging.
Instead of opening your developer tools to set these breakpoints wrap
the element in the `` custom element. [See the demo](https://knowler.github.io/break-on-element/demo).
## Defining
```javascript
import { BreakOnElement } from "https://esm.sh/gh/knowler/break-on-element/break-on-element.js?raw";
BreakOnElement.define();
```
## Usage
```html
Will break on all attribute modifications for this element.
Will break on class name modifications for this element.
Will break on class name and ID modifications for this element.
Will break on class name and ID modifications for this element and its subtree.
Will break on adding and removing direct descendants.
Will break on adding and removing all descendants.
Will break on text changes in the first top-level text node.
Will break on all text changes within an element.
Setting the breakpoint on a nested element
```
## Future
- Options for only additions or deletions of attributes and children.