絡(luò)請求)
1. 移動端調(diào)試的困局為什么AI看不見你的H5日志做過H5開發(fā)的人都有一個共同的痛頁面在手機(jī)上跑日志在手機(jī)里而你坐在電腦前。Chrome DevTools 的遠(yuǎn)程調(diào)試雖然能用但限制極多——需要USB連接、需要開啟開發(fā)者模式、部分瀏覽器內(nèi)核根本不支持、iOS上的Safari Inspector還經(jīng)常斷連。更別提那些嵌在App WebView里的頁面你連入口都找不到。傳統(tǒng)的做法是在頁面里手動掛一個vConsole然后在手機(jī)屏幕上戳來戳去。這個方案本身沒問題vConsole確實是移動端調(diào)試的利器它能在頁面上生成一個懸浮面板展示console日志、網(wǎng)絡(luò)請求、DOM結(jié)構(gòu)、Storage等信息。但問題在于這些信息只有人眼能看到AI看不到。現(xiàn)在大家都在用AI輔助debug你把代碼貼給AIAI幫你分析問題。但AI能拿到的只有你手動復(fù)制粘貼的那幾行日志上下文嚴(yán)重缺失。你告訴AI接口報錯了AI問你報什么錯你再去vConsole里翻翻到了再貼過去。這個來回過程極其低效而且經(jīng)常漏掉關(guān)鍵信息——比如請求頭里的某個字段、響應(yīng)體的完整結(jié)構(gòu)、報錯前后的日志順序。MCPModel Context Protocol的出現(xiàn)改變了這個局面。MCP本質(zhì)上是一套讓AI模型能夠調(diào)用外部工具的協(xié)議標(biāo)準(zhǔn)你可以把它理解成給AI裝了一雙手。通過MCPAI不再只能被動地接收你粘貼的文本而是可以主動去調(diào)用工具、獲取數(shù)據(jù)、執(zhí)行操作。把vConsole和MCP結(jié)合起來就意味著AI可以直接讀取H5頁面上的日志和網(wǎng)絡(luò)請求不需要你手動搬運。這篇文章要講的就是怎么把這兩件事串起來。核心思路是在H5頁面里集成vConsole通過WebSocket把vConsole捕獲的日志和請求數(shù)據(jù)實時推送到一個本地服務(wù)再把這個服務(wù)封裝成MCP Server讓AI通過MCP協(xié)議直接查詢。整條鏈路打通之后你只需要對AI說幫我看看剛才那個頁面為什么白屏AI就能自己去拉日志、分析請求、定位問題。適合閱讀這篇文章的人有H5開發(fā)經(jīng)驗的前端工程師、正在探索AI輔助開發(fā)流程的技術(shù)人、對MCP協(xié)議感興趣但還沒找到落地場景的開發(fā)者。不需要你精通WebSocket或MCP協(xié)議細(xì)節(jié)我會把每一步的原理和操作都講清楚。2. 拆解這條鏈路vConsole、WebSocket與MCP各自扮演什么角色2.1 vConsole的能力邊界與數(shù)據(jù)出口vConsole是騰訊開源的一個輕量級移動端調(diào)試面板壓縮后只有幾十KB對頁面性能影響極小。它的核心能力包括Console面板捕獲所有console.log/warn/error/info輸出包括對象展開Network面板記錄所有XMLHttpRequest和fetch請求的URL、方法、狀態(tài)碼、請求頭、響應(yīng)頭、響應(yīng)體、耗時Element面板查看和修改DOM結(jié)構(gòu)Storage面板查看Cookie、LocalStorage、SessionStorageSystem面板顯示UA、屏幕尺寸、網(wǎng)絡(luò)類型等關(guān)鍵點在于vConsole提供了一個插件機(jī)制和事件系統(tǒng)。你可以通過vConsole.VConsolePlugin自定義插件也可以直接hook它的內(nèi)部方法來獲取數(shù)據(jù)。但更優(yōu)雅的方式是利用vConsole的vConsole.core對象它暴露了一些內(nèi)部API。不過直接hook vConsole內(nèi)部API有個問題版本升級可能導(dǎo)致API變化。所以更穩(wěn)妥的方案是自己攔截console方法和XHR/fetch把數(shù)據(jù)同時輸出給vConsole和WebSocket。這樣即使vConsole升級你的數(shù)據(jù)通道也不受影響。具體做法是在頁面加載vConsole之前先包裝原生的console方法const originalLog console.log; const originalWarn console.warn; const originalError console.error; function sendToServer(type, args) { const payload { type: type, timestamp: Date.now(), args: Array.from(args).map(arg { try { return typeof arg object ? JSON.stringify(arg) : String(arg); } catch (e) { return [Unserializable]; } }) }; ws.send(JSON.stringify(payload)); } console.log function(...args) { originalLog.apply(console, args); sendToServer(log, args); }; // 同理處理warn和error對于網(wǎng)絡(luò)請求攔截XMLHttpRequest的open和send方法以及fetch函數(shù)。這里要注意的是攔截必須在vConsole初始化之前完成否則vConsole會先捕獲到原始方法。2.2 WebSocket作為實時數(shù)據(jù)通道的選型理由為什么用WebSocket而不是HTTP輪詢原因很簡單日志和請求是實時產(chǎn)生的輪詢有延遲且浪費資源。WebSocket建立一次連接后可以雙向通信服務(wù)端可以主動推送指令比如開始錄制、清空日志客戶端可以實時上報數(shù)據(jù)。WebSocket的心跳機(jī)制也是必須考慮的。移動端網(wǎng)絡(luò)環(huán)境復(fù)雜連接可能因為切后臺、網(wǎng)絡(luò)切換等原因斷開。標(biāo)準(zhǔn)做法是客戶端每隔30秒發(fā)送一個ping幀服務(wù)端回復(fù)pong幀。如果連續(xù)3次沒有收到pong就認(rèn)為連接斷開觸發(fā)重連。let heartbeatTimer null; let pongReceived true; function startHeartbeat() { heartbeatTimer setInterval(() { if (!pongReceived) { console.warn(WebSocket heartbeat lost, reconnecting...); ws.close(); reconnect(); return; } pongReceived false; ws.send(JSON.stringify({ type: ping })); }, 30000); } ws.onmessage (event) { const data JSON.parse(event.data); if (data.type pong) { pongReceived true; } };重連策略采用指數(shù)退避第一次1秒后重連第二次2秒第三次4秒最多到30秒。這樣既不會頻繁重連造成服務(wù)端壓力也不會在短暫斷網(wǎng)后長時間失聯(lián)。2.3 MCP Server的角色定位與協(xié)議要點MCP Server在這條鏈路里的角色是數(shù)據(jù)中轉(zhuǎn)和查詢接口。它做三件事接收WebSocket客戶端上報的日志和請求數(shù)據(jù)存入內(nèi)存或本地文件暴露MCP工具Tools讓AI可以查詢這些數(shù)據(jù)提供資源Resources讓AI可以讀取完整的日志文件MCP協(xié)議的核心概念包括ToolsAI可以調(diào)用的函數(shù)比如get_logs、get_requests、clear_logsResourcesAI可以讀取的數(shù)據(jù)源比如logs://latest、requests://allPrompts預(yù)定義的提示模板這個場景下用得少一個典型的MCP工具定義長這樣{ name: get_logs, description: 獲取指定時間范圍內(nèi)的console日志, inputSchema: { type: object, properties: { since: { type: number, description: 起始時間戳毫秒不傳則返回最近100條 }, level: { type: string, enum: [log, warn, error, info], description: 日志級別過濾 }, keyword: { type: string, description: 關(guān)鍵詞搜索 } } } }AI通過MCP協(xié)議調(diào)用這個工具時會傳入?yún)?shù)MCP Server執(zhí)行查詢并返回結(jié)果。整個過程對AI來說是透明的它只需要知道我有一個工具可以查日志。3. 從零搭建vConsole數(shù)據(jù)上報與MCP Server的完整實現(xiàn)3.1 頁面端改造在不破壞原有調(diào)試體驗的前提下增加數(shù)據(jù)出口頁面端的改造原則是最小侵入。你不需要修改業(yè)務(wù)代碼只需要在頁面入口處引入一個獨立的腳本。這個腳本做四件事初始化WebSocket連接攔截console方法攔截XHR和fetch初始化vConsole保持原有調(diào)試面板可用先看WebSocket連接的建立。這里有一個細(xì)節(jié)連接地址不能硬編碼。開發(fā)環(huán)境、測試環(huán)境、生產(chǎn)環(huán)境的服務(wù)器地址不同而且同一頁面可能在多個環(huán)境下運行。解決方案是通過URL參數(shù)傳遞function getWsUrl() { const params new URLSearchParams(location.search); const debugHost params.get(debug_host); if (debugHost) { return ws://${debugHost}/ws; } // 默認(rèn)連接本地 return ws://127.0.0.1:8765/ws; }這樣你在手機(jī)訪問頁面時只需要在URL后面加上?debug_host192.168.1.100:8765就能把數(shù)據(jù)推到你的開發(fā)機(jī)上。攔截XHR的代碼需要小心處理因為很多框架比如axios內(nèi)部就是用XHR實現(xiàn)的。攔截不當(dāng)可能導(dǎo)致請求失敗或數(shù)據(jù)丟失。正確做法是保存原始方法在原始方法執(zhí)行前后插入邏輯const OriginalXHR window.XMLHttpRequest; function interceptXHR() { const originalOpen OriginalXHR.prototype.open; const originalSend OriginalXHR.prototype.send; OriginalXHR.prototype.open function(method, url, ...rest) { this._debugMethod method; this._debugUrl url; this._debugStartTime Date.now(); return originalOpen.apply(this, [method, url, ...rest]); }; OriginalXHR.prototype.send function(body) { this._debugBody body; this.addEventListener(loadend, () { const duration Date.now() - this._debugStartTime; sendToServer(request, [{ method: this._debugMethod, url: this._debugUrl, status: this.status, duration: duration, requestBody: this._debugBody, responseBody: this.responseText?.slice(0, 10000), requestHeaders: this._debugRequestHeaders, responseHeaders: this.getAllResponseHeaders() }]); }); return originalSend.apply(this, [body]); }; }注意responseText可能非常大必須截斷否則WebSocket消息可能超過服務(wù)端的接收限制。一般截取前10000個字符就夠了足夠AI分析問題。對于fetch的攔截類似但要注意fetch返回的是Promise需要在then鏈中插入邏輯const originalFetch window.fetch; window.fetch function(...args) { const startTime Date.now(); const url typeof args[0] string ? args[0] : args[0].url; const method args[1]?.method || GET; return originalFetch.apply(this, args).then(response { const clone response.clone(); clone.text().then(text { sendToServer(request, [{ method: method, url: url, status: response.status, duration: Date.now() - startTime, responseBody: text.slice(0, 10000) }]); }); return response; }); };這里用response.clone()是因為response body只能被讀取一次不clone的話業(yè)務(wù)代碼就讀不到了。3.2 服務(wù)端實現(xiàn)用Node.js同時承載WebSocket和MCP服務(wù)端選Node.js的原因很簡單前后端同語言調(diào)試方便生態(tài)成熟。核心依賴只有兩個ws用于WebSocketmodelcontextprotocol/sdk用于MCP。先初始化項目mkdir vconsole-mcp-server cd vconsole-mcp-server npm init -y npm install ws modelcontextprotocol/sdk服務(wù)端的主邏輯分兩塊WebSocket服務(wù)接收數(shù)據(jù)MCP服務(wù)暴露查詢接口。兩者共享同一個數(shù)據(jù)存儲。數(shù)據(jù)存儲用簡單的內(nèi)存數(shù)組加文件持久化const fs require(fs); const path require(path); const DATA_DIR path.join(__dirname, data); if (!fs.existsSync(DATA_DIR)) fs.mkdirSync(DATA_DIR); class LogStore { constructor() { this.logs []; this.requests []; this.maxSize 5000; this.loadFromDisk(); } addLog(log) { this.logs.push(log); if (this.logs.length this.maxSize) { this.logs this.logs.slice(-this.maxSize); } this.persist(logs); } addRequest(req) { this.requests.push(req); if (this.requests.length this.maxSize) { this.requests this.requests.slice(-this.maxSize); } this.persist(requests); } queryLogs({ since, level, keyword, limit 100 }) { let result this.logs; if (since) result result.filter(l l.timestamp since); if (level) result result.filter(l l.type level); if (keyword) { result result.filter(l l.args.some(arg String(arg).includes(keyword)) ); } return result.slice(-limit); } persist(type) { const file path.join(DATA_DIR, ${type}.json); fs.writeFileSync(file, JSON.stringify(this[type], null, 2)); } loadFromDisk() { try { const logsFile path.join(DATA_DIR, logs.json); if (fs.existsSync(logsFile)) { this.logs JSON.parse(fs.readFileSync(logsFile, utf8)); } const reqFile path.join(DATA_DIR, requests.json); if (fs.existsSync(reqFile)) { this.requests JSON.parse(fs.readFileSync(reqFile, utf8)); } } catch (e) { console.error(Failed to load data from disk:, e.message); } } }WebSocket服務(wù)的實現(xiàn)const WebSocket require(ws); const store new LogStore(); const wss new WebSocket.Server({ port: 8765 }); wss.on(connection, (ws) { console.log(Client connected); ws.on(message, (message) { try { const data JSON.parse(message); if (data.type ping) { ws.send(JSON.stringify({ type: pong })); return; } if (data.type log) { store.addLog({ timestamp: data.timestamp, type: data.args[0]?.startsWith([error]) ? error : log, args: data.args }); } if (data.type request) { store.addRequest({ timestamp: Date.now(), ...data.args[0] }); } } catch (e) { console.error(Failed to process message:, e.message); } }); ws.on(close, () console.log(Client disconnected)); });MCP Server的實現(xiàn)需要用到SDK提供的Server類const { Server } require(modelcontextprotocol/sdk/server/index.js); const { StdioServerTransport } require(modelcontextprotocol/sdk/server/stdio.js); const server new Server( { name: vconsole-mcp, version: 1.0.0 }, { capabilities: { tools: {}, resources: {} } } ); server.setRequestHandler(tools/list, async () ({ tools: [ { name: get_logs, description: 獲取H5頁面的console日志, inputSchema: { type: object, properties: { since: { type: number, description: 起始時間戳 }, level: { type: string, enum: [log, warn, error, info] }, keyword: { type: string }, limit: { type: number, default: 100 } } } }, { name: get_requests, description: 獲取H5頁面的網(wǎng)絡(luò)請求記錄, inputSchema: { type: object, properties: { since: { type: number }, urlKeyword: { type: string }, status: { type: number }, limit: { type: number, default: 50 } } } }, { name: clear_data, description: 清空所有日志和請求記錄, inputSchema: { type: object, properties: {} } } ] })); server.setRequestHandler(tools/call, async (request) { const { name, arguments: args } request.params; if (name get_logs) { const logs store.queryLogs(args); return { content: [{ type: text, text: JSON.stringify(logs, null, 2) }] }; } if (name get_requests) { let requests store.requests; if (args.since) requests requests.filter(r r.timestamp args.since); if (args.urlKeyword) { requests requests.filter(r r.url.includes(args.urlKeyword)); } if (args.status) requests requests.filter(r r.status args.status); requests requests.slice(-(args.limit || 50)); return { content: [{ type: text, text: JSON.stringify(requests, null, 2) }] }; } if (name clear_data) { store.logs []; store.requests []; store.persist(logs); store.persist(requests); return { content: [{ type: text, text: Data cleared }] }; } }); const transport new StdioServerTransport(); server.connect(transport);3.3 把MCP Server接入AI客戶端MCP Server寫好了怎么讓AI用上不同的AI客戶端接入方式不同但核心都是配置一個MCP Server的啟動命令。以Claude Desktop為例配置文件在~/Library/Application Support/Claude/claude_desktop_config.jsonmacOS或%APPDATA%\Claude\claude_desktop_config.jsonWindows{ mcpServers: { vconsole: { command: node, args: [/path/to/vconsole-mcp-server/index.js] } } }配置完成后重啟AI客戶端AI就能看到get_logs、get_requests這些工具了。如果你用的是支持MCP的其他客戶端比如某些IDE插件、命令行工具配置方式類似都是指定命令和參數(shù)。關(guān)鍵點是MCP Server通過stdio通信所以AI客戶端會以子進(jìn)程的方式啟動你的Node.js腳本。這里有一個容易踩的坑stdio模式下不能用console.log輸出調(diào)試信息因為stdout被MCP協(xié)議占用了。調(diào)試信息必須用console.error輸出到stderr否則會干擾MCP協(xié)議通信導(dǎo)致AI客戶端解析失敗。4. 實戰(zhàn)驗證用AI定位一個真實的H5白屏問題4.1 構(gòu)造一個典型的白屏場景為了驗證整條鏈路我構(gòu)造了一個典型的H5白屏問題頁面加載時調(diào)用一個用戶信息接口接口返回的數(shù)據(jù)結(jié)構(gòu)跟前端預(yù)期不一致導(dǎo)致渲染時報錯頁面白屏。問題代碼大概長這樣async function initPage() { const res await fetch(/api/user/info); const data await res.json(); // 預(yù)期data.user.name但實際接口返回的是data.data.userName document.getElementById(username).textContent data.user.name; }這段代碼在data.user為undefined時會拋出TypeError導(dǎo)致后續(xù)渲染中斷頁面白屏。4.2 讓AI自己拉日志和請求頁面在手機(jī)上打開后vConsole面板會顯示報錯同時數(shù)據(jù)通過WebSocket推到了MCP Server。現(xiàn)在我在AI客戶端里輸入幫我看看最近這個H5頁面為什么白屏了先拉一下最近的錯誤日志和網(wǎng)絡(luò)請求。AI會調(diào)用get_logs工具傳入level: error拿到類似這樣的結(jié)果[ { timestamp: 1712345678901, type: error, args: [ TypeError: Cannot read properties of undefined (reading name), at initPage (app.js:15:45) ] } ]然后AI會調(diào)用get_requests傳入urlKeyword: /api/user/info拿到[ { timestamp: 1712345678800, method: GET, url: /api/user/info, status: 200, duration: 120, responseBody: {\code\:0,\data\:{\userName\:\張三\,\userId\:123}} } ]有了這兩條信息AI就能直接給出結(jié)論接口返回的字段是data.data.userName但代碼里訪問的是data.user.name字段路徑不匹配導(dǎo)致TypeError。整個分析過程不需要我手動復(fù)制任何日志。4.3 對比傳統(tǒng)流程的效率差異傳統(tǒng)流程下這個問題的排查步驟是在手機(jī)上打開頁面看到白屏打開vConsole切到Console面板看到報錯截圖或復(fù)制報錯信息切到Network面板找到接口請求查看響應(yīng)體復(fù)制響應(yīng)體打開AI對話窗口粘貼報錯和響應(yīng)體描述問題AI分析后給出結(jié)論整個過程至少需要5-6次手動操作耗時2-3分鐘。而通過MCP鏈路只需要對AI說一句話AI自己完成數(shù)據(jù)拉取和分析耗時10-20秒。更重要的是AI拿到的是完整數(shù)據(jù)不會因為手動復(fù)制遺漏關(guān)鍵信息。4.4 幾個實測中發(fā)現(xiàn)的細(xì)節(jié)問題第一個問題日志順序錯亂。WebSocket消息是異步到達(dá)的如果頁面瞬間產(chǎn)生大量日志服務(wù)端接收順序可能跟實際產(chǎn)生順序不一致。解決方案是在每條日志里帶上客戶端時間戳服務(wù)端按時間戳排序后再返回給AI。第二個問題循環(huán)日志導(dǎo)致數(shù)據(jù)爆炸。有些頁面會在定時器里不斷打日志幾秒鐘就能產(chǎn)生上千條。如果不加限制內(nèi)存和磁盤都會被撐爆。解決方案是在頁面端做采樣同樣的日志內(nèi)容在1秒內(nèi)只上報一次const recentLogs new Map(); function shouldReport(content) { const now Date.now(); const lastTime recentLogs.get(content); if (lastTime now - lastTime 1000) { return false; } recentLogs.set(content, now); // 清理過期記錄 if (recentLogs.size 1000) { for (const [key, time] of recentLogs) { if (now - time 5000) recentLogs.delete(key); } } return true; }第三個問題敏感信息泄露。請求體里可能包含密碼、token等敏感字段。如果這些數(shù)據(jù)被推送到服務(wù)端并持久化到磁盤存在安全風(fēng)險。解決方案是在頁面端做脫敏處理對包含password、token、authorization等關(guān)鍵詞的字段進(jìn)行掩碼function sanitize(obj) { if (typeof obj ! object || obj null) return obj; const sensitiveKeys [password, token, authorization, secret, cookie]; const result Array.isArray(obj) ? [] : {}; for (const [key, value] of Object.entries(obj)) { if (sensitiveKeys.some(k key.toLowerCase().includes(k))) { result[key] ***REDACTED***; } else if (typeof value object) { result[key] sanitize(value); } else { result[key] value; } } return result; }5. 進(jìn)階玩法讓MCP Server不只是查日志5.1 增加主動執(zhí)行能力遠(yuǎn)程執(zhí)行JS基礎(chǔ)的查詢功能只能讓AI看但如果AI能做調(diào)試效率會更高。比如AI發(fā)現(xiàn)某個變量值不對可以直接在頁面里執(zhí)行一段JS來驗證假設(shè)。實現(xiàn)方式是在MCP Server里增加一個eval_js工具通過WebSocket向頁面發(fā)送指令頁面執(zhí)行后把結(jié)果返回// MCP Server端 { name: eval_js, description: 在H5頁面中執(zhí)行JavaScript代碼并返回結(jié)果, inputSchema: { type: object, properties: { code: { type: string, description: 要執(zhí)行的JS代碼 } }, required: [code] } }頁面端收到eval指令后執(zhí)行ws.onmessage (event) { const data JSON.parse(event.data); if (data.type eval) { try { const result eval(data.code); ws.send(JSON.stringify({ type: eval_result, id: data.id, result: String(result) })); } catch (e) { ws.send(JSON.stringify({ type: eval_result, id: data.id, error: e.message })); } } };這個功能非常強(qiáng)大但也有風(fēng)險。必須限制執(zhí)行權(quán)限只允許在開發(fā)環(huán)境使用生產(chǎn)環(huán)境要禁用?？梢栽陧撁娑思右粋€開關(guān)只有URL參數(shù)里帶了debug1才啟用eval功能。5.2 日志與請求的關(guān)聯(lián)分析單獨看日志和單獨看請求有時候很難定位問題。比如一個接口報錯但日志里沒有明顯異常。這時候需要把請求和它前后的日志關(guān)聯(lián)起來。實現(xiàn)思路是在頁面端記錄每條日志和請求的序列號服務(wù)端按序列號排序。查詢時如果AI指定了某個請求就返回該請求前后各10條日志function getContextAroundRequest(requestId, windowSize 10) { const allEvents [ ...store.logs.map(l ({ ...l, eventType: log })), ...store.requests.map(r ({ ...r, eventType: request })) ].sort((a, b) a.timestamp - b.timestamp); const index allEvents.findIndex(e e.id requestId); if (index -1) return []; return allEvents.slice( Math.max(0, index - windowSize), Math.min(allEvents.length, index windowSize 1) ); }這樣AI在分析問題時能看到完整的上下文而不是孤立的一條日志或一個請求。5.3 多頁面同時調(diào)試的支持實際項目中一個H5應(yīng)用可能有多個頁面或者同時打開多個WebView。如果所有頁面的數(shù)據(jù)都混在一起AI很難區(qū)分。解決方案是在WebSocket連接建立時客戶端發(fā)送一個頁面標(biāo)識const pageId ${location.pathname}_${Date.now()}; ws.onopen () { ws.send(JSON.stringify({ type: register, pageId, url: location.href })); };服務(wù)端按pageId分組存儲數(shù)據(jù)。MCP工具增加pageId參數(shù)AI可以指定查詢哪個頁面的數(shù)據(jù)。如果不指定就返回所有頁面的匯總但每條數(shù)據(jù)都帶上pageId標(biāo)識。5.4 與Playwright MCP的聯(lián)動如果你同時在使用Playwright MCP做自動化測試可以把兩者結(jié)合起來。Playwright負(fù)責(zé)操作頁面點擊、輸入、導(dǎo)航vConsole MCP負(fù)責(zé)收集頁面運行時的日志和請求。AI可以在執(zhí)行完一個操作后自動拉取該操作產(chǎn)生的日志和請求驗證是否符合預(yù)期。這種聯(lián)動方式特別適合做回歸測試AI自動跑一遍核心流程然后檢查有沒有報錯日志、有沒有失敗的請求。比人工寫斷言靈活得多因為AI可以根據(jù)上下文判斷這個報錯是否正常。6. 踩過的坑與穩(wěn)定性優(yōu)化6.1 WebSocket連接在移動端的斷連問題移動端瀏覽器在切后臺、鎖屏、網(wǎng)絡(luò)切換時WebSocket連接大概率會斷開。而且不同瀏覽器的行為不一致有些會立即觸發(fā)onclose有些會靜默斷開onclose延遲很久才觸發(fā)。解決方案是雙保險客戶端心跳 服務(wù)端超時檢測?？蛻舳嗣?0秒發(fā)ping服務(wù)端如果60秒沒收到任何消息就主動關(guān)閉連接?？蛻舳藱z測到連接關(guān)閉后用指數(shù)退避重連。還有一個細(xì)節(jié)頁面從后臺恢復(fù)時要立即檢查連接狀態(tài)?？梢酝ㄟ^visibilitychange事件監(jiān)聽document.addEventListener(visibilitychange, () { if (!document.hidden ws.readyState ! WebSocket.OPEN) { reconnect(); } });6.2 大數(shù)據(jù)量下的性能問題當(dāng)頁面產(chǎn)生大量日志時WebSocket消息可能非常大。比如一個接口返回了1MB的JSON直接通過WebSocket發(fā)送會導(dǎo)致消息分片增加延遲。解決方案是在頁面端做壓縮和截斷。對于超過10KB的響應(yīng)體只發(fā)送前10KB并標(biāo)記truncated: true。如果AI需要完整數(shù)據(jù)可以通過另一個工具get_full_response按請求ID查詢服務(wù)端從磁盤讀取完整數(shù)據(jù)。另外日志上報要做批量處理。不要每產(chǎn)生一條日志就發(fā)一次WebSocket消息而是攢夠10條或每隔500毫秒發(fā)一次let logBuffer []; let flushTimer null; function bufferLog(log) { logBuffer.push(log); if (logBuffer.length 10) { flushLogs(); } else if (!flushTimer) { flushTimer setTimeout(flushLogs, 500); } } function flushLogs() { if (logBuffer.length 0) return; ws.send(JSON.stringify({ type: logs_batch, logs: logBuffer })); logBuffer []; clearTimeout(flushTimer); flushTimer null; }6.3 MCP Server的啟動與調(diào)試技巧MCP Server通過stdio通信調(diào)試起來不太直觀。我的做法是同時啟動一個HTTP調(diào)試端口在開發(fā)階段可以通過瀏覽器或curl直接調(diào)用MCP工具驗證邏輯是否正確const http require(http); if (process.env.DEBUG_MCP 1) { http.createServer((req, res) { if (req.url /logs) { res.end(JSON.stringify(store.queryLogs({ limit: 50 }))); } else if (req.url /requests) { res.end(JSON.stringify(store.requests.slice(-50))); } }).listen(8766); }這樣在接入AI客戶端之前可以先通過http://localhost:8766/logs確認(rèn)數(shù)據(jù)是否正常上報。另一個坑是MCP Server的進(jìn)程生命周期。AI客戶端啟動時會拉起MCP Server進(jìn)程客戶端關(guān)閉時會殺掉進(jìn)程。如果你的WebSocket服務(wù)也在同一個進(jìn)程里客戶端關(guān)閉后WebSocket服務(wù)也會停止頁面就斷連了。解決方案是把WebSocket服務(wù)和MCP Server拆成兩個獨立進(jìn)程MCP Server通過HTTP或Unix Socket向WebSocket服務(wù)查詢數(shù)據(jù)。6.4 安全邊界什么時候不該用這套方案這套方案的核心是把頁面運行時數(shù)據(jù)暴露給本地服務(wù)。在開發(fā)環(huán)境沒問題但在生產(chǎn)環(huán)境絕對不能用。幾個必須遵守的原則生產(chǎn)環(huán)境構(gòu)建時通過環(huán)境變量徹底移除調(diào)試腳本W(wǎng)ebSocket服務(wù)只監(jiān)聽本地回環(huán)地址127.0.0.1不要監(jiān)聽0.0.0.0如果必須跨設(shè)備調(diào)試手機(jī)連電腦確保在同一個可信局域網(wǎng)內(nèi)且調(diào)試完成后立即關(guān)閉服務(wù)敏感數(shù)據(jù)脫敏必須在頁面端完成不要依賴服務(wù)端處理我在實際項目中會把調(diào)試腳本的引入邏輯放在構(gòu)建工具的配置里通過process.env.NODE_ENV判斷生產(chǎn)構(gòu)建時直接不打包這個腳本。這樣即使有人手動在URL里加參數(shù)也不會有任何調(diào)試代碼執(zhí)行。這套方案我用了大概三個月從最初的簡單日志轉(zhuǎn)發(fā)到后來加上請求攔截、eval執(zhí)行、多頁面支持基本上覆蓋了H5調(diào)試的常見場景。最大的感受是AI輔助debug的前提是AI能拿到足夠的數(shù)據(jù)而MCP正好解決了數(shù)據(jù)通道的問題。vConsole負(fù)責(zé)采集WebSocket負(fù)責(zé)傳輸MCP負(fù)責(zé)暴露給AI三者各司其職組合起來就是一個完整的AI輔助調(diào)試閉環(huán)。 vConsole + MCP：讓AI直接讀取H5日志與網(wǎng)絡(luò)請求
1. 移動端調(diào)試的困局為什么AI看不見你的H5日志做過H5開發(fā)的人都有一個共同的痛頁面在手機(jī)上跑日志在手機(jī)里而你坐在電腦前。Chrome DevTools 的遠(yuǎn)程調(diào)試雖然能用但限制極多——需要USB連接、需要開啟開發(fā)者模式、部分瀏覽器內(nèi)核根本不支持、iOS上的Safari Inspector還經(jīng)常斷連。更別提那些嵌在App WebView里的頁面你連入口都找不到。傳統(tǒng)的做法是在頁面里手動掛一個vConsole然后在手機(jī)屏幕上戳來戳去。這個方案本身沒問題vConsole確實是移動端調(diào)試的利器它能在頁面上生成一個懸浮面板展示console日志、網(wǎng)絡(luò)請求、DOM結(jié)構(gòu)、Storage等信息。但問題在于這些信息只有人眼能看到AI看不到。現(xiàn)在大家都在用AI輔助debug你把代碼貼給AIAI幫你分析問題。但AI能拿到的只有你手動復(fù)制粘貼的那幾行日志上下文嚴(yán)重缺失。你告訴AI接口報錯了AI問你報什么錯你再去vConsole里翻翻到了再貼過去。這個來回過程極其低效而且經(jīng)常漏掉關(guān)鍵信息——比如請求頭里的某個字段、響應(yīng)體的完整結(jié)構(gòu)、報錯前后的日志順序。MCPModel Context Protocol的出現(xiàn)改變了這個局面。MCP本質(zhì)上是一套讓AI模型能夠調(diào)用外部工具的協(xié)議標(biāo)準(zhǔn)你可以把它理解成給AI裝了一雙手。通過MCPAI不再只能被動地接收你粘貼的文本而是可以主動去調(diào)用工具、獲取數(shù)據(jù)、執(zhí)行操作。把vConsole和MCP結(jié)合起來就意味著AI可以直接讀取H5頁面上的日志和網(wǎng)絡(luò)請求不需要你手動搬運。這篇文章要講的就是怎么把這兩件事串起來。核心思路是在H5頁面里集成vConsole通過WebSocket把vConsole捕獲的日志和請求數(shù)據(jù)實時推送到一個本地服務(wù)再把這個服務(wù)封裝成MCP Server讓AI通過MCP協(xié)議直接查詢。整條鏈路打通之后你只需要對AI說幫我看看剛才那個頁面為什么白屏AI就能自己去拉日志、分析請求、定位問題。適合閱讀這篇文章的人有H5開發(fā)經(jīng)驗的前端工程師、正在探索AI輔助開發(fā)流程的技術(shù)人、對MCP協(xié)議感興趣但還沒找到落地場景的開發(fā)者。不需要你精通WebSocket或MCP協(xié)議細(xì)節(jié)我會把每一步的原理和操作都講清楚。2. 拆解這條鏈路vConsole、WebSocket與MCP各自扮演什么角色2.1 vConsole的能力邊界與數(shù)據(jù)出口vConsole是騰訊開源的一個輕量級移動端調(diào)試面板壓縮后只有幾十KB對頁面性能影響極小。它的核心能力包括Console面板捕獲所有console.log/warn/error/info輸出包括對象展開Network面板記錄所有XMLHttpRequest和fetch請求的URL、方法、狀態(tài)碼、請求頭、響應(yīng)頭、響應(yīng)體、耗時Element面板查看和修改DOM結(jié)構(gòu)Storage面板查看Cookie、LocalStorage、SessionStorageSystem面板顯示UA、屏幕尺寸、網(wǎng)絡(luò)類型等關(guān)鍵點在于vConsole提供了一個插件機(jī)制和事件系統(tǒng)。你可以通過vConsole.VConsolePlugin自定義插件也可以直接hook它的內(nèi)部方法來獲取數(shù)據(jù)。但更優(yōu)雅的方式是利用vConsole的vConsole.core對象它暴露了一些內(nèi)部API。不過直接hook vConsole內(nèi)部API有個問題版本升級可能導(dǎo)致API變化。所以更穩(wěn)妥的方案是自己攔截console方法和XHR/fetch把數(shù)據(jù)同時輸出給vConsole和WebSocket。這樣即使vConsole升級你的數(shù)據(jù)通道也不受影響。具體做法是在頁面加載vConsole之前先包裝原生的console方法const originalLog console.log; const originalWarn console.warn; const originalError console.error; function sendToServer(type, args) { const payload { type: type, timestamp: Date.now(), args: Array.from(args).map(arg { try { return typeof arg object ? JSON.stringify(arg) : String(arg); } catch (e) { return [Unserializable]; } }) }; ws.send(JSON.stringify(payload)); } console.log function(...args) { originalLog.apply(console, args); sendToServer(log, args); }; // 同理處理warn和error對于網(wǎng)絡(luò)請求攔截XMLHttpRequest的open和send方法以及fetch函數(shù)。這里要注意的是攔截必須在vConsole初始化之前完成否則vConsole會先捕獲到原始方法。2.2 WebSocket作為實時數(shù)據(jù)通道的選型理由為什么用WebSocket而不是HTTP輪詢原因很簡單日志和請求是實時產(chǎn)生的輪詢有延遲且浪費資源。WebSocket建立一次連接后可以雙向通信服務(wù)端可以主動推送指令比如開始錄制、清空日志客戶端可以實時上報數(shù)據(jù)。WebSocket的心跳機(jī)制也是必須考慮的。移動端網(wǎng)絡(luò)環(huán)境復(fù)雜連接可能因為切后臺、網(wǎng)絡(luò)切換等原因斷開。標(biāo)準(zhǔn)做法是客戶端每隔30秒發(fā)送一個ping幀服務(wù)端回復(fù)pong幀。如果連續(xù)3次沒有收到pong就認(rèn)為連接斷開觸發(fā)重連。let heartbeatTimer null; let pongReceived true; function startHeartbeat() { heartbeatTimer setInterval(() { if (!pongReceived) { console.warn(WebSocket heartbeat lost, reconnecting...); ws.close(); reconnect(); return; } pongReceived false; ws.send(JSON.stringify({ type: ping })); }, 30000); } ws.onmessage (event) { const data JSON.parse(event.data); if (data.type pong) { pongReceived true; } };重連策略采用指數(shù)退避第一次1秒后重連第二次2秒第三次4秒最多到30秒。這樣既不會頻繁重連造成服務(wù)端壓力也不會在短暫斷網(wǎng)后長時間失聯(lián)。2.3 MCP Server的角色定位與協(xié)議要點MCP Server在這條鏈路里的角色是數(shù)據(jù)中轉(zhuǎn)和查詢接口。它做三件事接收WebSocket客戶端上報的日志和請求數(shù)據(jù)存入內(nèi)存或本地文件暴露MCP工具Tools讓AI可以查詢這些數(shù)據(jù)提供資源Resources讓AI可以讀取完整的日志文件MCP協(xié)議的核心概念包括ToolsAI可以調(diào)用的函數(shù)比如get_logs、get_requests、clear_logsResourcesAI可以讀取的數(shù)據(jù)源比如logs://latest、requests://allPrompts預(yù)定義的提示模板這個場景下用得少一個典型的MCP工具定義長這樣{ name: get_logs, description: 獲取指定時間范圍內(nèi)的console日志, inputSchema: { type: object, properties: { since: { type: number, description: 起始時間戳毫秒不傳則返回最近100條 }, level: { type: string, enum: [log, warn, error, info], description: 日志級別過濾 }, keyword: { type: string, description: 關(guān)鍵詞搜索 } } } }AI通過MCP協(xié)議調(diào)用這個工具時會傳入?yún)?shù)MCP Server執(zhí)行查詢并返回結(jié)果。整個過程對AI來說是透明的它只需要知道我有一個工具可以查日志。3. 從零搭建vConsole數(shù)據(jù)上報與MCP Server的完整實現(xiàn)3.1 頁面端改造在不破壞原有調(diào)試體驗的前提下增加數(shù)據(jù)出口頁面端的改造原則是最小侵入。你不需要修改業(yè)務(wù)代碼只需要在頁面入口處引入一個獨立的腳本。這個腳本做四件事初始化WebSocket連接攔截console方法攔截XHR和fetch初始化vConsole保持原有調(diào)試面板可用先看WebSocket連接的建立。這里有一個細(xì)節(jié)連接地址不能硬編碼。開發(fā)環(huán)境、測試環(huán)境、生產(chǎn)環(huán)境的服務(wù)器地址不同而且同一頁面可能在多個環(huán)境下運行。解決方案是通過URL參數(shù)傳遞function getWsUrl() { const params new URLSearchParams(location.search); const debugHost params.get(debug_host); if (debugHost) { return ws://${debugHost}/ws; } // 默認(rèn)連接本地 return ws://127.0.0.1:8765/ws; }這樣你在手機(jī)訪問頁面時只需要在URL后面加上?debug_host192.168.1.100:8765就能把數(shù)據(jù)推到你的開發(fā)機(jī)上。攔截XHR的代碼需要小心處理因為很多框架比如axios內(nèi)部就是用XHR實現(xiàn)的。攔截不當(dāng)可能導(dǎo)致請求失敗或數(shù)據(jù)丟失。正確做法是保存原始方法在原始方法執(zhí)行前后插入邏輯const OriginalXHR window.XMLHttpRequest; function interceptXHR() { const originalOpen OriginalXHR.prototype.open; const originalSend OriginalXHR.prototype.send; OriginalXHR.prototype.open function(method, url, ...rest) { this._debugMethod method; this._debugUrl url; this._debugStartTime Date.now(); return originalOpen.apply(this, [method, url, ...rest]); }; OriginalXHR.prototype.send function(body) { this._debugBody body; this.addEventListener(loadend, () { const duration Date.now() - this._debugStartTime; sendToServer(request, [{ method: this._debugMethod, url: this._debugUrl, status: this.status, duration: duration, requestBody: this._debugBody, responseBody: this.responseText?.slice(0, 10000), requestHeaders: this._debugRequestHeaders, responseHeaders: this.getAllResponseHeaders() }]); }); return originalSend.apply(this, [body]); }; }注意responseText可能非常大必須截斷否則WebSocket消息可能超過服務(wù)端的接收限制。一般截取前10000個字符就夠了足夠AI分析問題。對于fetch的攔截類似但要注意fetch返回的是Promise需要在then鏈中插入邏輯const originalFetch window.fetch; window.fetch function(...args) { const startTime Date.now(); const url typeof args[0] string ? args[0] : args[0].url; const method args[1]?.method || GET; return originalFetch.apply(this, args).then(response { const clone response.clone(); clone.text().then(text { sendToServer(request, [{ method: method, url: url, status: response.status, duration: Date.now() - startTime, responseBody: text.slice(0, 10000) }]); }); return response; }); };這里用response.clone()是因為response body只能被讀取一次不clone的話業(yè)務(wù)代碼就讀不到了。3.2 服務(wù)端實現(xiàn)用Node.js同時承載WebSocket和MCP服務(wù)端選Node.js的原因很簡單前后端同語言調(diào)試方便生態(tài)成熟。核心依賴只有兩個ws用于WebSocketmodelcontextprotocol/sdk用于MCP。先初始化項目mkdir vconsole-mcp-server cd vconsole-mcp-server npm init -y npm install ws modelcontextprotocol/sdk服務(wù)端的主邏輯分兩塊WebSocket服務(wù)接收數(shù)據(jù)MCP服務(wù)暴露查詢接口。兩者共享同一個數(shù)據(jù)存儲。數(shù)據(jù)存儲用簡單的內(nèi)存數(shù)組加文件持久化const fs require(fs); const path require(path); const DATA_DIR path.join(__dirname, data); if (!fs.existsSync(DATA_DIR)) fs.mkdirSync(DATA_DIR); class LogStore { constructor() { this.logs []; this.requests []; this.maxSize 5000; this.loadFromDisk(); } addLog(log) { this.logs.push(log); if (this.logs.length this.maxSize) { this.logs this.logs.slice(-this.maxSize); } this.persist(logs); } addRequest(req) { this.requests.push(req); if (this.requests.length this.maxSize) { this.requests this.requests.slice(-this.maxSize); } this.persist(requests); } queryLogs({ since, level, keyword, limit 100 }) { let result this.logs; if (since) result result.filter(l l.timestamp since); if (level) result result.filter(l l.type level); if (keyword) { result result.filter(l l.args.some(arg String(arg).includes(keyword)) ); } return result.slice(-limit); } persist(type) { const file path.join(DATA_DIR, ${type}.json); fs.writeFileSync(file, JSON.stringify(this[type], null, 2)); } loadFromDisk() { try { const logsFile path.join(DATA_DIR, logs.json); if (fs.existsSync(logsFile)) { this.logs JSON.parse(fs.readFileSync(logsFile, utf8)); } const reqFile path.join(DATA_DIR, requests.json); if (fs.existsSync(reqFile)) { this.requests JSON.parse(fs.readFileSync(reqFile, utf8)); } } catch (e) { console.error(Failed to load data from disk:, e.message); } } }WebSocket服務(wù)的實現(xiàn)const WebSocket require(ws); const store new LogStore(); const wss new WebSocket.Server({ port: 8765 }); wss.on(connection, (ws) { console.log(Client connected); ws.on(message, (message) { try { const data JSON.parse(message); if (data.type ping) { ws.send(JSON.stringify({ type: pong })); return; } if (data.type log) { store.addLog({ timestamp: data.timestamp, type: data.args[0]?.startsWith([error]) ? error : log, args: data.args }); } if (data.type request) { store.addRequest({ timestamp: Date.now(), ...data.args[0] }); } } catch (e) { console.error(Failed to process message:, e.message); } }); ws.on(close, () console.log(Client disconnected)); });MCP Server的實現(xiàn)需要用到SDK提供的Server類const { Server } require(modelcontextprotocol/sdk/server/index.js); const { StdioServerTransport } require(modelcontextprotocol/sdk/server/stdio.js); const server new Server( { name: vconsole-mcp, version: 1.0.0 }, { capabilities: { tools: {}, resources: {} } } ); server.setRequestHandler(tools/list, async () ({ tools: [ { name: get_logs, description: 獲取H5頁面的console日志, inputSchema: { type: object, properties: { since: { type: number, description: 起始時間戳 }, level: { type: string, enum: [log, warn, error, info] }, keyword: { type: string }, limit: { type: number, default: 100 } } } }, { name: get_requests, description: 獲取H5頁面的網(wǎng)絡(luò)請求記錄, inputSchema: { type: object, properties: { since: { type: number }, urlKeyword: { type: string }, status: { type: number }, limit: { type: number, default: 50 } } } }, { name: clear_data, description: 清空所有日志和請求記錄, inputSchema: { type: object, properties: {} } } ] })); server.setRequestHandler(tools/call, async (request) { const { name, arguments: args } request.params; if (name get_logs) { const logs store.queryLogs(args); return { content: [{ type: text, text: JSON.stringify(logs, null, 2) }] }; } if (name get_requests) { let requests store.requests; if (args.since) requests requests.filter(r r.timestamp args.since); if (args.urlKeyword) { requests requests.filter(r r.url.includes(args.urlKeyword)); } if (args.status) requests requests.filter(r r.status args.status); requests requests.slice(-(args.limit || 50)); return { content: [{ type: text, text: JSON.stringify(requests, null, 2) }] }; } if (name clear_data) { store.logs []; store.requests []; store.persist(logs); store.persist(requests); return { content: [{ type: text, text: Data cleared }] }; } }); const transport new StdioServerTransport(); server.connect(transport);3.3 把MCP Server接入AI客戶端MCP Server寫好了怎么讓AI用上不同的AI客戶端接入方式不同但核心都是配置一個MCP Server的啟動命令。以Claude Desktop為例配置文件在~/Library/Application Support/Claude/claude_desktop_config.jsonmacOS或%APPDATA%\Claude\claude_desktop_config.jsonWindows{ mcpServers: { vconsole: { command: node, args: [/path/to/vconsole-mcp-server/index.js] } } }配置完成后重啟AI客戶端AI就能看到get_logs、get_requests這些工具了。如果你用的是支持MCP的其他客戶端比如某些IDE插件、命令行工具配置方式類似都是指定命令和參數(shù)。關(guān)鍵點是MCP Server通過stdio通信所以AI客戶端會以子進(jìn)程的方式啟動你的Node.js腳本。這里有一個容易踩的坑stdio模式下不能用console.log輸出調(diào)試信息因為stdout被MCP協(xié)議占用了。調(diào)試信息必須用console.error輸出到stderr否則會干擾MCP協(xié)議通信導(dǎo)致AI客戶端解析失敗。4. 實戰(zhàn)驗證用AI定位一個真實的H5白屏問題4.1 構(gòu)造一個典型的白屏場景為了驗證整條鏈路我構(gòu)造了一個典型的H5白屏問題頁面加載時調(diào)用一個用戶信息接口接口返回的數(shù)據(jù)結(jié)構(gòu)跟前端預(yù)期不一致導(dǎo)致渲染時報錯頁面白屏。問題代碼大概長這樣async function initPage() { const res await fetch(/api/user/info); const data await res.json(); // 預(yù)期data.user.name但實際接口返回的是data.data.userName document.getElementById(username).textContent data.user.name; }這段代碼在data.user為undefined時會拋出TypeError導(dǎo)致后續(xù)渲染中斷頁面白屏。4.2 讓AI自己拉日志和請求頁面在手機(jī)上打開后vConsole面板會顯示報錯同時數(shù)據(jù)通過WebSocket推到了MCP Server。現(xiàn)在我在AI客戶端里輸入幫我看看最近這個H5頁面為什么白屏了先拉一下最近的錯誤日志和網(wǎng)絡(luò)請求。AI會調(diào)用get_logs工具傳入level: error拿到類似這樣的結(jié)果[ { timestamp: 1712345678901, type: error, args: [ TypeError: Cannot read properties of undefined (reading name), at initPage (app.js:15:45) ] } ]然后AI會調(diào)用get_requests傳入urlKeyword: /api/user/info拿到[ { timestamp: 1712345678800, method: GET, url: /api/user/info, status: 200, duration: 120, responseBody: {\code\:0,\data\:{\userName\:\張三\,\userId\:123}} } ]有了這兩條信息AI就能直接給出結(jié)論接口返回的字段是data.data.userName但代碼里訪問的是data.user.name字段路徑不匹配導(dǎo)致TypeError。整個分析過程不需要我手動復(fù)制任何日志。4.3 對比傳統(tǒng)流程的效率差異傳統(tǒng)流程下這個問題的排查步驟是在手機(jī)上打開頁面看到白屏打開vConsole切到Console面板看到報錯截圖或復(fù)制報錯信息切到Network面板找到接口請求查看響應(yīng)體復(fù)制響應(yīng)體打開AI對話窗口粘貼報錯和響應(yīng)體描述問題AI分析后給出結(jié)論整個過程至少需要5-6次手動操作耗時2-3分鐘。而通過MCP鏈路只需要對AI說一句話AI自己完成數(shù)據(jù)拉取和分析耗時10-20秒。更重要的是AI拿到的是完整數(shù)據(jù)不會因為手動復(fù)制遺漏關(guān)鍵信息。4.4 幾個實測中發(fā)現(xiàn)的細(xì)節(jié)問題第一個問題日志順序錯亂。WebSocket消息是異步到達(dá)的如果頁面瞬間產(chǎn)生大量日志服務(wù)端接收順序可能跟實際產(chǎn)生順序不一致。解決方案是在每條日志里帶上客戶端時間戳服務(wù)端按時間戳排序后再返回給AI。第二個問題循環(huán)日志導(dǎo)致數(shù)據(jù)爆炸。有些頁面會在定時器里不斷打日志幾秒鐘就能產(chǎn)生上千條。如果不加限制內(nèi)存和磁盤都會被撐爆。解決方案是在頁面端做采樣同樣的日志內(nèi)容在1秒內(nèi)只上報一次const recentLogs new Map(); function shouldReport(content) { const now Date.now(); const lastTime recentLogs.get(content); if (lastTime now - lastTime 1000) { return false; } recentLogs.set(content, now); // 清理過期記錄 if (recentLogs.size 1000) { for (const [key, time] of recentLogs) { if (now - time 5000) recentLogs.delete(key); } } return true; }第三個問題敏感信息泄露。請求體里可能包含密碼、token等敏感字段。如果這些數(shù)據(jù)被推送到服務(wù)端并持久化到磁盤存在安全風(fēng)險。解決方案是在頁面端做脫敏處理對包含password、token、authorization等關(guān)鍵詞的字段進(jìn)行掩碼function sanitize(obj) { if (typeof obj ! object || obj null) return obj; const sensitiveKeys [password, token, authorization, secret, cookie]; const result Array.isArray(obj) ? [] : {}; for (const [key, value] of Object.entries(obj)) { if (sensitiveKeys.some(k key.toLowerCase().includes(k))) { result[key] ***REDACTED***; } else if (typeof value object) { result[key] sanitize(value); } else { result[key] value; } } return result; }5. 進(jìn)階玩法讓MCP Server不只是查日志5.1 增加主動執(zhí)行能力遠(yuǎn)程執(zhí)行JS基礎(chǔ)的查詢功能只能讓AI看但如果AI能做調(diào)試效率會更高。比如AI發(fā)現(xiàn)某個變量值不對可以直接在頁面里執(zhí)行一段JS來驗證假設(shè)。實現(xiàn)方式是在MCP Server里增加一個eval_js工具通過WebSocket向頁面發(fā)送指令頁面執(zhí)行后把結(jié)果返回// MCP Server端 { name: eval_js, description: 在H5頁面中執(zhí)行JavaScript代碼并返回結(jié)果, inputSchema: { type: object, properties: { code: { type: string, description: 要執(zhí)行的JS代碼 } }, required: [code] } }頁面端收到eval指令后執(zhí)行ws.onmessage (event) { const data JSON.parse(event.data); if (data.type eval) { try { const result eval(data.code); ws.send(JSON.stringify({ type: eval_result, id: data.id, result: String(result) })); } catch (e) { ws.send(JSON.stringify({ type: eval_result, id: data.id, error: e.message })); } } };這個功能非常強(qiáng)大但也有風(fēng)險。必須限制執(zhí)行權(quán)限只允許在開發(fā)環(huán)境使用生產(chǎn)環(huán)境要禁用?？梢栽陧撁娑思右粋€開關(guān)只有URL參數(shù)里帶了debug1才啟用eval功能。5.2 日志與請求的關(guān)聯(lián)分析單獨看日志和單獨看請求有時候很難定位問題。比如一個接口報錯但日志里沒有明顯異常。這時候需要把請求和它前后的日志關(guān)聯(lián)起來。實現(xiàn)思路是在頁面端記錄每條日志和請求的序列號服務(wù)端按序列號排序。查詢時如果AI指定了某個請求就返回該請求前后各10條日志function getContextAroundRequest(requestId, windowSize 10) { const allEvents [ ...store.logs.map(l ({ ...l, eventType: log })), ...store.requests.map(r ({ ...r, eventType: request })) ].sort((a, b) a.timestamp - b.timestamp); const index allEvents.findIndex(e e.id requestId); if (index -1) return []; return allEvents.slice( Math.max(0, index - windowSize), Math.min(allEvents.length, index windowSize 1) ); }這樣AI在分析問題時能看到完整的上下文而不是孤立的一條日志或一個請求。5.3 多頁面同時調(diào)試的支持實際項目中一個H5應(yīng)用可能有多個頁面或者同時打開多個WebView。如果所有頁面的數(shù)據(jù)都混在一起AI很難區(qū)分。解決方案是在WebSocket連接建立時客戶端發(fā)送一個頁面標(biāo)識const pageId ${location.pathname}_${Date.now()}; ws.onopen () { ws.send(JSON.stringify({ type: register, pageId, url: location.href })); };服務(wù)端按pageId分組存儲數(shù)據(jù)。MCP工具增加pageId參數(shù)AI可以指定查詢哪個頁面的數(shù)據(jù)。如果不指定就返回所有頁面的匯總但每條數(shù)據(jù)都帶上pageId標(biāo)識。5.4 與Playwright MCP的聯(lián)動如果你同時在使用Playwright MCP做自動化測試可以把兩者結(jié)合起來。Playwright負(fù)責(zé)操作頁面點擊、輸入、導(dǎo)航vConsole MCP負(fù)責(zé)收集頁面運行時的日志和請求。AI可以在執(zhí)行完一個操作后自動拉取該操作產(chǎn)生的日志和請求驗證是否符合預(yù)期。這種聯(lián)動方式特別適合做回歸測試AI自動跑一遍核心流程然后檢查有沒有報錯日志、有沒有失敗的請求。比人工寫斷言靈活得多因為AI可以根據(jù)上下文判斷這個報錯是否正常。6. 踩過的坑與穩(wěn)定性優(yōu)化6.1 WebSocket連接在移動端的斷連問題移動端瀏覽器在切后臺、鎖屏、網(wǎng)絡(luò)切換時WebSocket連接大概率會斷開。而且不同瀏覽器的行為不一致有些會立即觸發(fā)onclose有些會靜默斷開onclose延遲很久才觸發(fā)。解決方案是雙保險客戶端心跳 服務(wù)端超時檢測?？蛻舳嗣?0秒發(fā)ping服務(wù)端如果60秒沒收到任何消息就主動關(guān)閉連接?？蛻舳藱z測到連接關(guān)閉后用指數(shù)退避重連。還有一個細(xì)節(jié)頁面從后臺恢復(fù)時要立即檢查連接狀態(tài)?？梢酝ㄟ^visibilitychange事件監(jiān)聽document.addEventListener(visibilitychange, () { if (!document.hidden ws.readyState ! WebSocket.OPEN) { reconnect(); } });6.2 大數(shù)據(jù)量下的性能問題當(dāng)頁面產(chǎn)生大量日志時WebSocket消息可能非常大。比如一個接口返回了1MB的JSON直接通過WebSocket發(fā)送會導(dǎo)致消息分片增加延遲。解決方案是在頁面端做壓縮和截斷。對于超過10KB的響應(yīng)體只發(fā)送前10KB并標(biāo)記truncated: true。如果AI需要完整數(shù)據(jù)可以通過另一個工具get_full_response按請求ID查詢服務(wù)端從磁盤讀取完整數(shù)據(jù)。另外日志上報要做批量處理。不要每產(chǎn)生一條日志就發(fā)一次WebSocket消息而是攢夠10條或每隔500毫秒發(fā)一次let logBuffer []; let flushTimer null; function bufferLog(log) { logBuffer.push(log); if (logBuffer.length 10) { flushLogs(); } else if (!flushTimer) { flushTimer setTimeout(flushLogs, 500); } } function flushLogs() { if (logBuffer.length 0) return; ws.send(JSON.stringify({ type: logs_batch, logs: logBuffer })); logBuffer []; clearTimeout(flushTimer); flushTimer null; }6.3 MCP Server的啟動與調(diào)試技巧MCP Server通過stdio通信調(diào)試起來不太直觀。我的做法是同時啟動一個HTTP調(diào)試端口在開發(fā)階段可以通過瀏覽器或curl直接調(diào)用MCP工具驗證邏輯是否正確const http require(http); if (process.env.DEBUG_MCP 1) { http.createServer((req, res) { if (req.url /logs) { res.end(JSON.stringify(store.queryLogs({ limit: 50 }))); } else if (req.url /requests) { res.end(JSON.stringify(store.requests.slice(-50))); } }).listen(8766); }這樣在接入AI客戶端之前可以先通過http://localhost:8766/logs確認(rèn)數(shù)據(jù)是否正常上報。另一個坑是MCP Server的進(jìn)程生命周期。AI客戶端啟動時會拉起MCP Server進(jìn)程客戶端關(guān)閉時會殺掉進(jìn)程。如果你的WebSocket服務(wù)也在同一個進(jìn)程里客戶端關(guān)閉后WebSocket服務(wù)也會停止頁面就斷連了。解決方案是把WebSocket服務(wù)和MCP Server拆成兩個獨立進(jìn)程MCP Server通過HTTP或Unix Socket向WebSocket服務(wù)查詢數(shù)據(jù)。6.4 安全邊界什么時候不該用這套方案這套方案的核心是把頁面運行時數(shù)據(jù)暴露給本地服務(wù)。在開發(fā)環(huán)境沒問題但在生產(chǎn)環(huán)境絕對不能用。幾個必須遵守的原則生產(chǎn)環(huán)境構(gòu)建時通過環(huán)境變量徹底移除調(diào)試腳本W(wǎng)ebSocket服務(wù)只監(jiān)聽本地回環(huán)地址127.0.0.1不要監(jiān)聽0.0.0.0如果必須跨設(shè)備調(diào)試手機(jī)連電腦確保在同一個可信局域網(wǎng)內(nèi)且調(diào)試完成后立即關(guān)閉服務(wù)敏感數(shù)據(jù)脫敏必須在頁面端完成不要依賴服務(wù)端處理我在實際項目中會把調(diào)試腳本的引入邏輯放在構(gòu)建工具的配置里通過process.env.NODE_ENV判斷生產(chǎn)構(gòu)建時直接不打包這個腳本。這樣即使有人手動在URL里加參數(shù)也不會有任何調(diào)試代碼執(zhí)行。這套方案我用了大概三個月從最初的簡單日志轉(zhuǎn)發(fā)到后來加上請求攔截、eval執(zhí)行、多頁面支持基本上覆蓋了H5調(diào)試的常見場景。最大的感受是AI輔助debug的前提是AI能拿到足夠的數(shù)據(jù)而MCP正好解決了數(shù)據(jù)通道的問題。vConsole負(fù)責(zé)采集WebSocket負(fù)責(zé)傳輸MCP負(fù)責(zé)暴露給AI三者各司其職組合起來就是一個完整的AI輔助調(diào)試閉環(huán)。