DevLensPro 免費嗎？

是。官方網站將它列為免費且開源，付費方案欄位是 $0。你仍需要自己的 Claude Code 存取權，DevLensPro 並不包含在內。

它支援哪些瀏覽器與工具？

它是一款 Chrome 擴充功能，並搭配 Claude Code。如果你依賴其他瀏覽器或其他 AI 程式助理，目前它不符合你的設定。

DevLensPro 會把我的資料送到雲端嗎？

不會。專案聲明所有資料都留在你的機器上，不需要雲端。這樣的設計讓它適合私有或內部程式碼，在那種情境下把頁面脈絡送出裝置是一大阻礙。

它如何連上 Claude Code？

透過 Model Context Protocol（MCP），並以 WebSocket 連線進行同步。把它想成一座把點擊變成任務的瀏覽器與 Claude Code 橋樑。網站說原生 MCP 整合在擴充功能安裝好後不需要額外設定。

它能自動編輯 React 程式碼嗎？

它能加速這件事。DevLensPro 偵測 React 元件並把它們的原始檔案路徑交給 Claude Code，再由後者進行編輯。它本身不會改程式碼；動手寫的是 Claude Code。

我需要 Ralph 代理才能用 DevLensPro 嗎？

不需要。Ralph 是選用的。沒有它，你點擊，Claude Code 在你參與流程的情況下修正元素。有了它，修正可以自己走得更遠，甚至開啟拉取請求。如果你本來就活在 Claude Code 裡，又花太多時間描述頁面上哪裡出錯，DevLensPro 值得花幾分鐘安裝。指向壞掉的元素、交給 AI，讓它找出檔案。對其他人來說，Claude Code 這項要求讓它仍是一款專門工具，而非通用的瀏覽器除錯器。

DevLensPro

DevLensPro · 程式設計

DevLensPro 是一款免費、開源的瀏覽器擴充功能，將你的瀏覽器與 Claude Code 連起來。你按住 Option 並點擊頁面上的任何元素，擴充功能就會把 Claude Code 用來定位與修正對應程式碼所需的完整脈絡交給它：選擇器、樣式、螢幕截圖、主控台記錄，以及 React 元件資訊。這是一款為已經在 Claude Code 裡工作的開發者打造的 AI 介面除錯工具。改變了什麼？你不用再描述畫面上哪裡出錯。那麼，它到底怎麼運作？

前往工具

關於 DevLensPro

DevLensPro 是什麼

DevLensPro 是一款 Chrome 擴充功能，把瀏覽器裡的一次點擊變成 Claude Code 裡的一項任務。你不必再複製網址、描述壞掉的按鈕、翻遍整份程式碼，只要指向問題所在，讓 AI 一路追回原始檔案。這款工具把所有東西留在你的機器上，並透過 Model Context Protocol（MCP）與 Claude Code 溝通，中間沒有雲端帳號。

它解決的核心問題是距離。前端錯誤通常發生在已渲染的頁面上，但修正卻在程式碼裡。靠人工填補這段落差很慢。DevLensPro 把可見的脈絡、實際套用的 CSS、主控台輸出與 React 元件路徑全部綁在一次點擊上，從而填補落差。這就是核心概念。

最大的限制在安裝。DevLensPro 只能搭配 Claude Code，而且擴充功能要在開發者模式下手動安裝，而非從商店安裝，這代表你不會有一鍵更新，也不會有已發佈擴充功能會幫你做的自動版本檢查。如果你不用 Claude Code，這裡目前沒有你能用的東西。

開始使用

從瀏覽器的擴充功能頁面，以開發者模式載入未封裝的 DevLensPro Chrome 擴充功能來安裝。
透過 MCP 協定將它連上 Claude Code；網站指出除了原生整合之外，不需要額外設定。
在瀏覽器中開啟你正在執行的應用程式，按住 Option 並點擊你想修改的元素。
加上簡短註記，若想要結構化且詳盡的任務描述就點 AI Enhance，然後送出。
看著 Claude Code 把頁面網址對應到你本機的專案資料夾，定位程式碼並套用修正。

產品資訊

快速了解 DevLensPro 的定價、支援平台與效能。

免費方案是

付費方案$0

平台Chrome (browser extension), works with Claude Code

開發者DevLensPro

類別程式設計

發布日期Sep 2025

最近更新Sep 2025

網站訪問量N/A

網站全球排名N/A

API 提供狀態N/A

適合對象

這項工具最適合的使用者、任務與情境。

使用者

使用 Claude Code 的前端開發者：擴充功能移除了手動描述介面錯誤的步驟，所以任何已經在這個流程裡工作的人都適合。
React 開發者：內建的 React 元件偵測讓它在 React 程式碼上最有用，在純 HTML 或其他框架上就沒那麼實用。
單人開發者與獨立開發者：因為免費又在本機執行，沒有成本門檻。你仍需要一份 Claude Code 授權，而那才是真正的花費。

任務

修正版面與樣式錯誤：指向歪掉的按鈕，讓 AI 讀取真正算出來的 CSS，而不是用猜的。
除錯執行階段錯誤：擷取到的主控台記錄會跟著點擊一起送出，錯誤不必另外貼上就能到達 Claude Code。
把粗略筆記變成任務描述：AI Enhance 功能會把「按鈕看起來怪怪的」改寫成清楚具體的要求。

情境

檢視本機開發版本：點擊你正在執行的應用程式上的任何元素，直接跳到渲染它的程式碼。
交付小幅介面調整：搭配 Ralph 代理，讓修正不必由你逐步操作也能進行。
離線作業或處理敏感程式碼：所有東西都留在你的機器上，適合你不想把頁面資料送到第三方的專案。

主要功能

Option+點擊元素擷取

DevLensPro 是一款 Option+點擊的瀏覽器工具。核心手勢很簡單。按住 Option、點擊元素，DevLensPro 就把它抓下來。擴充功能一次動作就記錄下 CSS 選擇器、標籤名稱、尺寸、位置與類別名稱。這些正是 Claude Code 判斷你指向頁面哪個部分所需的資料。不必打字。

完整脈絡資料包

一次點擊送出的不只是一個選擇器。DevLensPro 會打包一張標示出該元素的整頁截圖、實際套用的計算後 CSS 屬性、元素的文字內容，以及任何主控台記錄。Claude Code 於是能看到和你大致相同的畫面。這就是「按鈕太靠左」與造成問題的確切 padding 數值之間的差別。

React 元件偵測

在 React 應用程式中，擴充功能會檢查 Fiber 內部結構，辨識元素背後的元件及其原始檔案路徑。這個捷徑省去搜尋步驟，因為 Claude Code 拿到的是檔案位置，而不是渲染後的節點。這是最綁定單一框架的功能，所以在非 React 的程式碼上價值就降低了。

MCP 協定整合

DevLensPro 透過 Model Context Protocol 連上 Claude Code，那是 Anthropic 用來把工具連接到 AI 代理的標準。這個 MCP 瀏覽器整合就是整個 AI 程式開發流程的捷徑：不必匯出、不必複製貼上、沒有手動步驟。網站說擴充功能安裝好後就不需要額外設定。同步透過 WebSocket 進行，所以一次點擊會即時送達 Claude Code。