在 DeepSeek Harness 的 Web 开发中，生产环境的构建产物经过压缩和打包，运行时点击界面元素往往无法直接定位到具体的源码位置。这给调试和修改 UI 带来了不便。dsh-frontend-inspector 解决了这一痛点，它通过 Host 扩展点读取运行时的 dsh.client bundles，提供生产级的“点击查看源码”能力。
这是 Lovstudio 维护的 @lovstudio/dsh-frontend-inspector 插件。它不修补或重建 DeepSeek Harness 仓库内的文件，而是利用外部 Vite 进程读取干净的代码检出，并通过 Lovinsp 工具链将编译后的 JSX 映射回原始的 .tsx 文件。
核心功能¶
该插件支持两种运行模式，具体行为取决于当前环境：
- 源码检出模式：需要本地有一个 DeepSeek Harness 的代码检出。此模式下通过 Source Maps 提供精确的 TypeScript 文件、行号和列号，点击可直接在编辑器中打开。
- npx 模式：无需本地检出。此模式下仅标记插件 bundles，标记来源为
lib/client.js中的//#region文件标记，提供文件级定位，点击默认在 GitHub 上打开。
无论哪种模式，核心交互方式一致：按住快捷键点击元素。
安装与启用¶
在终端中执行以下命令安装插件：
npx @deepseek-ai/dsh plugin --profile web add -w github:lovstudio/dsh-frontend-inspector#v0.1.7
安装后，DeepSeek Harness Web 进程启动时会自动识别环境并选择对应模式。
典型用法¶
快捷键操作¶
在 DSH Web 界面中：
* 源码模式：按住 Shift+Option（Windows 下为 Shift+Alt）移动鼠标高亮元素，点击后默认在编辑器中打开源码。
* npx 模式：按住 Shift+Option 点击复制源码 URL；按住 Command（Windows 下为 Ctrl）点击直接在 GitHub 上打开对应文件。
源码模式详细步骤¶
如果本地有 Harness 代码检出：
1. 确保在 Harness 项目根目录下执行了 pnpm run build。
2. 运行 npx @deepseek-ai/dsh plugin --profile web add -w github:lovstudio/dsh-frontend-inspector#v0.1.7。
3. 启动 Web 服务。
4. 在浏览器中按住快捷键点击元素，即可跳转到本地编辑器。
npx 模式详细步骤¶
如果仅使用 npx 安装：
1. 执行 npx @deepseek-ai/dsh plugin --profile web add -w github:lovstudio/dsh-frontend-inspector#v0.1.7。
2. 启动 Web 服务。
3. 插件会自动覆盖插件 bundles 的标记，利用 //#region 标记解析源码位置。
适用场景与注意¶
- 适用场景：需要快速定位 DeepSeek Harness Web 界面组件源码的开发者，或在无法配置本地开发环境时查看插件源码。
- 权限注意：插件以当前 DSH 进程的权限运行，确保对目标仓库有读取权限。
- 文件生成：生成的文件、Vite 缓存和 Lovinsp 状态保留在
DSH_HOME/cache/frontend-inspector目录下。 - npx 模式限制：在 npx 模式下，标记仅覆盖插件 bundles，且仅覆盖
lib/client.js中的//#region标记解析出的内容。
总结¶
dsh-frontend-inspector 通过 Lovinsp 桥接和 Host 扩展点，将运行时的 DOM 元素映射回源码位置。它在不修改 Harness 仓库的前提下，实现了从 Web UI 到源码编辑器的无缝跳转。
