VisualDOM란 무엇입니까?

VisualDOM은(는) cmderobertis에 의해 개발된 Chrome 확장 프로그램으로, 주요 기능은 "Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development."입니다.

확장 프로그램 스크린샷

VisualDOM 확장 프로그램 CRX 파일 다운로드

크롬 확장 프로그램을 crx 형식으로 다운로드하여 브라우저에 수동으로 설치하거나 crx 파일을 친구들과 공유하여 쉽게 크롬 확장 프로그램을 설치하세요.

확장 프로그램 사용 설명서

A lightweight visual representation of the Document Object Model to aid in web development, written in vanilla JavaScript and CSS. A "set-it-and-forget-it" solution to element nesting confusion.

This extension draws a diagram of the elements on their HTML page in order to easily visualize how their HTML elements are nested within one another. Tag names, classes, and IDs are shown inside each node, color-coded for convenient, meaningful identification.

How to use:

- Open your HTML file in the browser.
- Click the VisualDOM icon to enable it. Chrome may ask for certain permissions (no user data or website information is ever stored)
- Refreshing the page (or modifying your HTML while using a Live Server IDE extension) will remove the elements generated by VisualDOM, and you will need to click the icon again to generate the updated content.

Like what you see? Find me on GitHub 👉 https://github.com/cmderobertis

확장 프로그램 기본 정보

이름	VisualDOM
ID	aanodhkbohbafcokdhkedojclmfgpmgf
공식 URL	https://chromewebstore.google.com/detail/visualdom/aanodhkbohbafcokdhkedojclmfgpmgf
설명	Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.
파일 크기	92.7 KB
설치 횟수	31
현재 버전	0.0.1
최근 업데이트	2022-08-03
출시 날짜	2022-08-03
개발자	cmderobertis
이메일	[email protected]
결제 유형	free
지원되는 언어	en
manifest.json
{ "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx", "name": "VisualDOM", "description": "Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.", "version": "0.0.1", "manifest_version": 3, "permissions": [ "activeTab", "scripting" ], "background": { "service_worker": "background.js" }, "action": { "default_icon": { "32": "assets\/icons\/vdom-square32.png", "64": "assets\/icons\/vdom-square64.png", "128": "assets\/icons\/vdom-square128.png", "256": "assets\/icons\/vdom-square256.png", "512": "assets\/icons\/vdom-square512.png" } }, "content_scripts": [ { "matches": [ "" ], "css": [ "vdom.css" ] } ], "icons": { "32": "assets\/icons\/vdom-square32.png", "64": "assets\/icons\/vdom-square64.png", "128": "assets\/icons\/vdom-square128.png", "256": "assets\/icons\/vdom-square256.png", "512": "assets\/icons\/vdom-square512.png" } }