Inspector

Inspector 是什麼？

Inspector 是一款視覺化前端編輯器，將您的瀏覽器連接到 AI coding agent（如 Claude Code、Codex 或 Cursor）。其核心目的是讓您視覺化編輯並迭代 React、Next.js 或 Vite 應用程式的前端，同時在工作流程中使用您的 agent。

Inspector 讓您直接在介面中操作元素—移動元素、編輯文字並留下註解—而無需僅透過程式碼檔案工作，同時保持變更與本機程式碼庫的連結。

主要功能

• 視覺化編輯前端元素：在瀏覽器中視覺化移動元素並直接編輯文字，無需完全切換到程式碼即可調整 UI。
• 視覺編輯器中的註解驅動協作：留下註解標示變更內容，讓您更容易與 coding agent 迭代。
• 連接到 AI coding agent (Claude Code、Codex、Cursor)：Inspector 將您的編輯工作階段連結到 agent 帳戶，讓工作流程融入 AI 驅動的程式碼編寫。
• 本機程式碼庫工作流程：Inspector 連接到本機程式碼庫，表示編輯是在現有應用程式的脈絡中進行，而非獨立的託管環境。
• 支援現代前端框架 (React、Next.js、Vite)：產品針對這些技術堆疊設計，編輯器工作流程與常見網頁開發環境相符。

如何使用 Inspector

1. 在 macOS 上安裝 Inspector（網站顯示適用 macOS）。
2. 開啟 Inspector 並連接到您的 AI agent 帳戶，選擇如 Claude Code、Codex 或 Cursor 等 agent。
3. 將 Inspector 指向您的本機程式碼庫（網站表示可連接到任何本機程式碼庫）。
4. 啟動視覺編輯器，開始透過移動元素、編輯文字及新增註解來編輯前端。

使用情境

• 開發期間快速 UI 調整：當需要微調佈局間距或重新定位元件時，使用視覺編輯器移動元素並更新文字，變更保持與本機應用程式的連結。
• 搭配 agent 輔助迭代設計：在視覺編輯器中留下註解指定變更內容，再使用連線的 AI coding agent 協助實作更新。
• React/Next.js 專案的前端編輯：對於使用 React、Next.js 或 Vite 的團隊，Inspector 作為基於瀏覽器的 UI 編輯層，同時繼續從本機程式碼庫工作。
• 前端除錯與精煉：若 UI 元素行為不如預期，使用視覺編輯器識別目標元素並視覺化調整，之後將變更同步回開發工作流程。
• 基於註解的交接：當多人檢視 UI 變更時，視覺編輯器中的註解可捕捉意圖（變更內容及位置），再與 agent 迭代實作。

常見問題

• Inspector 適用哪些作業系統？ 網站表示適用 macOS。

• Inspector 適用我的本機專案檔案嗎？ 是的。網站表示 Inspector 連接到 任何本機程式碼庫。

• Inspector 支援哪些 AI coding agent？ 網站列出 Claude Code、Codex 和 Cursor 為支援的 agent。

• 適用哪些前端應用程式類型？ 網站提及 React、Next.js 和 Vite。

• 視覺編輯器中可編輯什麼？ 網站表示您可以 移動元素、編輯文字 並 留下註解 來進行變更。

替代方案

• React/Next.js/Vite 的程式碼優先 UI 編輯 (本機 IDE)：使用標準編輯器（例如直接撰寫並執行程式碼變更）。這通常提供完整控制，但缺乏基於瀏覽器的視覺操作工作流程。
• 視覺 UI 建構器/工作流程：專注拖拉 UI 建構的工具可加速佈局變更，但可能無法以相同方式連接到 AI coding agent，或直接將變更對應到本機程式碼庫。
• 無視覺前端編輯器的 AI 輔助程式碼工具：基於 agent 的程式碼工作流程可從提示產生程式碼變更，但無法在瀏覽器中直接移動元素並註解 UI。
• 基於瀏覽器的元件檢查工具：開發者導向的檢查工具有助了解佈局與 DOM 結構，但通常不提供連接到 AI coding agent 的完整視覺編輯工作階段以進行迭代。