Google Chrome DevTools Extension for analyzing DOM size

Latest Version

Version
1.25
Update
September 4, 2019
Size
58.04KiB
Developer
Category
Users
3,000+
Rating
3.58333 ★
Manifest Version
2
Web Store Status
Languages Support
English
See more
Permissions
*://*/*
See more

Dom Size Analyzer Extension

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.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 2, "name": "Dom Size Analyzer", "description": "Google Chrome DevTools Extension for analyzing DOM size", "version": "1.25", "permissions": ["*://*/*"], "devtools_page": "devtools.html", "web_accessible_resources": ["injectable.js"], "content_scripts": [ { "matches": [""], "js": ["contentScript.js"] } ], "background": { "scripts": ["backgroundScript.js"], "persistent": false }}
Read more

Similar Extensions

icon

DOM-Analyzer Extension · Developer Tools 3,000+ 3 ★ 19.52KiB

icon

DOM Highlighter Extension · Developer Tools 3,000+ 4 ★ 52.1KiB

icon

Site DOM Tree Extension · Developer Tools 3,000+ 2 ★ 88.35KiB

icon

Core Web Vitals Extension · Developer Tools 3,000+ 5 ★ 7.29KiB

icon

CLS Visualizer Extension · Developer Tools 3,000+ 11 ★ 17.27KiB

icon

LCP & CLS Monitor Extension · Developer Tools 3,000+ 1 ★ 19.96KiB

icon

DOM node tree viewer. Extension · Developer Tools 3,000+ 4 ★ 281KiB

icon

DOM Size Inspector Extension · Developer Tools 3,000+ 1 ★ 30.5KiB

icon

HTML DOM Navigation Extension · Developer Tools 3,000+ 18 ★ 13.89KiB

icon

Core Web Vitals Annotations Extension · Developer Tools 3,000+ 2 ★ 191KiB

icon

Web Vitals Extension · Developer Tools 3,000+ 43 ★ 398KiB

icon

CSS Used Extension · Developer Tools 3,000+ 184 ★ 164KiB

icon

Schema Builder for Structured Data Extension · Developer Tools 3,000+ 29 ★ 889KiB

icon

View Rendered Source Extension · Developer Tools 3,000+ 37 ★ 73.68KiB

icon

CLS Checker - Journey Further Extension · Developer Tools 3,000+ 9 ★ 107KiB

icon

DOM Treemap Extension · Developer Tools 3,000+ 3 ★ 148KiB

icon

AMP Validator Extension · Developer Tools 3,000+ 97 ★ 2.51MiB

icon

META SEO inspector Extension · Developer Tools 3,000+ 594 ★ 379KiB

icon

Datalayer Checker Extension · Developer Tools 3,000+ 33 ★ 93.13KiB

icon

Analytics Debugger Extension · Developer Tools 3,000+ 211 ★ 300KiB

icon

Core SERP Vitals Extension · Developer Tools 3,000+ 15 ★ 20.91KiB

icon

Hreflang Tag Checker Extension · Productivity 3,000+ 14 ★ 32.95KiB

icon

Website SEO Checker: Free Audit & Analysis Extension · Developer Tools 3,000+ 131 ★ 339KiB

icon

Core Web Vitals Visualizer Extension · Developer Tools 3,000+ 12 ★ 2.39MiB

User reviews

icon

Justin Golden (ID: 0000007c167c68af) Voted 5 ★ - Updated 06/21/2023 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.

icon

Mr Velocity (ID: 0000000ea21a4ee6) Voted 1 ★ - Updated 06/18/2023 could be useful if it did anything

icon

Patrick Weis (ID: 00000086f1f8bb01) Voted 5 ★ - Updated 06/08/2022 Does what it's supposed to do :) very useful

icon

Terry Ellis (ID: 000000d9e076b1e5) Voted 5 ★ - Updated 12/24/2021 Doesn't seem to work, no tab displayed in dev tools EDIT - working after a browser restart :-)

icon

Bo Twerdowsky (ID: 000000f6601406ef) Voted 5 ★ - Updated 10/09/2021 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.