dsh-element-source v0.1.0
Click any UI element in your running dev page to jump to its Vue / React / Svelte / Angular source — right in the DSH chat. 点击页面元素,一键定位到源码,交给 DSH 助手微调。
Highlights / 亮点
- Click-to-source — preview a local dev server, pick an element, and the located
file:linefills the chat composer (never auto-sent). - Framework probes — code-inspector
data-insp-*attributes, React dev__source(component-name fallback for SWC builds), Vue__file(v2/v3), Svelte__svelte_meta, Angularng-reflect-*markers, plus a generic text / class / id workspace search for anything else. - Proxy preview —
GET /dsh-element-source/previewfetches the dev page and serves it from the GUI origin with the probe auto-injected (loopback hosts only), so you can start picking without touching your project. - Dual-mode entry, dsh-better-sidebar compatible — with dsh-better-sidebar installed the preview mounts as its "Local preview" tab; otherwise a right-docked, resizable, collapsible sidebar themed with the DSH tokens. The two UIs never overlap.
- Persistent selection — hover preview, then a locked outline that stays until you click another element, click it again, or press Esc.
- Optional Vite plugin —
dsh-element-source/vite-pluginauto-injects the probe into dev HTML (apply: 'serve'only; production builds untouched). - One-command install —
scripts/install.sh(macOS / Linux) andscripts/install.ps1(Windows PowerShell).
Install / 安装
# macOS / Linux
curl -fsSL https://raw.githubusercontent.com/GULI-lab/DSH-element-source/main/scripts/install.sh | bash
# Windows PowerShell
irm https://raw.githubusercontent.com/GULI-lab/DSH-element-source/main/scripts/install.ps1 | iex
# Manual (same as dsh-better-sidebar)
cd ~/.dsh/profiles/web
npx -y --package @deepseek-ai/dsh dsh plugin --profile web add dsh-element-sourceThen hard-refresh the browser (Ctrl/Cmd+Shift+R). 装完硬刷新浏览器即可。
Links / 相关链接
- npm: https://www.npmjs.com/package/dsh-element-source
- Source: https://github.com/GULI-lab/DSH-element-source
- Docs: README · 中文
Full changelog: CHANGELOG.md