Visualize distribution of DOM nodes in the document tree

Latest Version

Version
1.0
Update
December 14, 2023
Size
142KiB
Developer
Category
Users
24
Rating
0 ★
Manifest Version
3
Web Store Status
Languages Support
English
See more
Permissions
Tabs
ActiveTab
Storage
SidePanel
ContextMenus
See more

PageTree Inspector Extension

Visualize the distribution of DOM element nodes within the document tree of any web page.
You have the ability to generate interactive tree views for any element, just like inspecting an element using the DevTools element inspector.

Key Features:

🌳 Visualize Document Trees: See the organization of DOM nodes in any web page through an interactive tree representations.

🕵️‍♀️ Inspector Tool: Select any element to generate a dedicated interactive tree view, providing visual insight into its placement.

🌚 Dark Mode: Reduce eye strain during late-night sessions with our Dark Mode option for a more comfortable experience.

👆Interactive Navigation: Easily traverse parent, child, and sibling nodes within the DOM tree to grasp relationships.

🔄 Observable Updates: Keep up with document tree changes by refreshing and instantly viewing updates.

🌐 Customize Orientation: Tailor your visualization to your preference with horizontal or vertical tree orientations.

✒️ Path Rendering Options: Choose from various path rendering styles – diagonal, straight, elbow, or step – for a customized look.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "PageTree Inspector", "description": "Visualize distribution of DOM nodes in the document tree", "version": "1.0", "minimum_chrome_version": "116", "options_ui": { "page": "options.html" }, "side_panel": { "default_path": "sidepanel.html" }, "content_scripts": [ { "matches": [ "" ], "js": [ "js/vendor.js", "js/content.js" ], "all_frames": true, "match_about_blank": true, "run_at": "document_idle" } ], "background": { "service_worker": "js/background.js" }, "action": { "default_title": "Visualize Document Tree", "default_side_panel": "sidepanel.html", "default_icon": { "16": "assets/icon16.png", "48": "assets/icon48.png", "128": "assets/icon128.png" } }, "icons": { "16": "assets/icon16.png", "48": "assets/icon48.png", "128": "assets/icon128.png" }, "web_accessible_resources": [ { "resources": [ "template.html" ], "matches": [ "" ] } ], "permissions": [ "tabs", "activeTab", "storage", "sidePanel", "contextMenus" ], "host_permissions": [ "" ]}
Read more

Similar Extensions

icon

DOM node tree viewer. Extension · Developer Tools 24 4 ★ 281KiB

icon

Web Developer Sidekick Extension · Developer Tools 24 0 ★ 85.31KiB

icon

rawkit Extension · Developer Tools 24 0 ★ 88.13KiB

icon

HTML Visual Validation Extension · Developer Tools 24 8 ★ 54.54KiB

icon

DOM Treemap Extension · Developer Tools 24 3 ★ 148KiB

icon

Html Css Online Extension · Developer Tools 24 1 ★ 1.54MiB

icon

Supertweak Extension · Developer Tools 24 4 ★ 75.3KiB

icon

HTML DOM Navigation Extension · Developer Tools 24 18 ★ 13.89KiB

icon

DOM Square Extension · Developer Tools 24 1 ★ 1.3MiB

icon

Elements Inspektor Extension · Accessibility 24 0 ★ 38.18KiB

icon

Eye Web Element V3.0 Extension · Developer Tools 24 1 ★ 29.22KiB

icon

Domquest Extension · Developer Tools 24 2 ★ 32.3KiB

icon

Site DOM Tree Extension · Developer Tools 24 2 ★ 88.35KiB

icon

RE:DOM dev tools Extension · Developer Tools 24 1 ★ 207KiB

icon

The-M-Project Inspector Extension · Developer Tools 24 4 ★ 12.79KiB

icon

DevTools Classes & Atributes panel Extension · Developer Tools 24 4 ★ 12.75KiB

icon

DOM Size Inspector Extension · Developer Tools 24 1 ★ 30.5KiB

icon

Catberry Debugger Extension · Developer Tools 24 4 ★ 455KiB

icon

Dump Dom Extension · Developer Tools 24 4 ★ 9.88KiB

icon

Display Access Keys Extension · Accessibility 24 3 ★ 6.56KiB

icon

Code Minifier (JS, CSS, HTML) Extension · Developer Tools 24 0 ★ 575KiB

icon

XHR JSON Panel Extension · Developer Tools 24 18 ★ 45.82KiB

icon

Remote Cached Pages Extension · Productivity 24 2 ★ 8.72KiB

icon

JSON RPC Chrome Viewer Extension · Developer Tools 24 14 ★ 122KiB