Chrome extension that shows you what code created or updated a DOM element.
- Click on the orange button next to the URL bar. This will enable element history for this tab.
-
You may want to reload the page to make sure changes made during initial page load are tracked
-
Inspect an element and open the Element History pane
- You can now see the history of the selected element
I'm adding support for individual DOM changes individually, e.g. innerHTML or setAttribute. That means not all changes will be tracked. If you run into tracking issues you can report them here: https://github.com/mattzeunert/ElementHistory/issues
Chrome has a great feature called DOM breakpoints. It'll pause execution, for example when an attribute changes.
Use ElementHistory to:
- see where the element was updated without pausing frequently
- see where an element was created or inserted into the DOM
- see the full history instead of each change one by one
This project is quite useful for plain JavaScript or jQuery code. If you use a framework with a virtual DOM then the place where, for example, the assignment to innerHTML happened isn't very interesting.
npm run install, then npm run develop.
Load the src folder into Chrome as an unpacked extension.
Use npm run test to run the Karma test suite.
Open test.html for quick editing and debugging of the UI.