dom-inspector

分类: 工具与效率 | 上传者: zcf0508 | 下载: 0 | 版本: v1.0（最新）

Advanced DOM inspection and interaction capabilities. Allows analyzing page layout, extracting compact DOM snapshots, manipulating elements, and debugging browser logs.

更新日志: Source: GitHub https://github.com/zcf0508/unplugin-devpilot

目录结构

当前层级: packages/devpilot-plugin-dom-inspector/src/

📁 client/
- 📁 utils/
  - 📄 buildCompactSnapshot.ts 15.2 KB
  - 📄 index.ts 4.7 KB
  - 📄 resolveSelector.ts 5.3 KB
- 📄 captureScreenshot.ts 4.7 KB
- 📄 clickElementById.ts 2.7 KB
- 📄 getCompactSnapshot.ts 5.7 KB
- 📄 getDOMTree.ts 916 B
- 📄 getElementDetails.ts 2.8 KB
- 📄 getElementInfoById.ts 1.6 KB
- 📄 getLayout.ts 21.1 KB
- 📄 getLogs.ts 2.8 KB
- 📄 index.ts 1.6 KB
- 📄 inputTextById.ts 2.0 KB
- 📄 querySelector.ts 1.4 KB
- 📄 scrollToElement.ts 1.3 KB
📄 index.ts 21.2 KB
📄 shared-types.ts 6.2 KB
📄 skill.md 3.1 KB

SKILL.md

---
name: dom-inspector
description: Advanced DOM inspection and interaction capabilities. Allows analyzing page layout, extracting compact DOM snapshots, manipulating elements, and debugging browser logs.
allowed-tools: [
  "get_page_snapshot",
  "get_visual_hierarchy",
  "get_element_details",
  "click_element",
  "input_text",
  "get_console_logs",
  "scroll_to_element",
  "capture_screenshot"
]
---

# DOM Inspector Skill

> **Core Principle: Minimize token cost.** Always choose the cheapest tool that gets the job done.

## Tool Cost Reference

| Cost | Tools | Use For |
|---|---|---|
| Low | `get_visual_hierarchy`, `click_element`, `input_text`, `scroll_to_element` | Layout overview, trigger interactions |
| Mid | `get_page_snapshot`, `get_element_details`, `get_console_logs` | DOM with `@eID`, element deep dive, logs |
| High | `capture_screenshot` | Visual comparison with design mockups only |

## Workflows

### 1. Fix UI Against Design Mockup

```
capture_screenshot → compare with design → edit styles → capture_screenshot → verify
```

Screenshot is justified here — pixel-level visual comparison requires images.

### 2. Verify Interaction Flows

```
get_page_snapshot → find @eID → click_element/input_text → get_page_snapshot → verify DOM changes
```

Example: `snapshot → @e42 [button] "Settings" → click_element(e42) → snapshot → confirm dialog appeared`

### 3. Debug Bugs via Logs

```
get_console_logs(level="error") → add console.info("[BUG]",...) to code
→ click_element to reproduce → get_console_logs(keyword="[BUG]")
→ fix code → re-trigger → get_console_logs → confirm fix
```

**Important: `console.log` is NOT captured.** Use `console.info` or higher (`warn`/`error`) for debugging.
Use prefixes (`[BUG]`, `[PERF]`) + `keyword`/`level` filter to avoid log noise.

### 4. Explore Page Structure

```
get_visual_hierarchy → understand layout (cheap)
→ get_page_snapshot(startNodeId="eX") → targeted DOM of area of interest
→ get_element_details("eY") → deep dive if needed
```

**Always start with `get_visual_hierarchy`** — cheapest way to understand the page.

### 5. Performance Debugging

```
Add console.time/PerformanceObserver → click_element to trigger
→ get_console_logs(keyword="[PERF]") → fix → re-trigger → verify
```

## Decision Guide

- **Understand layout?** → `get_visual_hierarchy` first
- **Need element IDs?** → `get_page_snapshot` (use `startNodeId` to narrow scope)
- **Click / type?** → `click_element` / `input_text` with `@eID`
- **Compare with design?** → `capture_screenshot`
- **Runtime data?** → `get_console_logs` with `keyword` / `level`
- **Element off-screen?** → `scroll_to_element` before snapshot
- **Computed styles / position?** → `get_element_details`

## Anti-Patterns

- ✗ `capture_screenshot` to discover structure (use `get_visual_hierarchy`)
- ✗ Full-page snapshot when only one section needed (use `startNodeId`)
- ✗ `get_console_logs` without `keyword`/`level` filter (token waste)
- ✗ Skipping `get_visual_hierarchy` and jumping straight to detailed snapshot

登录后下载/点赞/收藏 ❤ 27 | ★ 0

dom-inspector

目录结构

SKILL.md

举报内容

提示