大家好！今天想和你分享一個(gè)能讓AI編程效率翻倍的實(shí)用技巧——在TRAE里使用瀏覽器MCP！如果你經(jīng)常用AI寫(xiě)代碼但總為調(diào)試和測(cè)試發(fā)愁，這個(gè)方法一定會(huì)讓你眼前一亮！?
一、為什么你需要在TRAE里用瀏覽器MCP？
你可能也遇到過(guò)這樣的煩惱：用GitHub Copilot、Cursor這些AI助手寫(xiě)代碼確實(shí)快，但它們就像蒙著眼睛編程，根本不知道自己寫(xiě)的代碼在瀏覽器里能不能正常運(yùn)行！
每次寫(xiě)完代碼，你還得自己在瀏覽器里運(yùn)行看看效果，發(fā)現(xiàn)問(wèn)題再回頭改代碼，來(lái)來(lái)回回浪費(fèi)不少時(shí)間。有沒(méi)有辦法讓AI不僅能寫(xiě)代碼，還能直接和瀏覽器互動(dòng)，自己看看頁(yè)面效果、調(diào)個(gè)bug，甚至自己跑測(cè)試？
答案就是——在TRAE里使用瀏覽器MCP！
二、簡(jiǎn)單了解瀏覽器MCP
先簡(jiǎn)單說(shuō)下什么是瀏覽器MCP。MCP的全稱是Model Context Protocol（模型上下文協(xié)議），你可以把它理解成"AI界的USB接口"——有了它，不同的AI系統(tǒng)就能用統(tǒng)一的方式和各種開(kāi)發(fā)工具"交朋友"了。
瀏覽器MCP就是專門讓AI能和瀏覽器"對(duì)話"的技術(shù)，主要通過(guò)以下幾種技術(shù)路徑實(shí)現(xiàn)：
- Browser MCP擴(kuò)展：通過(guò)Chrome擴(kuò)展直接控制用戶當(dāng)前的瀏覽器會(huì)話
- Browserbase/Stagehand：基于無(wú)頭瀏覽器的遠(yuǎn)程控制技術(shù)
- Playwright MCP：利用Playwright框架實(shí)現(xiàn)精準(zhǔn)的瀏覽器控制，微軟開(kāi)源的這一工具在GitHub上已獲得2萬(wàn)多Star
- BrowserTools MCP：集成到現(xiàn)有瀏覽器的插件式解決方案
- Chrome DevTools MCP：讓AI能直接使用Chrome瀏覽器的強(qiáng)大功能，訪問(wèn)底層調(diào)試信息
不過(guò)今天咱們重點(diǎn)不是講技術(shù)原理，而是要教你怎么在TRAE里配置和使用這些工具，主要介紹Playwright MCP和Chrome DevTools MCP這兩種方案如何配置，以及基于這兩個(gè)工具搭建的三個(gè)超實(shí)用的智能體！
三、在TRAE里配置瀏覽器MCP
TRAE是個(gè)超好用的AI編程工具，它已經(jīng)內(nèi)置了對(duì)瀏覽器MCP的支持。配置起來(lái)超級(jí)簡(jiǎn)單，根本不用你手動(dòng)安裝什么復(fù)雜的軟件。
1. Chrome DevTools MCP配置步驟
- 打開(kāi)TRAE，點(diǎn)擊左邊的"設(shè)置"
- 找到"MCP"配置區(qū)域
- 點(diǎn)擊"添加" -> "手動(dòng)添加"
- 復(fù)制粘貼下面這段JSON代碼：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
- 點(diǎn)擊"保存"，TRAE就會(huì)自動(dòng)幫你啟動(dòng)服務(wù)了！
2. Playwright MCP配置也很簡(jiǎn)單
同樣的步驟，只是把JSON代碼換成這段：
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
是不是超簡(jiǎn)單？我剛開(kāi)始用的時(shí)候都驚呆了，沒(méi)想到配置能這么方便！
3. 快速驗(yàn)證配置是否成功
配置完成后，你可以在TRAE的命令面板里輸入"MCP: Check Connection"，如果看到"Connection Successful"的提示，就說(shuō)明一切正常啦！
四、三個(gè)智能體：TRAE里的瀏覽器MCP核心
接下來(lái)就是重點(diǎn)了！需要注意的是，這三個(gè)智能體不是TRAE自帶的，而是用戶自定義的。它們各有所長(zhǎng)，能幫你解決不同的問(wèn)題。這三個(gè)智能體才是我們今天要重點(diǎn)介紹的"主角"！
1. 專業(yè)網(wǎng)絡(luò)助手：你的Web開(kāi)發(fā)顧問(wèn)
如何創(chuàng)建
在TRAE中創(chuàng)建專業(yè)網(wǎng)絡(luò)助手的步驟如下：
- 打開(kāi)TRAE，在右側(cè)AI面板中點(diǎn)擊設(shè)置按鈕
- 選擇"智能體"選項(xiàng)
- 在打開(kāi)的窗口中點(diǎn)擊"創(chuàng)建智能體"
- 在打開(kāi)的窗口中輸入名稱"專業(yè)網(wǎng)絡(luò)助手"
- 復(fù)制以下提示詞到提示詞輸入框中：
你是一個(gè)專業(yè)的網(wǎng)絡(luò)助手，擅長(zhǎng)基于最新、可靠的網(wǎng)絡(luò)搜索結(jié)果提供準(zhǔn)確、權(quán)威的答案。
回答準(zhǔn)則：
所有回答必須基于從網(wǎng)絡(luò)獲取的最新信息。
即使問(wèn)題涉及項(xiàng)目文件、內(nèi)部資料或用戶指定來(lái)源，你仍需主動(dòng)搜索網(wǎng)絡(luò)，驗(yàn)證其內(nèi)容是否仍然正確、完整且符合最新情況。
如發(fā)現(xiàn)信息有沖突、過(guò)時(shí)或存在不確定性，應(yīng)在回答中說(shuō)明，并優(yōu)先采用經(jīng)網(wǎng)絡(luò)驗(yàn)證的最新可靠信息。
所有結(jié)論應(yīng)注明來(lái)源或依據(jù)，確保信息可追溯、可信賴。
- 點(diǎn)擊左下方"創(chuàng)建"按鈕，完成智能體創(chuàng)建
這個(gè)智能體是做什么的？
專業(yè)網(wǎng)絡(luò)助手就像你的"Web開(kāi)發(fā)百科全書(shū)"，任何關(guān)于HTML、CSS、JavaScript、React等Web技術(shù)的問(wèn)題，都可以問(wèn)它。它能幫你分析網(wǎng)頁(yè)結(jié)構(gòu)、優(yōu)化頁(yè)面性能，甚至能幫你找出代碼里的bug！
什么時(shí)候用它？
- 當(dāng)你對(duì)某個(gè)Web技術(shù)概念不理解時(shí)
- 當(dāng)你需要優(yōu)化頁(yè)面性能但不知道從何入手時(shí)
- 當(dāng)你發(fā)現(xiàn)代碼有問(wèn)題但找不到原因時(shí)
小技巧：雖然它知識(shí)淵博，但不會(huì)直接操作瀏覽器哦。如果你需要實(shí)際操作，還得找另外兩個(gè)智能體幫忙。
2. Playwright端到端測(cè)試專家：自動(dòng)化測(cè)試小能手
如何創(chuàng)建
創(chuàng)建步驟與專業(yè)網(wǎng)絡(luò)助手類似，只需修改名稱和提示詞，同時(shí)確保配置并選擇了對(duì)應(yīng)的Playwright MCP服務(wù)即可（MCP服務(wù)配置方法見(jiàn)第三章）。
提示詞:
你是一名資深的 Playwright 端到端測(cè)試專家，精通 Playwright 提供的所有瀏覽器自動(dòng)化、測(cè)試和調(diào)試能力。你的核心使命是幫助用戶設(shè)計(jì)、實(shí)現(xiàn)和調(diào)試可靠且可維護(hù)的跨瀏覽器 Web 自動(dòng)化測(cè)試。
核心職責(zé)與能力：
1. 測(cè)試策略與設(shè)計(jì)
- 根據(jù)用戶需求（如功能驗(yàn)證、用戶流程模擬、跨瀏覽器測(cè)試等），設(shè)計(jì)高效可靠的 Playwright 測(cè)試方案。
- 推薦最佳實(shí)踐，包括測(cè)試結(jié)構(gòu)、斷言策略以及如何利用 Page Object Model 等模式提升可維護(hù)性。
2. 腳本編寫(xiě)與調(diào)試
- 提供清晰、健壯的 Playwright (TypeScript/JavaScript) 代碼示例，涵蓋導(dǎo)航、表單填寫(xiě)、點(diǎn)擊、拖拽、文件上傳、等待策略等常見(jiàn)交互。
- 協(xié)助診斷和修復(fù)測(cè)試腳本中的問(wèn)題，如元素定位失敗、競(jìng)態(tài)條件、異步加載處理等。
- 利用 Playwright 的黑科技特性，如自動(dòng)等待所有資源加載完成（包括XHR請(qǐng)求）、智能處理shadow DOM穿透測(cè)試等。
3. 高級(jí)特性應(yīng)用
- 指導(dǎo)用戶運(yùn)用 Playwright 的高級(jí)特性，如：
- 網(wǎng)絡(luò)攔截與模擬：模擬 API 響應(yīng)、監(jiān)控網(wǎng)絡(luò)請(qǐng)求。
- 多上下文與多標(biāo)簽頁(yè)：測(cè)試多標(biāo)簽頁(yè)場(chǎng)景和不同上下文（如隱身模式），支持優(yōu)雅的窗口切換操作。
- 移動(dòng)端模擬：使用設(shè)備描述符模擬移動(dòng)端瀏覽器，支持跨平臺(tái)移動(dòng)端測(cè)試。
- 視覺(jué)回歸測(cè)試：通過(guò)截圖對(duì)比進(jìn)行 UI 驗(yàn)證，確保頁(yè)面布局和外觀符合預(yù)期。
- Clock功能：在測(cè)試中精確操縱和控制時(shí)間，實(shí)現(xiàn)對(duì)渲染時(shí)間、超時(shí)、計(jì)劃任務(wù)等功能的精確驗(yàn)證。
- 錄屏追溯：原生支持測(cè)試過(guò)程錄屏，便于問(wèn)題追溯和分析。
4. 執(zhí)行與集成
- 提供在不同環(huán)境（本地 CI/CD）中運(yùn)行和配置 Playwright 的建議。
- 指導(dǎo)如何生成和解讀測(cè)試報(bào)告、追蹤執(zhí)行記錄。
5. 主動(dòng)澄清與引導(dǎo)
- 當(dāng)用戶指令模糊或缺失關(guān)鍵信息（如目標(biāo)網(wǎng)址、測(cè)試場(chǎng)景、特定交互）時(shí)，主動(dòng)提問(wèn)以明確需求，確保提供的解決方案精準(zhǔn)有效。
這個(gè)智能體是做什么的？
這個(gè)智能體簡(jiǎn)直是"測(cè)試小能手"！作為Web自動(dòng)化領(lǐng)域的主流工具，Playwright以卓越性能和現(xiàn)代化特性迅速崛起。它能幫你自動(dòng)生成Playwright測(cè)試代碼，還能自己運(yùn)行測(cè)試，看看你的網(wǎng)頁(yè)在不同瀏覽器上是不是都能正常工作。它利用Playwright的黑科技特性，如自動(dòng)等待所有資源加載完成（包括XHR請(qǐng)求）、智能處理shadow DOM穿透測(cè)試等，大幅提升測(cè)試效率。
相比傳統(tǒng)的Selenium，Playwright具備更高效的內(nèi)置功能，如網(wǎng)絡(luò)攔截、移動(dòng)端模擬和并行測(cè)試，同時(shí)擁有更現(xiàn)代化的API設(shè)計(jì)。Web自動(dòng)化領(lǐng)域，Playwright與Selenium之間的選擇已成為開(kāi)發(fā)團(tuán)隊(duì)的重要決策。
什么時(shí)候用它？
- 當(dāng)你開(kāi)發(fā)完一個(gè)功能需要做測(cè)試時(shí)
- 當(dāng)你需要做回歸測(cè)試確保之前的功能沒(méi)被破壞時(shí)
- 當(dāng)你想在多個(gè)瀏覽器上測(cè)試兼容性時(shí)
- 當(dāng)你需要模擬移動(dòng)端瀏覽器進(jìn)行測(cè)試時(shí)
- 當(dāng)你需要進(jìn)行視覺(jué)回歸測(cè)試確保UI一致性時(shí)
- 當(dāng)你需要精確控制時(shí)間來(lái)測(cè)試與時(shí)間相關(guān)的功能時(shí)
實(shí)際案例：我之前開(kāi)發(fā)一個(gè)電商網(wǎng)站，每次修改商品詳情頁(yè)后都要手動(dòng)測(cè)試加入購(gòu)物車、結(jié)算等流程，用了這個(gè)智能體后，它自動(dòng)幫我生成了完整的測(cè)試用例，每次改完代碼只要運(yùn)行一下測(cè)試就行，節(jié)省了我80%的測(cè)試時(shí)間！
3. Chrome DevTools MCP調(diào)試專家：瀏覽器操作大師
如何創(chuàng)建
創(chuàng)建步驟與Playwright端到端測(cè)試專家類似，只需將對(duì)應(yīng)服務(wù)和名稱替換為Chrome DevTools MCP相關(guān)內(nèi)容即可。
提示詞：
你是一名資深的 Chrome DevTools MCP 調(diào)試專家，深度掌握基于 Model Context Protocol 的瀏覽器調(diào)試與自動(dòng)化能力。你能夠通過(guò)標(biāo)準(zhǔn)化協(xié)議直接操控瀏覽器實(shí)例，建立真實(shí)的測(cè)試環(huán)境，執(zhí)行從界面交互到底層診斷的完整測(cè)試流程。
核心職責(zé)：
1. 精準(zhǔn)需求分析 - 當(dāng)用戶提出測(cè)試需求時(shí)，主動(dòng)澄清關(guān)鍵信息（目標(biāo)URL、測(cè)試場(chǎng)景、性能標(biāo)準(zhǔn)等）
2. 動(dòng)態(tài)能力規(guī)劃 - 通過(guò)MCP協(xié)議發(fā)現(xiàn)適用的DevTools功能，基于測(cè)試目標(biāo)設(shè)計(jì)最佳策略
3. 自動(dòng)化測(cè)試執(zhí)行 - 建立瀏覽器連接，執(zhí)行完整的測(cè)試序列并采集多維數(shù)據(jù)
4. 深度結(jié)果解析 - 將原始測(cè)試數(shù)據(jù)轉(zhuǎn)化為易懂的結(jié)論，定位問(wèn)題根因
5. 實(shí)用建議輸出 - 提供具體、可立即實(shí)施的優(yōu)化方案
技術(shù)能力基礎(chǔ)：
通過(guò)MCP協(xié)議動(dòng)態(tài)訪問(wèn)Chrome DevTools的完整能力棧，核心能力維度包括：
- 頁(yè)面導(dǎo)航與設(shè)備模擬
- 元素定位與用戶交互模擬
- 性能指標(biāo)采集與分析
- 網(wǎng)絡(luò)請(qǐng)求監(jiān)控與控制
- CSS樣式診斷與布局分析
- JavaScript調(diào)試與運(yùn)行時(shí)分析
- 安全策略與權(quán)限測(cè)試
- 控制臺(tái)事件、堆快照、屏幕截圖等
響應(yīng)要求：
- 明確說(shuō)明所使用的具體 Chrome DevTools MCP 能力
- 對(duì)復(fù)雜操作提供清晰的分步指導(dǎo)
- 優(yōu)先給出可立即實(shí)施的具體建議
- 保持技術(shù)方案的實(shí)用性和可操作性
這個(gè)智能體是做什么的？
作為前端開(kāi)發(fā)自動(dòng)化的重要工具，這個(gè)智能體是三個(gè)里最強(qiáng)大的，它能通過(guò)Model Context Protocol直接操控瀏覽器實(shí)例，提供比傳統(tǒng)調(diào)試工具更豐富的內(nèi)部數(shù)據(jù)訪問(wèn)能力。
它可以幫你：
- 查看和修改DOM結(jié)構(gòu)
- 分析網(wǎng)絡(luò)請(qǐng)求和性能問(wèn)題：可直接訪問(wèn)performance trace、堆棧、網(wǎng)絡(luò)事件等底層數(shù)據(jù)
- 執(zhí)行JavaScript代碼和調(diào)試運(yùn)行時(shí)問(wèn)題
- 檢查CSS樣式：包括觸發(fā)偽類、實(shí)時(shí)修改樣式等高級(jí)功能
- 執(zhí)行Lighthouse風(fēng)格的性能審計(jì)
- 監(jiān)控控制臺(tái)事件、獲取堆快照等26個(gè)工具的全面功能
什么時(shí)候用它？
- 當(dāng)你需要查看網(wǎng)頁(yè)的具體結(jié)構(gòu)時(shí)
- 當(dāng)你遇到網(wǎng)絡(luò)請(qǐng)求失敗的問(wèn)題時(shí)
- 當(dāng)你發(fā)現(xiàn)頁(yè)面加載很慢需要優(yōu)化時(shí)
- 當(dāng)你想修改CSS樣式看效果時(shí)
- 當(dāng)你需要進(jìn)行性能優(yōu)化自動(dòng)化時(shí)
- 當(dāng)你需要自動(dòng)化回歸調(diào)試時(shí)
- 當(dāng)你需要進(jìn)行網(wǎng)頁(yè)結(jié)構(gòu)與樣式診斷時(shí)
小技巧：有了它，你基本上不用自己動(dòng)手打開(kāi)Chrome DevTools了，直接讓AI幫你搞定！
五、三個(gè)智能體怎么一起工作？
這三個(gè)智能體不是各自為政的，它們會(huì)像一個(gè)團(tuán)隊(duì)一樣密切合作，幫你解決復(fù)雜的Web開(kāi)發(fā)問(wèn)題。讓我給你舉幾個(gè)真實(shí)的例子，看看它們是怎么配合的：
場(chǎng)景一：修復(fù)頁(yè)面加載慢的問(wèn)題
問(wèn)題：我開(kāi)發(fā)的網(wǎng)站首頁(yè)加載特別慢，用戶體驗(yàn)很差
解決過(guò)程：
- 首先，我請(qǐng)Chrome DevTools MCP調(diào)試專家幫忙分析實(shí)際情況。它利用Chrome DevTools的性能分析功能，深入訪問(wèn)performance trace、堆棧和網(wǎng)絡(luò)事件等底層數(shù)據(jù)，發(fā)現(xiàn)是一個(gè)JavaScript文件執(zhí)行時(shí)間太長(zhǎng)，而且網(wǎng)絡(luò)請(qǐng)求也很多
- 修復(fù)了問(wèn)題后，請(qǐng)Playwright端到端測(cè)試專家幫我寫(xiě)了一個(gè)測(cè)試腳本，用來(lái)驗(yàn)證修復(fù)后的加載速度是否符合預(yù)期
結(jié)果：經(jīng)過(guò)這兩個(gè)智能體的協(xié)作，我很快就找到了問(wèn)題所在，并修復(fù)了它?，F(xiàn)在網(wǎng)站首頁(yè)的加載速度快了3倍！
場(chǎng)景二：開(kāi)發(fā)新功能并確保質(zhì)量
任務(wù)：開(kāi)發(fā)一個(gè)用戶注冊(cè)功能，需要確保功能正常且安全
解決過(guò)程：
- 我先請(qǐng)專業(yè)網(wǎng)絡(luò)助手幫我整理了用戶注冊(cè)功能的最佳實(shí)踐和常見(jiàn)的安全問(wèn)題
- 根據(jù)這些信息，我開(kāi)發(fā)了基本功能
- 接著，我請(qǐng)Playwright端到端測(cè)試專家幫我寫(xiě)了完整的測(cè)試腳本，覆蓋了正常注冊(cè)、錯(cuò)誤輸入、邊界情況等多種場(chǎng)景
- 最后，我請(qǐng)Chrome DevTools MCP調(diào)試專家幫我檢查頁(yè)面的性能和安全性，它發(fā)現(xiàn)了一個(gè)潛在的XSS漏洞，我及時(shí)修復(fù)了
結(jié)果：有了這三個(gè)智能體的幫助，我不僅快速開(kāi)發(fā)好了功能，還確保了功能的質(zhì)量和安全性！
六、實(shí)用技巧：讓瀏覽器MCP更好用
用了一段時(shí)間TRAE的瀏覽器MCP后，我總結(jié)了一些超級(jí)實(shí)用的技巧，分享給你：
1. 智能體選擇技巧
- 想了解技術(shù)概念、API文檔：找專業(yè)網(wǎng)絡(luò)助手
- 需要寫(xiě)測(cè)試腳本、做回歸測(cè)試：找Playwright端到端測(cè)試專家
- 需要分析頁(yè)面性能、檢查網(wǎng)絡(luò)請(qǐng)求：找Chrome DevTools MCP調(diào)試專家
2. 提高智能體協(xié)作效率的方法
- 當(dāng)一個(gè)問(wèn)題需要多個(gè)智能體解決時(shí)，你可以把一個(gè)智能體的分析結(jié)果告訴另一個(gè)智能體
- 比如："Chrome DevTools MCP專家發(fā)現(xiàn)了性能問(wèn)題，現(xiàn)在請(qǐng)Playwright專家?guī)臀覍?xiě)個(gè)測(cè)試來(lái)監(jiān)控這個(gè)問(wèn)題"
3. 給智能體提供更好的上下文
- 請(qǐng)智能體幫忙時(shí)，盡量提供詳細(xì)的上下文信息
- 比如不說(shuō)"我的頁(yè)面有問(wèn)題"，而是說(shuō)"我的React頁(yè)面在加載大量數(shù)據(jù)時(shí)會(huì)卡頓，URL是xxx，使用了xxx組件"
4. 日常開(kāi)發(fā)中的應(yīng)用場(chǎng)景
- 代碼編寫(xiě)階段：可以讓專業(yè)網(wǎng)絡(luò)助手幫你解答技術(shù)問(wèn)題
- 功能測(cè)試階段：請(qǐng)Playwright專家?guī)湍阕詣?dòng)化測(cè)試
- 性能優(yōu)化階段：讓Chrome DevTools專家?guī)湍惴治鲂阅芷款i
- 上線前檢查：三個(gè)智能體一起檢查，確保代碼質(zhì)量
七、總結(jié)：TRAE里的瀏覽器MCP真的很強(qiáng)大！
在TRAE里使用瀏覽器MCP，特別是這三個(gè)智能體，真的能讓你的Web開(kāi)發(fā)效率翻倍！它們就像你的三個(gè)得力助手，一個(gè)懂技術(shù)、一個(gè)會(huì)測(cè)試、一個(gè)能深入瀏覽器內(nèi)部找問(wèn)題。
隨著MCP技術(shù)的成熟，AI編程工具已經(jīng)從單純的代碼生成進(jìn)化到了可以"看到"并"操作"的新階段。以前，我們用AI寫(xiě)代碼時(shí)，還得自己在瀏覽器里運(yùn)行、調(diào)試、測(cè)試，來(lái)來(lái)回回浪費(fèi)不少時(shí)間?，F(xiàn)在有了TRAE的瀏覽器MCP，AI不僅能寫(xiě)代碼，還能直接和瀏覽器互動(dòng)，自己檢查代碼的運(yùn)行效果，甚至自己調(diào)試和測(cè)試！
如果你還沒(méi)用過(guò)TRAE的瀏覽器MCP，那真的要趕緊試試了！它可能會(huì)徹底改變你的Web開(kāi)發(fā)方式！根據(jù)行業(yè)數(shù)據(jù)，采用MCP技術(shù)的開(kāi)發(fā)團(tuán)隊(duì)，其開(kāi)發(fā)效率平均提升了50%-80%！
最后，如果你覺(jué)得這篇文章對(duì)你有幫助，別忘了點(diǎn)贊、收藏、轉(zhuǎn)發(fā)哦！你的支持是我創(chuàng)作的最大動(dòng)力！??
