前言¶
在 DSH 里做前端开发时，经常会遇到一个具体动作：页面上某个按钮、输入框或卡片看起来没问题，但要修改它时，还需要从页面反查到对应的源码位置。常规做法是打开源码目录，按组件名、文案或 class 名搜索，再逐个打开文件确认。
dsh-element-source 针对这个动作做了一个插件：在本地开发页面里点击一个 UI 元素，插件会解析出匹配的 source file + line，并把 [元素定位] 消息填入 DSH 聊天草稿。你确认后再发送，让 agent 读取该文件并等待你的修改请求。
这是什么¶
dsh-element-source 是 DeepSeek Harness（DSH）的一个插件，维护者为 GULI-lab，许可证为 MIT。
它的一句话定位是：
Click any UI element in your running dev page to jump to its Vue / React / Svelte / Angular source.
具体来说，它是一个 click-to-source inspector，兼容 dsh-better-sidebar，不要求安装浏览器扩展。它可以用于 Vue、React、Svelte、Angular，也提供面向其他框架的通用回退定位方式。
核心功能¶
下面介绍几个已经核实的核心能力。
本地预览入口¶
插件会提供一个本地页面预览入口。
- 如果安装了
dsh-better-sidebar，入口是侧边栏里的 Local preview 标签。 - 如果没有安装
dsh-better-sidebar，插件会使用自己的右侧停靠侧边栏承载预览面板。
这个入口用于打开本地开发服务器页面，例如：
http://localhost:3000
选择元素¶
在预览页面中，可以先点击选择图标，移动鼠标高亮目标元素，再点击目标元素。
这一步的目标是从页面上的可视元素反查源码位置。选中后，面板会展示定位结果，包括：
file:line- 对应源码片段
例如：
src/components/App.vue:12
填充聊天草稿，不自动发送¶
点击选中元素后，插件会把一条类似下面的内容填入聊天输入框草稿：
[元素定位] src/components/App.vue:12
注意，这一步只是填充草稿，不会自动发送。是否发送、如何补充修改要求，仍然由你决定。
Agent 读取源码后等待修改¶
发送后，agent 会使用 read 工具读取定位到的文件，在对话框中展示代码，并等待你的修改请求。
这使得“找到代码”和“开始修改”之间少了一个手动搜索和复制上下文的过程。
框架支持¶
已核实事实中说明，插件支持：
- Vue
- React
- Svelte
- Angular
- 其他框架的通用回退定位
安装与启用¶
前置条件是 DSH 已可运行：
dsh web
dsh-better-sidebar 是可选依赖。安装它之后，入口会使用侧边栏的 Local preview 标签；没有安装它时，插件会使用右侧停靠侧边栏。
macOS / Linux，或 Windows 下 Git Bash / WSL 环境可以使用下面的安装命令：
curl -fsSL https://raw.githubusercontent.com/GULI-lab/DSH-element-source/main/scripts/install.sh | bash
已核实的 package.json 信息还包括：
{
"license": "MIT",
"engines": {
"node": ">=20"
},
"packageManager": "pnpm@11.7.0"
}
典型用法¶
下面的步骤来自已核实用法示例。
1、打开入口。
如果安装了 dsh-better-sidebar，打开侧边栏的 Local preview 标签；如果没有安装，打开插件自己的右侧停靠侧边栏。
2、输入本地开发服务器地址，然后按 Enter。
http://localhost:3000
3、点击选择图标。
移动鼠标，页面上的目标元素会进入高亮状态。
4、点击目标元素。
插件会解析匹配源码位置，面板中显示 file:line 和源码片段。
5、聊天输入框会自动填入草稿。
例如：
[元素定位] src/components/App.vue:12
此时不会发送消息。你可以补充自己的修改要求，再按 Enter。
6、按 Esc 可以取消选择。
7、预览面板工具栏中还有两个操作：
- refresh：重新加载页面
- open externally：在真实浏览器标签页中打开
在自己的页面加载探测脚本（可选）¶
Local preview 入口的代理模式会自动注入探测脚本。如果你不在该入口中检查页面，而是使用其他浏览器环境，就需要在自己的页面中加载探测脚本。
已核实用法中提到两种可选方式。
方式一：在页面中加一行脚本。
<script src="http://127.0.0.1:3080/dsh-element-source/inject.js"></script>
方式二：在 Vite 项目中使用 dshElementSourcePlugin()。
dshElementSourcePlugin()
根据已核实事实，Vite 插件只在 dev 环境注入，production builds 不会被改动。
适用场景与注意¶
适合以下场景：
- 在 DSH 中修改 Vue、React、Svelte、Angular 前端代码。
- 需要从运行中的本地页面快速定位某个 UI 元素对应的源码。
- 希望把“页面元素”和“源码行号”直接带入 DSH 聊天上下文。
使用前注意以下几点。
1、定位到的文件必须保留在当前 session cwd 内。
也就是说，插件定位出的源码文件不能越出当前会话工作目录。
2、Local preview 的代理模式仅适用于 loopback hosts。
如果页面不是本地 loopback 地址，可以使用内置 sidebar browser，或普通浏览器标签页打开。
3、选中元素只会填充聊天草稿。
插件不会替你发送消息，是否发送完全由你决定。
4、插件以当前 dsh 进程权限运行。
安装前建议检查源码和许可证。本文已核实其许可证为 MIT。
5、本文引用的 README 抓取内容在配置示例后截断。
对于 autoSteer、mappings、proxyHosts 之外的配置字段，本文不展开，使用前以仓库最新文档为准。
链接¶
GitHub：
https://github.com/GULI-lab/DSH-element-source
已核实材料未提供固定的 DSH 插件目录页地址；如果你使用的是 DSH 插件目录，可在目录中按插件名 dsh-element-source 查看。
