在 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 到源碼編輯器的無縫跳轉。
