Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/klntsky/dom-update-highlighter

Highlight DOM updates on a webpage
https://github.com/klntsky/dom-update-highlighter

dom tool web webextension

Last synced: about 1 month ago
JSON representation

Highlight DOM updates on a webpage

Host: GitHub
URL: https://github.com/klntsky/dom-update-highlighter
Owner: klntsky
Created: 2023-09-02T18:23:02.000Z (over 1 year ago)
Default Branch: master
Last Pushed: 2023-09-08T15:11:10.000Z (over 1 year ago)
Last Synced: 2024-10-12T05:23:30.275Z (2 months ago)
Topics: dom, tool, web, webextension
Language: JavaScript
Homepage: https://dom-up.date/
Size: 73.2 KB
Stars: 3
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # DOM update highlighter

This WebExtension highlights [DOM](https://en.wikipedia.org/wiki/Document_Object_Model) updates as they happen on a webpage.

[![Mozilla Add-on Users](https://img.shields.io/amo/users/dom-update-highlighter?logo=firefox&label=Install%20for%20Firefox)](https://addons.mozilla.org/en-US/firefox/addon/dom-update-highlighter/) [![Chrome Web Store Users](https://img.shields.io/chrome-web-store/users/ngbjjfmkdbnkobmnenaclacogdkalimn?logo=chrome&label=Install%20for%20Chrome)](https://chrome.google.com/webstore/detail/dom-update-highlighter/ngbjjfmkdbnkobmnenaclacogdkalimn) [![donate](https://img.shields.io/badge/donate-333333)](https://klntsky.dev/donate.html)

It can be used by frontend developers to observe inefficiencies in working with DOM, such as excessive content updates or tree rebuilds.

## Video preview

[![Watch the video](https://img.youtube.com/vi/x03lGEKPElk/0.jpg)](https://youtu.be/x03lGEKPElk)

## Usage Instructions

See [the website](https://dom-up.date).

## Cheat sheet

- Tree updates - red outline

- Text content updates - green outline

- Attribute updates - blue outline

## Implementation

This extension is powered by [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) API.