Google Chrome DevTools Extension for analyzing DOM size
According to (https://developers.google.com/web/tools/lighthouse/audits/dom-size), an optimal DOM tree has the following properties:
-Has less than 1500 nodes total.
-Has a maximum depth of 32 nodes.
-Has no parent node with more than 60 child nodes.
We can use this devtool to analyze a page's DOM to easily find out which parts of the page are adding weight to it.
****NEW*****
Scrolling the DOM element into view and highlighting it when hovered in this devtool.
Latest reviews
- (2023-06-21) Justin Golden: Takes a restart to work and shows up in the inspect element view. A little unintuitive to get working at first, but once it works, 5 stars! Very useful.
- (2023-06-18) Mr Velocity: could be useful if it did anything
- (2022-06-08) Patrick Weis: Does what it's supposed to do :) very useful
- (2021-12-24) Terry Ellis: Doesn't seem to work, no tab displayed in dev tools EDIT - working after a browser restart :-)
- (2021-10-09) Bo Twerdowsky: Installs easily, works well in Chrome. The info is detailed, a lot to unpack for someone who's not a dev. But it points out areas that need to be pared down, and at least gives me insight into which of my pages are too heavy on nodes.
- (2021-06-19) Cathryn Peters: Can't open, doesn't do anything after installing and giving permission to activate when clicked on.
- (2021-02-14) Tom Lambert: In theory, you open the Inspector and there's a new tab for Analyze DOM size, but when I go there and it just says "loading..." indefinitely. Even if I reload the page it doesn't reset. So this did not work for me at all.
- (2020-10-09) Star Lord: doesn't seem to do anything
- (2020-03-16) Andrew Bone: Works quickly and I found it very useful - thanks!
- (2020-02-18) Charles-Philippe Clermont: Didn't work. Stuck on "loading..." TypeError: Cannot read property id of undefined.