過(guò)去幾年，AI 寫代碼的能力已經(jīng)讓人驚嘆，但有個(gè)老問(wèn)題：它不會(huì)調(diào)試。

有時(shí)候 AI 給你一段看上去沒(méi)毛病的代碼，一跑就出錯(cuò)。因?yàn)樗究床坏綖g覽器里的實(shí)際情況，純靠想象。

最近，Chrome 團(tuán)隊(duì)放了個(gè)大招 —— 推出 Chrome DevTools MCP 服務(wù)器。簡(jiǎn)單說(shuō)，就是把 DevTools 的能力通過(guò) MCP 協(xié)議開放出來(lái)，讓 AI 工具也能接入瀏覽器環(huán)境，做我們平時(shí)習(xí)慣的調(diào)試動(dòng)作。

MCP 是什么？

MCP，全稱 Model Context Protocol，是一個(gè)開放協(xié)議，作用是把外部工具和大模型連接起來(lái)。

Chrome DevTools MCP 就是這個(gè)協(xié)議在瀏覽器調(diào)試?yán)锏膽?yīng)用。

換句話說(shuō)，以后 AI 不光能“寫”，還可以“看”和“試”。

可以做什么？

對(duì)前端來(lái)說(shuō)，最直觀的變化就是：AI 不再盲修。它能拿到真實(shí)的頁(yè)面信息，然后再給建議。

比如：

?確認(rèn)修改是否生效：AI 給了一個(gè)修復(fù)方案，可以直接在瀏覽器里跑一下，而不是停留在紙面。

?排查報(bào)錯(cuò)：像請(qǐng)求 404、圖片加載失敗，它能看 Network 和 Console，告訴你哪里出問(wèn)題了。

?自動(dòng)操作頁(yè)面：填表單、點(diǎn)按鈕、跳轉(zhuǎn)頁(yè)面，幫你復(fù)現(xiàn) bug 或跑一遍用戶流程。

?樣式和布局問(wèn)題：能直接讀取 DOM 和 CSS 的實(shí)時(shí)狀態(tài)，比單純猜測(cè)更靠譜。

?性能診斷：?jiǎn)?dòng)一份性能追蹤，分析 LCP 或卡頓的原因。

這些，都是我們?nèi)粘Ｓ?DevTools 干的活，現(xiàn)在也可以交給 AI。

怎么用？

如果你有一個(gè)支持 MCP 的客戶端，只要在配置里加上：

"mcpServers": {
  "chrome-devtools": {
    "command": "npx",
    "args": ["chrome-devtools-mcp@latest"]
  }
}

然后你就可以在對(duì)話里直接下指令，比如：

“幫我檢查網(wǎng)站的 LCP。”

AI 會(huì)通過(guò) DevTools MCP 去采集數(shù)據(jù)，再給出分析。

為什么值得關(guān)注？

對(duì)我們來(lái)說(shuō)，這個(gè)變化的關(guān)鍵在于：AI 不光會(huì)寫代碼，還能自己下場(chǎng)調(diào)試。

以前它就像是照本宣科，給你一段看似合理的方案，但遇到復(fù)雜的前端環(huán)境——各種依賴、運(yùn)行時(shí)狀態(tài)、瀏覽器差異——往往就跑不通。

而現(xiàn)在，有了 DevTools MCP，AI 能直接接觸到真實(shí)的瀏覽器環(huán)境，看到頁(yè)面的實(shí)際情況，再給出建議。這讓它的回答更接地氣，而不是停留在空想。

當(dāng)然，目前還只是預(yù)覽版，能做的事有限，后面安全性、穩(wěn)定性都需要繼續(xù)打磨。但方向已經(jīng)很清晰：AI 不再只是一個(gè)寫代碼的幫手，而是逐漸變成可以陪你一起調(diào)試的伙伴。

寫在最后

過(guò)去，AI 更像是個(gè)甩代碼的顧問(wèn)；

現(xiàn)在，它開始有了“實(shí)戰(zhàn)經(jīng)驗(yàn)”。

對(duì)前端開發(fā)者來(lái)說(shuō)，這意味著：找 Bug 不再是一個(gè)人的戰(zhàn)斗，AI 甚至可能比你更快發(fā)現(xiàn)問(wèn)題。