Google Chrome 終於出手了，我又可以摸魚了

大家好，我是艾倫。

最近一直在當全端開發工程師，但開發前端遇到報錯的時候，總是要f12 看介面看各種報錯，然後再截圖給ClaudeCode。

流程倒是不長，但就是很繁瑣。

前段時間我還在想，Chrome 啥時候能出個能看網頁運行情況的MCP 啊。

結果，就在前幾天，答案來了。

Chrome 直接推出了一個叫做ChromeDevTools 的MCP。

能夠直接在Chrome 瀏覽器中調試網頁，享受DevTools 的調試功能和效能分析能力。

讓AI 終於能夠"開眼"寫程式碼了！

知道這個MCP 的第一時間我就火速的打開ClaudeCode 進行安裝了。

第一步，讓AI 學會登錄，像個真人一樣，能不能完成最基礎的操作。

使用的方法很簡單，輸入前端的URL，然後輸入關鍵字"Chrome MCP"就可以將瀏覽器喚醒。

然後再輸入我的要求，就可以看到瀏覽器在模擬我們的操作行為。

點擊"登錄"按鈕，輸入使用者名稱和密碼，最後再點擊"登錄"。

這不僅僅是自動化，這是「可視化」的自動化。

它能重現Bug、測試複雜的使用者流程，這對於定位那些偶發性的、難以復現的Bug，價值無可估量。

第二步，讓AI擁有“眼睛”，自己檢查工作。

如果只是模擬操作，我覺得還不夠驚豔。

真正的自動化，我覺得得讓它能自己檢查DevTools，自己檢查工作結果。

http://localhost:3000/ 使用Chrome MCP 打開這個頁面，並輸入使用者名稱和密碼super_admin/123456，進入到我的頁面，在帳號設定中將手機號綁定/更換以及設定密碼這兩個填空欄全部刪除。最後核實這次修改是否按照預期進行。

當我在最後加上了最後核實這次修改是否按照預期進行。 這句話時，Chrome MCP 會對介面進行一次截圖去檢視和記錄修改的結果。

相當於他用自己的"眼睛"幫我們檢查了一遍，真正做到了我前面所說的"開眼"寫代碼。

它不再是盲目執行指令的工具，而是一個能驗證結果、有閉環思維的夥伴。

第三步，從前端開發到效能分析優化。

Chrome MCP 在前端開發上的能力還遠不如此。

我們還能讓它自動進行效能追蹤分析，診斷具體的效能瓶頸，例如過高的LCP（最大內容繪製）指標等。

這個前端的終極難題，我現在把它拋給Chrome MCP。

前端的頁面載入有點慢，Chrome MCP 去分析原因，讓它變快一些，再給我一個效能瓶頸的報告。

Chrome MCP 發揮了它的優勢，我也直接一大個解放。

再也不需要打開Chrome DevTools 效能介面去看渲染、指令碼執行、網路請求等耗時點了。

現在Chrome MCP 自動幫我分析，找到了問題並直接上手改代碼。

最後，一份詳盡的效能優化報告自動產生。

我需要做的，僅僅是檢查一遍它的修改，然後提交。

模擬器- 有"眼睛"的測試員- 性能優化專家。

Chrome MCP 的出現，可以說徹底的改變了前端開發的方式，也可能徹底改變了前端開發者的命運。

從繁瑣、重複的實現細節中解放出來，將更多精力投入更高維度的思考：系統架構的設計、業務邏輯的梳理、產品體驗的創新等。

我們不再是那個需要時刻盯著儀表板的司機，而更像一個設定好目的地，並信任副駕駛能處理好路上一切狀況的領航員。

讓機器做機器擅長的事，讓人回歸人擅長的創造。

我想，這便是這場技術革命，帶給我們開發者最激動人心的未來。（阿倫AI工具庫）