DOM Capture Inspector

Select a DOM element, inspect details, and capture that element as PNG.

DOM Capture Inspector helps developers and web designers quickly inspect and capture elements from any webpage. Features: - Select any DOM element directly on the page - View the element tag, ID, classes, and size - Generate and copy a CSS selector - View and copy the element's outerHTML - View a text snippet and current page URL - Capture the selected element as a PNG image - Press Ctrl+Shift+F to instantly capture and download the selected element - Quickly open or toggle the side panel with Ctrl+Shift+E How to use: 1. Open DOM Capture Inspector from the Chrome side panel or press Ctrl+Shift+E. 2. Press E or click "Select Another Element". 3. Click the element you want to inspect. 4. Review its information in the side panel. 5. Copy the selector/HTML, click "Capture Element", or press Ctrl+Shift+F to instantly download the selected element as PNG. DOM Capture Inspector is designed as a lightweight utility for frontend development, debugging, UI inspection, and web design workflows. All element inspection and image processing are performed locally in your browser. ================================================================== DOM Capture Inspector는 웹페이지의 DOM 요소를 빠르게 선택하고 정보를 확인하거나 PNG 이미지로 캡처할 수 있는 개발자 도구입니다. 주요 기능: - 웹페이지에서 원하는 DOM 요소 선택 - 태그, ID, 클래스, 크기 확인 - CSS Selector 생성 및 복사 - outerHTML 확인 및 복사 - 요소의 텍스트 및 현재 URL 확인 - 선택한 요소를 PNG 이미지로 캡처 - Ctrl+Shift+F를 눌러 선택한 요소를 즉시 PNG로 캡처 및 다운로드 - Ctrl+Shift+E 단축키로 사이드 패널을 빠르게 열거나 닫기 사용 방법: 1. Chrome 사이드 패널에서 DOM Capture Inspector를 열거나 Ctrl+Shift+E를 누릅니다. 2. E 키 또는 "Select Another Element" 버튼을 눌러 요소 선택 모드를 시작합니다. 3. 원하는 요소를 클릭합니다. 4. 사이드 패널에서 요소 정보를 확인합니다. 5. Selector/HTML을 복사하거나, "Capture Element" 버튼을 누르거나, Ctrl+Shift+F를 눌러 선택한 요소를 즉시 PNG로 다운로드합니다. DOM 검사, 프론트엔드 개발, 디버깅, UI 확인 등에 사용할 수 있는 가벼운 도구입니다.