前言¶
在 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 查看。
