DOM Update Highlighter is a tool that makes DOM updates more visible as they happen on a webpage.
It can be used by frontend developers to observe inefficiencies in working with DOM, such as excessive attribute updates or tree rebuilds.
Install
Detecting inefficiencies
Here's how the extension makes it obvious where the problems are:
The following section demonstrates how the web extension reacts on DOM changes.
Different kinds of updates are outlined in different colors.
Tree updates
Click me!
Attribute updates
move the slider ^
Text updates
.
FAQ
How is it better than Chrome DevTools "Paint Flashing" feature?
Paint flashing is rectangular area-based, while this tool is DOM node-based. The difference becomes apparent when there are nested updates, especially of different kinds. Moreover, Paint Flashing isgnores DOM updates that do not lead to re-rendering (typically attribute updates). These updates are sometimes a problem.
How is it better than *similar, but framework-specific tool*?
It is framework-agnostic, and works with sites created with vanilla js.
DOM Update Highlighter
-333333?logo=Substack&logoColor=white){kind=icon}
