絡(luò)請(qǐng)求)
1. 移動(dòng)端調(diào)試的困局為什么AI看不見你的H5日志做過H5開發(fā)的人都有一個(gè)共同的痛頁(yè)面在手機(jī)上跑日志在手機(jī)里而你坐在電腦前。Chrome DevTools 的遠(yuǎn)程調(diào)試雖然能用但限制極多——需要USB連接、需要開啟開發(fā)者模式、部分瀏覽器內(nèi)核根本不支持、iOS上的Safari Inspector還經(jīng)常斷連。更別提那些嵌在App WebView里的頁(yè)面你連入口都找不到。傳統(tǒng)的做法是在頁(yè)面里手動(dòng)掛一個(gè)vConsole然后在手機(jī)屏幕上戳來戳去。這個(gè)方案本身沒問題vConsole確實(shí)是移動(dòng)端調(diào)試的利器它能在頁(yè)面上生成一個(gè)懸浮面板展示console日志、網(wǎng)絡(luò)請(qǐng)求、DOM結(jié)構(gòu)、Storage等信息。但問題在于這些信息只有人眼能看到AI看不到。現(xiàn)在大家都在用AI輔助debug你把代碼貼給AIAI幫你分析問題。但AI能拿到的只有你手動(dòng)復(fù)制粘貼的那幾行日志上下文嚴(yán)重缺失。你告訴AI接口報(bào)錯(cuò)了AI問你報(bào)什么錯(cuò)你再去vConsole里翻翻到了再貼過去。這個(gè)來回過程極其低效而且經(jīng)常漏掉關(guān)鍵信息——比如請(qǐng)求頭里的某個(gè)字段、響應(yīng)體的完整結(jié)構(gòu)、報(bào)錯(cuò)前后的日志順序。MCPModel Context Protocol的出現(xiàn)改變了這個(gè)局面。MCP本質(zhì)上是一套讓AI模型能夠調(diào)用外部工具的協(xié)議標(biāo)準(zhǔn)你可以把它理解成給AI裝了一雙手。通過MCPAI不再只能被動(dòng)地接收你粘貼的文本而是可以主動(dòng)去調(diào)用工具、獲取數(shù)據(jù)、執(zhí)行操作。把vConsole和MCP結(jié)合起來就意味著AI可以直接讀取H5頁(yè)面上的日志和網(wǎng)絡(luò)請(qǐng)求不需要你手動(dòng)搬運(yùn)。這篇文章要講的就是怎么把這兩件事串起來。核心思路是在H5頁(yè)面里集成vConsole通過WebSocket把vConsole捕獲的日志和請(qǐng)求數(shù)據(jù)實(shí)時(shí)推送到一個(gè)本地服務(wù)再把這個(gè)服務(wù)封裝成MCP Server讓AI通過MCP協(xié)議直接查詢。整條鏈路打通之后你只需要對(duì)AI說幫我看看剛才那個(gè)頁(yè)面為什么白屏AI就能自己去拉日志、分析請(qǐng)求、定位問題。適合閱讀這篇文章的人有H5開發(fā)經(jīng)驗(yàn)的前端工程師、正在探索AI輔助開發(fā)流程的技術(shù)人、對(duì)MCP協(xié)議感興趣但還沒找到落地場(chǎng)景的開發(fā)者。不需要你精通WebSocket或MCP協(xié)議細(xì)節(jié)我會(huì)把每一步的原理和操作都講清楚。2. 拆解這條鏈路vConsole、WebSocket與MCP各自扮演什么角色2.1 vConsole的能力邊界與數(shù)據(jù)出口vConsole是騰訊開源的一個(gè)輕量級(jí)移動(dòng)端調(diào)試面板壓縮后只有幾十KB對(duì)頁(yè)面性能影響極小。它的核心能力包括Console面板捕獲所有console.log/warn/error/info輸出包括對(duì)象展開Network面板記錄所有XMLHttpRequest和fetch請(qǐng)求的URL、方法、狀態(tài)碼、請(qǐng)求頭、響應(yīng)頭、響應(yīng)體、耗時(shí)Element面板查看和修改DOM結(jié)構(gòu)Storage面板查看Cookie、LocalStorage、SessionStorageSystem面板顯示UA、屏幕尺寸、網(wǎng)絡(luò)類型等關(guān)鍵點(diǎn)在于vConsole提供了一個(gè)插件機(jī)制和事件系統(tǒng)。你可以通過vConsole.VConsolePlugin自定義插件也可以直接hook它的內(nèi)部方法來獲取數(shù)據(jù)。但更優(yōu)雅的方式是利用vConsole的vConsole.core對(duì)象它暴露了一些內(nèi)部API。不過直接hook vConsole內(nèi)部API有個(gè)問題版本升級(jí)可能導(dǎo)致API變化。所以更穩(wěn)妥的方案是自己攔截console方法和XHR/fetch把數(shù)據(jù)同時(shí)輸出給vConsole和WebSocket。這樣即使vConsole升級(jí)你的數(shù)據(jù)通道也不受影響。具體做法是在頁(yè)面加載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對(duì)于網(wǎng)絡(luò)請(qǐng)求攔截XMLHttpRequest的open和send方法以及fetch函數(shù)。這里要注意的是攔截必須在vConsole初始化之前完成否則vConsole會(huì)先捕獲到原始方法。2.2 WebSocket作為實(shí)時(shí)數(shù)據(jù)通道的選型理由為什么用WebSocket而不是HTTP輪詢?cè)蚝芎?jiǎn)單日志和請(qǐng)求是實(shí)時(shí)產(chǎn)生的輪詢有延遲且浪費(fèi)資源。WebSocket建立一次連接后可以雙向通信服務(wù)端可以主動(dòng)推送指令比如開始錄制、清空日志客戶端可以實(shí)時(shí)上報(bào)數(shù)據(jù)。WebSocket的心跳機(jī)制也是必須考慮的。移動(dòng)端網(wǎng)絡(luò)環(huán)境復(fù)雜連接可能因?yàn)榍泻笈_(tái)、網(wǎng)絡(luò)切換等原因斷開。標(biāo)準(zhǔn)做法是客戶端每隔30秒發(fā)送一個(gè)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秒。這樣既不會(huì)頻繁重連造成服務(wù)端壓力也不會(huì)在短暫斷網(wǎng)后長(zhǎng)時(shí)間失聯(lián)。2.3 MCP Server的角色定位與協(xié)議要點(diǎn)MCP Server在這條鏈路里的角色是數(shù)據(jù)中轉(zhuǎn)和查詢接口。它做三件事接收WebSocket客戶端上報(bào)的日志和請(qǐng)求數(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ù)定義的提示模板這個(gè)場(chǎng)景下用得少一個(gè)典型的MCP工具定義長(zhǎng)這樣{ name: get_logs, description: 獲取指定時(shí)間范圍內(nèi)的console日志, inputSchema: { type: object, properties: { since: { type: number, description: 起始時(shí)間戳毫秒不傳則返回最近100條 }, level: { type: string, enum: [log, warn, error, info], description: 日志級(jí)別過濾 }, keyword: { type: string, description: 關(guān)鍵詞搜索 } } } }AI通過MCP協(xié)議調(diào)用這個(gè)工具時(shí)會(huì)傳入?yún)?shù)MCP Server執(zhí)行查詢并返回結(jié)果。整個(gè)過程對(duì)AI來說是透明的它只需要知道我有一個(gè)工具可以查日志。3. 從零搭建vConsole數(shù)據(jù)上報(bào)與MCP Server的完整實(shí)現(xiàn)3.1 頁(yè)面端改造在不破壞原有調(diào)試體驗(yàn)的前提下增加數(shù)據(jù)出口頁(yè)面端的改造原則是最小侵入。你不需要修改業(yè)務(wù)代碼只需要在頁(yè)面入口處引入一個(gè)獨(dú)立的腳本。這個(gè)腳本做四件事初始化WebSocket連接攔截console方法攔截XHR和fetch初始化vConsole保持原有調(diào)試面板可用先看WebSocket連接的建立。這里有一個(gè)細(xì)節(jié)連接地址不能硬編碼。開發(fā)環(huán)境、測(cè)試環(huán)境、生產(chǎn)環(huán)境的服務(wù)器地址不同而且同一頁(yè)面可能在多個(gè)環(huán)境下運(yù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ī)訪問頁(yè)面時(shí)只需要在URL后面加上?debug_host192.168.1.100:8765就能把數(shù)據(jù)推到你的開發(fā)機(jī)上。攔截XHR的代碼需要小心處理因?yàn)楹芏嗫蚣鼙热鏰xios內(nèi)部就是用XHR實(shí)現(xiàn)的。攔截不當(dāng)可能導(dǎo)致請(qǐng)求失敗或數(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可能非常大必須截?cái)喾駝tWebSocket消息可能超過服務(wù)端的接收限制。一般截取前10000個(gè)字符就夠了足夠AI分析問題。對(duì)于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()是因?yàn)閞esponse body只能被讀取一次不clone的話業(yè)務(wù)代碼就讀不到了。3.2 服務(wù)端實(shí)現(xiàn)用Node.js同時(shí)承載WebSocket和MCP服務(wù)端選Node.js的原因很簡(jiǎn)單前后端同語(yǔ)言調(diào)試方便生態(tài)成熟。核心依賴只有兩個(gè)ws用于WebSocketmodelcontextprotocol/sdk用于MCP。先初始化項(xiàng)目mkdir vconsole-mcp-server cd vconsole-mcp-server npm init -y npm install ws modelcontextprotocol/sdk服務(wù)端的主邏輯分兩塊WebSocket服務(wù)接收數(shù)據(jù)MCP服務(wù)暴露查詢接口。兩者共享同一個(gè)數(shù)據(jù)存儲(chǔ)。數(shù)據(jù)存儲(chǔ)用簡(jiǎn)單的內(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ù)的實(shí)現(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的實(shí)現(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頁(yè)面的console日志, inputSchema: { type: object, properties: { since: { type: number, description: 起始時(shí)間戳 }, level: { type: string, enum: [log, warn, error, info] }, keyword: { type: string }, limit: { type: number, default: 100 } } } }, { name: get_requests, description: 獲取H5頁(yè)面的網(wǎng)絡(luò)請(qǐng)求記錄, inputSchema: { type: object, properties: { since: { type: number }, urlKeyword: { type: string }, status: { type: number }, limit: { type: number, default: 50 } } } }, { name: clear_data, description: 清空所有日志和請(qǐng)求記錄, 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客戶端接入方式不同但核心都是配置一個(gè)MCP Server的啟動(dòng)命令。以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)鍵點(diǎn)是MCP Server通過stdio通信所以AI客戶端會(huì)以子進(jìn)程的方式啟動(dòng)你的Node.js腳本。這里有一個(gè)容易踩的坑stdio模式下不能用console.log輸出調(diào)試信息因?yàn)閟tdout被MCP協(xié)議占用了。調(diào)試信息必須用console.error輸出到stderr否則會(huì)干擾MCP協(xié)議通信導(dǎo)致AI客戶端解析失敗。4. 實(shí)戰(zhàn)驗(yàn)證用AI定位一個(gè)真實(shí)的H5白屏問題4.1 構(gòu)造一個(gè)典型的白屏場(chǎng)景為了驗(yàn)證整條鏈路我構(gòu)造了一個(gè)典型的H5白屏問題頁(yè)面加載時(shí)調(diào)用一個(gè)用戶信息接口接口返回的數(shù)據(jù)結(jié)構(gòu)跟前端預(yù)期不一致導(dǎo)致渲染時(shí)報(bào)錯(cuò)頁(yè)面白屏。問題代碼大概長(zhǎng)這樣async function initPage() { const res await fetch(/api/user/info); const data await res.json(); // 預(yù)期data.user.name但實(shí)際接口返回的是data.data.userName document.getElementById(username).textContent data.user.name; }這段代碼在data.user為undefined時(shí)會(huì)拋出TypeError導(dǎo)致后續(xù)渲染中斷頁(yè)面白屏。4.2 讓AI自己拉日志和請(qǐng)求頁(yè)面在手機(jī)上打開后vConsole面板會(huì)顯示報(bào)錯(cuò)同時(shí)數(shù)據(jù)通過WebSocket推到了MCP Server?，F(xiàn)在我在AI客戶端里輸入幫我看看最近這個(gè)H5頁(yè)面為什么白屏了先拉一下最近的錯(cuò)誤日志和網(wǎng)絡(luò)請(qǐng)求。AI會(huì)調(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會(huì)調(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。整個(gè)分析過程不需要我手動(dòng)復(fù)制任何日志。4.3 對(duì)比傳統(tǒng)流程的效率差異傳統(tǒng)流程下這個(gè)問題的排查步驟是在手機(jī)上打開頁(yè)面看到白屏打開vConsole切到Console面板看到報(bào)錯(cuò)截圖或復(fù)制報(bào)錯(cuò)信息切到Network面板找到接口請(qǐng)求查看響應(yīng)體復(fù)制響應(yīng)體打開AI對(duì)話窗口粘貼報(bào)錯(cuò)和響應(yīng)體描述問題AI分析后給出結(jié)論整個(gè)過程至少需要5-6次手動(dòng)操作耗時(shí)2-3分鐘。而通過MCP鏈路只需要對(duì)AI說一句話AI自己完成數(shù)據(jù)拉取和分析耗時(shí)10-20秒。更重要的是AI拿到的是完整數(shù)據(jù)不會(huì)因?yàn)槭謩?dòng)復(fù)制遺漏關(guān)鍵信息。4.4 幾個(gè)實(shí)測(cè)中發(fā)現(xiàn)的細(xì)節(jié)問題第一個(gè)問題日志順序錯(cuò)亂。WebSocket消息是異步到達(dá)的如果頁(yè)面瞬間產(chǎn)生大量日志服務(wù)端接收順序可能跟實(shí)際產(chǎn)生順序不一致。解決方案是在每條日志里帶上客戶端時(shí)間戳服務(wù)端按時(shí)間戳排序后再返回給AI。第二個(gè)問題循環(huán)日志導(dǎo)致數(shù)據(jù)爆炸。有些頁(yè)面會(huì)在定時(shí)器里不斷打日志幾秒鐘就能產(chǎn)生上千條。如果不加限制內(nèi)存和磁盤都會(huì)被撐爆。解決方案是在頁(yè)面端做采樣同樣的日志內(nèi)容在1秒內(nèi)只上報(bào)一次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; }第三個(gè)問題敏感信息泄露。請(qǐng)求體里可能包含密碼、token等敏感字段。如果這些數(shù)據(jù)被推送到服務(wù)端并持久化到磁盤存在安全風(fēng)險(xiǎn)。解決方案是在頁(yè)面端做脫敏處理對(duì)包含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 增加主動(dòng)執(zhí)行能力遠(yuǎn)程執(zhí)行JS基礎(chǔ)的查詢功能只能讓AI看但如果AI能做調(diào)試效率會(huì)更高。比如AI發(fā)現(xiàn)某個(gè)變量值不對(duì)可以直接在頁(yè)面里執(zhí)行一段JS來驗(yàn)證假設(shè)。實(shí)現(xiàn)方式是在MCP Server里增加一個(gè)eval_js工具通過WebSocket向頁(yè)面發(fā)送指令頁(yè)面執(zhí)行后把結(jié)果返回// MCP Server端 { name: eval_js, description: 在H5頁(yè)面中執(zhí)行JavaScript代碼并返回結(jié)果, inputSchema: { type: object, properties: { code: { type: string, description: 要執(zhí)行的JS代碼 } }, required: [code] } }頁(yè)面端收到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 })); } } };這個(gè)功能非常強(qiáng)大但也有風(fēng)險(xiǎn)。必須限制執(zhí)行權(quán)限只允許在開發(fā)環(huán)境使用生產(chǎn)環(huán)境要禁用?？梢栽陧?yè)面端加一個(gè)開關(guān)只有URL參數(shù)里帶了debug1才啟用eval功能。5.2 日志與請(qǐng)求的關(guān)聯(lián)分析單獨(dú)看日志和單獨(dú)看請(qǐng)求有時(shí)候很難定位問題。比如一個(gè)接口報(bào)錯(cuò)但日志里沒有明顯異常。這時(shí)候需要把請(qǐng)求和它前后的日志關(guān)聯(lián)起來。實(shí)現(xiàn)思路是在頁(yè)面端記錄每條日志和請(qǐng)求的序列號(hào)服務(wù)端按序列號(hào)排序。查詢時(shí)如果AI指定了某個(gè)請(qǐng)求就返回該請(qǐng)求前后各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在分析問題時(shí)能看到完整的上下文而不是孤立的一條日志或一個(gè)請(qǐng)求。5.3 多頁(yè)面同時(shí)調(diào)試的支持實(shí)際項(xiàng)目中一個(gè)H5應(yīng)用可能有多個(gè)頁(yè)面或者同時(shí)打開多個(gè)WebView。如果所有頁(yè)面的數(shù)據(jù)都混在一起AI很難區(qū)分。解決方案是在WebSocket連接建立時(shí)客戶端發(fā)送一個(gè)頁(yè)面標(biāo)識(shí)const pageId ${location.pathname}_${Date.now()}; ws.onopen () { ws.send(JSON.stringify({ type: register, pageId, url: location.href })); };服務(wù)端按pageId分組存儲(chǔ)數(shù)據(jù)。MCP工具增加pageId參數(shù)AI可以指定查詢哪個(gè)頁(yè)面的數(shù)據(jù)。如果不指定就返回所有頁(yè)面的匯總但每條數(shù)據(jù)都帶上pageId標(biāo)識(shí)。5.4 與Playwright MCP的聯(lián)動(dòng)如果你同時(shí)在使用Playwright MCP做自動(dòng)化測(cè)試可以把兩者結(jié)合起來。Playwright負(fù)責(zé)操作頁(yè)面點(diǎn)擊、輸入、導(dǎo)航vConsole MCP負(fù)責(zé)收集頁(yè)面運(yùn)行時(shí)的日志和請(qǐng)求。AI可以在執(zhí)行完一個(gè)操作后自動(dòng)拉取該操作產(chǎn)生的日志和請(qǐng)求驗(yàn)證是否符合預(yù)期。這種聯(lián)動(dòng)方式特別適合做回歸測(cè)試AI自動(dòng)跑一遍核心流程然后檢查有沒有報(bào)錯(cuò)日志、有沒有失敗的請(qǐng)求。比人工寫斷言靈活得多因?yàn)锳I可以根據(jù)上下文判斷這個(gè)報(bào)錯(cuò)是否正常。6. 踩過的坑與穩(wěn)定性優(yōu)化6.1 WebSocket連接在移動(dòng)端的斷連問題移動(dòng)端瀏覽器在切后臺(tái)、鎖屏、網(wǎng)絡(luò)切換時(shí)WebSocket連接大概率會(huì)斷開。而且不同瀏覽器的行為不一致有些會(huì)立即觸發(fā)onclose有些會(huì)靜默斷開onclose延遲很久才觸發(fā)。解決方案是雙保險(xiǎn)客戶端心跳 服務(wù)端超時(shí)檢測(cè)?？蛻舳嗣?0秒發(fā)ping服務(wù)端如果60秒沒收到任何消息就主動(dòng)關(guān)閉連接?？蛻舳藱z測(cè)到連接關(guān)閉后用指數(shù)退避重連。還有一個(gè)細(xì)節(jié)頁(yè)面從后臺(tái)恢復(fù)時(shí)要立即檢查連接狀態(tài)?？梢酝ㄟ^visibilitychange事件監(jiān)聽document.addEventListener(visibilitychange, () { if (!document.hidden ws.readyState ! WebSocket.OPEN) { reconnect(); } });6.2 大數(shù)據(jù)量下的性能問題當(dāng)頁(yè)面產(chǎn)生大量日志時(shí)WebSocket消息可能非常大。比如一個(gè)接口返回了1MB的JSON直接通過WebSocket發(fā)送會(huì)導(dǎo)致消息分片增加延遲。解決方案是在頁(yè)面端做壓縮和截?cái)?。?duì)于超過10KB的響應(yīng)體只發(fā)送前10KB并標(biāo)記truncated: true。如果AI需要完整數(shù)據(jù)可以通過另一個(gè)工具get_full_response按請(qǐng)求ID查詢服務(wù)端從磁盤讀取完整數(shù)據(jù)。另外日志上報(bào)要做批量處理。不要每產(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的啟動(dòng)與調(diào)試技巧MCP Server通過stdio通信調(diào)試起來不太直觀。我的做法是同時(shí)啟動(dòng)一個(gè)HTTP調(diào)試端口在開發(fā)階段可以通過瀏覽器或curl直接調(diào)用MCP工具驗(yàn)證邏輯是否正確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ù)是否正常上報(bào)。另一個(gè)坑是MCP Server的進(jìn)程生命周期。AI客戶端啟動(dòng)時(shí)會(huì)拉起MCP Server進(jìn)程客戶端關(guān)閉時(shí)會(huì)殺掉進(jìn)程。如果你的WebSocket服務(wù)也在同一個(gè)進(jìn)程里客戶端關(guān)閉后WebSocket服務(wù)也會(huì)停止頁(yè)面就斷連了。解決方案是把WebSocket服務(wù)和MCP Server拆成兩個(gè)獨(dú)立進(jìn)程MCP Server通過HTTP或Unix Socket向WebSocket服務(wù)查詢數(shù)據(jù)。6.4 安全邊界什么時(shí)候不該用這套方案這套方案的核心是把頁(yè)面運(yùn)行時(shí)數(shù)據(jù)暴露給本地服務(wù)。在開發(fā)環(huán)境沒問題但在生產(chǎn)環(huán)境絕對(duì)不能用。幾個(gè)必須遵守的原則生產(chǎn)環(huán)境構(gòu)建時(shí)通過環(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ī)連電腦確保在同一個(gè)可信局域網(wǎng)內(nèi)且調(diào)試完成后立即關(guān)閉服務(wù)敏感數(shù)據(jù)脫敏必須在頁(yè)面端完成不要依賴服務(wù)端處理我在實(shí)際項(xiàng)目中會(huì)把調(diào)試腳本的引入邏輯放在構(gòu)建工具的配置里通過process.env.NODE_ENV判斷生產(chǎn)構(gòu)建時(shí)直接不打包這個(gè)腳本。這樣即使有人手動(dòng)在URL里加參數(shù)也不會(huì)有任何調(diào)試代碼執(zhí)行。這套方案我用了大概三個(gè)月從最初的簡(jiǎn)單日志轉(zhuǎn)發(fā)到后來加上請(qǐng)求攔截、eval執(zhí)行、多頁(yè)面支持基本上覆蓋了H5調(diào)試的常見場(chǎng)景。最大的感受是AI輔助debug的前提是AI能拿到足夠的數(shù)據(jù)而MCP正好解決了數(shù)據(jù)通道的問題。vConsole負(fù)責(zé)采集WebSocket負(fù)責(zé)傳輸MCP負(fù)責(zé)暴露給AI三者各司其職組合起來就是一個(gè)完整的AI輔助調(diào)試閉環(huán)。 vConsole + MCP：讓AI直接讀取H5日志與網(wǎng)絡(luò)請(qǐng)求
1. 移動(dòng)端調(diào)試的困局為什么AI看不見你的H5日志做過H5開發(fā)的人都有一個(gè)共同的痛頁(yè)面在手機(jī)上跑日志在手機(jī)里而你坐在電腦前。Chrome DevTools 的遠(yuǎn)程調(diào)試雖然能用但限制極多——需要USB連接、需要開啟開發(fā)者模式、部分瀏覽器內(nèi)核根本不支持、iOS上的Safari Inspector還經(jīng)常斷連。更別提那些嵌在App WebView里的頁(yè)面你連入口都找不到。傳統(tǒng)的做法是在頁(yè)面里手動(dòng)掛一個(gè)vConsole然后在手機(jī)屏幕上戳來戳去。這個(gè)方案本身沒問題vConsole確實(shí)是移動(dòng)端調(diào)試的利器它能在頁(yè)面上生成一個(gè)懸浮面板展示console日志、網(wǎng)絡(luò)請(qǐng)求、DOM結(jié)構(gòu)、Storage等信息。但問題在于這些信息只有人眼能看到AI看不到。現(xiàn)在大家都在用AI輔助debug你把代碼貼給AIAI幫你分析問題。但AI能拿到的只有你手動(dòng)復(fù)制粘貼的那幾行日志上下文嚴(yán)重缺失。你告訴AI接口報(bào)錯(cuò)了AI問你報(bào)什么錯(cuò)你再去vConsole里翻翻到了再貼過去。這個(gè)來回過程極其低效而且經(jīng)常漏掉關(guān)鍵信息——比如請(qǐng)求頭里的某個(gè)字段、響應(yīng)體的完整結(jié)構(gòu)、報(bào)錯(cuò)前后的日志順序。MCPModel Context Protocol的出現(xiàn)改變了這個(gè)局面。MCP本質(zhì)上是一套讓AI模型能夠調(diào)用外部工具的協(xié)議標(biāo)準(zhǔn)你可以把它理解成給AI裝了一雙手。通過MCPAI不再只能被動(dòng)地接收你粘貼的文本而是可以主動(dòng)去調(diào)用工具、獲取數(shù)據(jù)、執(zhí)行操作。把vConsole和MCP結(jié)合起來就意味著AI可以直接讀取H5頁(yè)面上的日志和網(wǎng)絡(luò)請(qǐng)求不需要你手動(dòng)搬運(yùn)。這篇文章要講的就是怎么把這兩件事串起來。核心思路是在H5頁(yè)面里集成vConsole通過WebSocket把vConsole捕獲的日志和請(qǐng)求數(shù)據(jù)實(shí)時(shí)推送到一個(gè)本地服務(wù)再把這個(gè)服務(wù)封裝成MCP Server讓AI通過MCP協(xié)議直接查詢。整條鏈路打通之后你只需要對(duì)AI說幫我看看剛才那個(gè)頁(yè)面為什么白屏AI就能自己去拉日志、分析請(qǐng)求、定位問題。適合閱讀這篇文章的人有H5開發(fā)經(jīng)驗(yàn)的前端工程師、正在探索AI輔助開發(fā)流程的技術(shù)人、對(duì)MCP協(xié)議感興趣但還沒找到落地場(chǎng)景的開發(fā)者。不需要你精通WebSocket或MCP協(xié)議細(xì)節(jié)我會(huì)把每一步的原理和操作都講清楚。2. 拆解這條鏈路vConsole、WebSocket與MCP各自扮演什么角色2.1 vConsole的能力邊界與數(shù)據(jù)出口vConsole是騰訊開源的一個(gè)輕量級(jí)移動(dòng)端調(diào)試面板壓縮后只有幾十KB對(duì)頁(yè)面性能影響極小。它的核心能力包括Console面板捕獲所有console.log/warn/error/info輸出包括對(duì)象展開Network面板記錄所有XMLHttpRequest和fetch請(qǐng)求的URL、方法、狀態(tài)碼、請(qǐng)求頭、響應(yīng)頭、響應(yīng)體、耗時(shí)Element面板查看和修改DOM結(jié)構(gòu)Storage面板查看Cookie、LocalStorage、SessionStorageSystem面板顯示UA、屏幕尺寸、網(wǎng)絡(luò)類型等關(guān)鍵點(diǎn)在于vConsole提供了一個(gè)插件機(jī)制和事件系統(tǒng)。你可以通過vConsole.VConsolePlugin自定義插件也可以直接hook它的內(nèi)部方法來獲取數(shù)據(jù)。但更優(yōu)雅的方式是利用vConsole的vConsole.core對(duì)象它暴露了一些內(nèi)部API。不過直接hook vConsole內(nèi)部API有個(gè)問題版本升級(jí)可能導(dǎo)致API變化。所以更穩(wěn)妥的方案是自己攔截console方法和XHR/fetch把數(shù)據(jù)同時(shí)輸出給vConsole和WebSocket。這樣即使vConsole升級(jí)你的數(shù)據(jù)通道也不受影響。具體做法是在頁(yè)面加載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對(duì)于網(wǎng)絡(luò)請(qǐng)求攔截XMLHttpRequest的open和send方法以及fetch函數(shù)。這里要注意的是攔截必須在vConsole初始化之前完成否則vConsole會(huì)先捕獲到原始方法。2.2 WebSocket作為實(shí)時(shí)數(shù)據(jù)通道的選型理由為什么用WebSocket而不是HTTP輪詢?cè)蚝芎?jiǎn)單日志和請(qǐng)求是實(shí)時(shí)產(chǎn)生的輪詢有延遲且浪費(fèi)資源。WebSocket建立一次連接后可以雙向通信服務(wù)端可以主動(dòng)推送指令比如開始錄制、清空日志客戶端可以實(shí)時(shí)上報(bào)數(shù)據(jù)。WebSocket的心跳機(jī)制也是必須考慮的。移動(dòng)端網(wǎng)絡(luò)環(huán)境復(fù)雜連接可能因?yàn)榍泻笈_(tái)、網(wǎng)絡(luò)切換等原因斷開。標(biāo)準(zhǔn)做法是客戶端每隔30秒發(fā)送一個(gè)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秒。這樣既不會(huì)頻繁重連造成服務(wù)端壓力也不會(huì)在短暫斷網(wǎng)后長(zhǎng)時(shí)間失聯(lián)。2.3 MCP Server的角色定位與協(xié)議要點(diǎn)MCP Server在這條鏈路里的角色是數(shù)據(jù)中轉(zhuǎn)和查詢接口。它做三件事接收WebSocket客戶端上報(bào)的日志和請(qǐng)求數(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ù)定義的提示模板這個(gè)場(chǎng)景下用得少一個(gè)典型的MCP工具定義長(zhǎng)這樣{ name: get_logs, description: 獲取指定時(shí)間范圍內(nèi)的console日志, inputSchema: { type: object, properties: { since: { type: number, description: 起始時(shí)間戳毫秒不傳則返回最近100條 }, level: { type: string, enum: [log, warn, error, info], description: 日志級(jí)別過濾 }, keyword: { type: string, description: 關(guān)鍵詞搜索 } } } }AI通過MCP協(xié)議調(diào)用這個(gè)工具時(shí)會(huì)傳入?yún)?shù)MCP Server執(zhí)行查詢并返回結(jié)果。整個(gè)過程對(duì)AI來說是透明的它只需要知道我有一個(gè)工具可以查日志。3. 從零搭建vConsole數(shù)據(jù)上報(bào)與MCP Server的完整實(shí)現(xiàn)3.1 頁(yè)面端改造在不破壞原有調(diào)試體驗(yàn)的前提下增加數(shù)據(jù)出口頁(yè)面端的改造原則是最小侵入。你不需要修改業(yè)務(wù)代碼只需要在頁(yè)面入口處引入一個(gè)獨(dú)立的腳本。這個(gè)腳本做四件事初始化WebSocket連接攔截console方法攔截XHR和fetch初始化vConsole保持原有調(diào)試面板可用先看WebSocket連接的建立。這里有一個(gè)細(xì)節(jié)連接地址不能硬編碼。開發(fā)環(huán)境、測(cè)試環(huán)境、生產(chǎn)環(huán)境的服務(wù)器地址不同而且同一頁(yè)面可能在多個(gè)環(huán)境下運(yù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ī)訪問頁(yè)面時(shí)只需要在URL后面加上?debug_host192.168.1.100:8765就能把數(shù)據(jù)推到你的開發(fā)機(jī)上。攔截XHR的代碼需要小心處理因?yàn)楹芏嗫蚣鼙热鏰xios內(nèi)部就是用XHR實(shí)現(xiàn)的。攔截不當(dāng)可能導(dǎo)致請(qǐng)求失敗或數(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可能非常大必須截?cái)喾駝tWebSocket消息可能超過服務(wù)端的接收限制。一般截取前10000個(gè)字符就夠了足夠AI分析問題。對(duì)于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()是因?yàn)閞esponse body只能被讀取一次不clone的話業(yè)務(wù)代碼就讀不到了。3.2 服務(wù)端實(shí)現(xiàn)用Node.js同時(shí)承載WebSocket和MCP服務(wù)端選Node.js的原因很簡(jiǎn)單前后端同語(yǔ)言調(diào)試方便生態(tài)成熟。核心依賴只有兩個(gè)ws用于WebSocketmodelcontextprotocol/sdk用于MCP。先初始化項(xiàng)目mkdir vconsole-mcp-server cd vconsole-mcp-server npm init -y npm install ws modelcontextprotocol/sdk服務(wù)端的主邏輯分兩塊WebSocket服務(wù)接收數(shù)據(jù)MCP服務(wù)暴露查詢接口。兩者共享同一個(gè)數(shù)據(jù)存儲(chǔ)。數(shù)據(jù)存儲(chǔ)用簡(jiǎn)單的內(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ù)的實(shí)現(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的實(shí)現(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頁(yè)面的console日志, inputSchema: { type: object, properties: { since: { type: number, description: 起始時(shí)間戳 }, level: { type: string, enum: [log, warn, error, info] }, keyword: { type: string }, limit: { type: number, default: 100 } } } }, { name: get_requests, description: 獲取H5頁(yè)面的網(wǎng)絡(luò)請(qǐng)求記錄, inputSchema: { type: object, properties: { since: { type: number }, urlKeyword: { type: string }, status: { type: number }, limit: { type: number, default: 50 } } } }, { name: clear_data, description: 清空所有日志和請(qǐng)求記錄, 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客戶端接入方式不同但核心都是配置一個(gè)MCP Server的啟動(dòng)命令。以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)鍵點(diǎn)是MCP Server通過stdio通信所以AI客戶端會(huì)以子進(jìn)程的方式啟動(dòng)你的Node.js腳本。這里有一個(gè)容易踩的坑stdio模式下不能用console.log輸出調(diào)試信息因?yàn)閟tdout被MCP協(xié)議占用了。調(diào)試信息必須用console.error輸出到stderr否則會(huì)干擾MCP協(xié)議通信導(dǎo)致AI客戶端解析失敗。4. 實(shí)戰(zhàn)驗(yàn)證用AI定位一個(gè)真實(shí)的H5白屏問題4.1 構(gòu)造一個(gè)典型的白屏場(chǎng)景為了驗(yàn)證整條鏈路我構(gòu)造了一個(gè)典型的H5白屏問題頁(yè)面加載時(shí)調(diào)用一個(gè)用戶信息接口接口返回的數(shù)據(jù)結(jié)構(gòu)跟前端預(yù)期不一致導(dǎo)致渲染時(shí)報(bào)錯(cuò)頁(yè)面白屏。問題代碼大概長(zhǎng)這樣async function initPage() { const res await fetch(/api/user/info); const data await res.json(); // 預(yù)期data.user.name但實(shí)際接口返回的是data.data.userName document.getElementById(username).textContent data.user.name; }這段代碼在data.user為undefined時(shí)會(huì)拋出TypeError導(dǎo)致后續(xù)渲染中斷頁(yè)面白屏。4.2 讓AI自己拉日志和請(qǐng)求頁(yè)面在手機(jī)上打開后vConsole面板會(huì)顯示報(bào)錯(cuò)同時(shí)數(shù)據(jù)通過WebSocket推到了MCP Server?，F(xiàn)在我在AI客戶端里輸入幫我看看最近這個(gè)H5頁(yè)面為什么白屏了先拉一下最近的錯(cuò)誤日志和網(wǎng)絡(luò)請(qǐng)求。AI會(huì)調(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會(huì)調(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。整個(gè)分析過程不需要我手動(dòng)復(fù)制任何日志。4.3 對(duì)比傳統(tǒng)流程的效率差異傳統(tǒng)流程下這個(gè)問題的排查步驟是在手機(jī)上打開頁(yè)面看到白屏打開vConsole切到Console面板看到報(bào)錯(cuò)截圖或復(fù)制報(bào)錯(cuò)信息切到Network面板找到接口請(qǐng)求查看響應(yīng)體復(fù)制響應(yīng)體打開AI對(duì)話窗口粘貼報(bào)錯(cuò)和響應(yīng)體描述問題AI分析后給出結(jié)論整個(gè)過程至少需要5-6次手動(dòng)操作耗時(shí)2-3分鐘。而通過MCP鏈路只需要對(duì)AI說一句話AI自己完成數(shù)據(jù)拉取和分析耗時(shí)10-20秒。更重要的是AI拿到的是完整數(shù)據(jù)不會(huì)因?yàn)槭謩?dòng)復(fù)制遺漏關(guān)鍵信息。4.4 幾個(gè)實(shí)測(cè)中發(fā)現(xiàn)的細(xì)節(jié)問題第一個(gè)問題日志順序錯(cuò)亂。WebSocket消息是異步到達(dá)的如果頁(yè)面瞬間產(chǎn)生大量日志服務(wù)端接收順序可能跟實(shí)際產(chǎn)生順序不一致。解決方案是在每條日志里帶上客戶端時(shí)間戳服務(wù)端按時(shí)間戳排序后再返回給AI。第二個(gè)問題循環(huán)日志導(dǎo)致數(shù)據(jù)爆炸。有些頁(yè)面會(huì)在定時(shí)器里不斷打日志幾秒鐘就能產(chǎn)生上千條。如果不加限制內(nèi)存和磁盤都會(huì)被撐爆。解決方案是在頁(yè)面端做采樣同樣的日志內(nèi)容在1秒內(nèi)只上報(bào)一次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; }第三個(gè)問題敏感信息泄露。請(qǐng)求體里可能包含密碼、token等敏感字段。如果這些數(shù)據(jù)被推送到服務(wù)端并持久化到磁盤存在安全風(fēng)險(xiǎn)。解決方案是在頁(yè)面端做脫敏處理對(duì)包含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 增加主動(dòng)執(zhí)行能力遠(yuǎn)程執(zhí)行JS基礎(chǔ)的查詢功能只能讓AI看但如果AI能做調(diào)試效率會(huì)更高。比如AI發(fā)現(xiàn)某個(gè)變量值不對(duì)可以直接在頁(yè)面里執(zhí)行一段JS來驗(yàn)證假設(shè)。實(shí)現(xiàn)方式是在MCP Server里增加一個(gè)eval_js工具通過WebSocket向頁(yè)面發(fā)送指令頁(yè)面執(zhí)行后把結(jié)果返回// MCP Server端 { name: eval_js, description: 在H5頁(yè)面中執(zhí)行JavaScript代碼并返回結(jié)果, inputSchema: { type: object, properties: { code: { type: string, description: 要執(zhí)行的JS代碼 } }, required: [code] } }頁(yè)面端收到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 })); } } };這個(gè)功能非常強(qiáng)大但也有風(fēng)險(xiǎn)。必須限制執(zhí)行權(quán)限只允許在開發(fā)環(huán)境使用生產(chǎn)環(huán)境要禁用?？梢栽陧?yè)面端加一個(gè)開關(guān)只有URL參數(shù)里帶了debug1才啟用eval功能。5.2 日志與請(qǐng)求的關(guān)聯(lián)分析單獨(dú)看日志和單獨(dú)看請(qǐng)求有時(shí)候很難定位問題。比如一個(gè)接口報(bào)錯(cuò)但日志里沒有明顯異常。這時(shí)候需要把請(qǐng)求和它前后的日志關(guān)聯(lián)起來。實(shí)現(xiàn)思路是在頁(yè)面端記錄每條日志和請(qǐng)求的序列號(hào)服務(wù)端按序列號(hào)排序。查詢時(shí)如果AI指定了某個(gè)請(qǐng)求就返回該請(qǐng)求前后各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在分析問題時(shí)能看到完整的上下文而不是孤立的一條日志或一個(gè)請(qǐng)求。5.3 多頁(yè)面同時(shí)調(diào)試的支持實(shí)際項(xiàng)目中一個(gè)H5應(yīng)用可能有多個(gè)頁(yè)面或者同時(shí)打開多個(gè)WebView。如果所有頁(yè)面的數(shù)據(jù)都混在一起AI很難區(qū)分。解決方案是在WebSocket連接建立時(shí)客戶端發(fā)送一個(gè)頁(yè)面標(biāo)識(shí)const pageId ${location.pathname}_${Date.now()}; ws.onopen () { ws.send(JSON.stringify({ type: register, pageId, url: location.href })); };服務(wù)端按pageId分組存儲(chǔ)數(shù)據(jù)。MCP工具增加pageId參數(shù)AI可以指定查詢哪個(gè)頁(yè)面的數(shù)據(jù)。如果不指定就返回所有頁(yè)面的匯總但每條數(shù)據(jù)都帶上pageId標(biāo)識(shí)。5.4 與Playwright MCP的聯(lián)動(dòng)如果你同時(shí)在使用Playwright MCP做自動(dòng)化測(cè)試可以把兩者結(jié)合起來。Playwright負(fù)責(zé)操作頁(yè)面點(diǎn)擊、輸入、導(dǎo)航vConsole MCP負(fù)責(zé)收集頁(yè)面運(yùn)行時(shí)的日志和請(qǐng)求。AI可以在執(zhí)行完一個(gè)操作后自動(dòng)拉取該操作產(chǎn)生的日志和請(qǐng)求驗(yàn)證是否符合預(yù)期。這種聯(lián)動(dòng)方式特別適合做回歸測(cè)試AI自動(dòng)跑一遍核心流程然后檢查有沒有報(bào)錯(cuò)日志、有沒有失敗的請(qǐng)求。比人工寫斷言靈活得多因?yàn)锳I可以根據(jù)上下文判斷這個(gè)報(bào)錯(cuò)是否正常。6. 踩過的坑與穩(wěn)定性優(yōu)化6.1 WebSocket連接在移動(dòng)端的斷連問題移動(dòng)端瀏覽器在切后臺(tái)、鎖屏、網(wǎng)絡(luò)切換時(shí)WebSocket連接大概率會(huì)斷開。而且不同瀏覽器的行為不一致有些會(huì)立即觸發(fā)onclose有些會(huì)靜默斷開onclose延遲很久才觸發(fā)。解決方案是雙保險(xiǎn)客戶端心跳 服務(wù)端超時(shí)檢測(cè)?？蛻舳嗣?0秒發(fā)ping服務(wù)端如果60秒沒收到任何消息就主動(dòng)關(guān)閉連接?？蛻舳藱z測(cè)到連接關(guān)閉后用指數(shù)退避重連。還有一個(gè)細(xì)節(jié)頁(yè)面從后臺(tái)恢復(fù)時(shí)要立即檢查連接狀態(tài)?？梢酝ㄟ^visibilitychange事件監(jiān)聽document.addEventListener(visibilitychange, () { if (!document.hidden ws.readyState ! WebSocket.OPEN) { reconnect(); } });6.2 大數(shù)據(jù)量下的性能問題當(dāng)頁(yè)面產(chǎn)生大量日志時(shí)WebSocket消息可能非常大。比如一個(gè)接口返回了1MB的JSON直接通過WebSocket發(fā)送會(huì)導(dǎo)致消息分片增加延遲。解決方案是在頁(yè)面端做壓縮和截?cái)?。?duì)于超過10KB的響應(yīng)體只發(fā)送前10KB并標(biāo)記truncated: true。如果AI需要完整數(shù)據(jù)可以通過另一個(gè)工具get_full_response按請(qǐng)求ID查詢服務(wù)端從磁盤讀取完整數(shù)據(jù)。另外日志上報(bào)要做批量處理。不要每產(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的啟動(dòng)與調(diào)試技巧MCP Server通過stdio通信調(diào)試起來不太直觀。我的做法是同時(shí)啟動(dòng)一個(gè)HTTP調(diào)試端口在開發(fā)階段可以通過瀏覽器或curl直接調(diào)用MCP工具驗(yàn)證邏輯是否正確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ù)是否正常上報(bào)。另一個(gè)坑是MCP Server的進(jìn)程生命周期。AI客戶端啟動(dòng)時(shí)會(huì)拉起MCP Server進(jìn)程客戶端關(guān)閉時(shí)會(huì)殺掉進(jìn)程。如果你的WebSocket服務(wù)也在同一個(gè)進(jìn)程里客戶端關(guān)閉后WebSocket服務(wù)也會(huì)停止頁(yè)面就斷連了。解決方案是把WebSocket服務(wù)和MCP Server拆成兩個(gè)獨(dú)立進(jìn)程MCP Server通過HTTP或Unix Socket向WebSocket服務(wù)查詢數(shù)據(jù)。6.4 安全邊界什么時(shí)候不該用這套方案這套方案的核心是把頁(yè)面運(yùn)行時(shí)數(shù)據(jù)暴露給本地服務(wù)。在開發(fā)環(huán)境沒問題但在生產(chǎn)環(huán)境絕對(duì)不能用。幾個(gè)必須遵守的原則生產(chǎn)環(huán)境構(gòu)建時(shí)通過環(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ī)連電腦確保在同一個(gè)可信局域網(wǎng)內(nèi)且調(diào)試完成后立即關(guān)閉服務(wù)敏感數(shù)據(jù)脫敏必須在頁(yè)面端完成不要依賴服務(wù)端處理我在實(shí)際項(xiàng)目中會(huì)把調(diào)試腳本的引入邏輯放在構(gòu)建工具的配置里通過process.env.NODE_ENV判斷生產(chǎn)構(gòu)建時(shí)直接不打包這個(gè)腳本。這樣即使有人手動(dòng)在URL里加參數(shù)也不會(huì)有任何調(diào)試代碼執(zhí)行。這套方案我用了大概三個(gè)月從最初的簡(jiǎn)單日志轉(zhuǎn)發(fā)到后來加上請(qǐng)求攔截、eval執(zhí)行、多頁(yè)面支持基本上覆蓋了H5調(diào)試的常見場(chǎng)景。最大的感受是AI輔助debug的前提是AI能拿到足夠的數(shù)據(jù)而MCP正好解決了數(shù)據(jù)通道的問題。vConsole負(fù)責(zé)采集WebSocket負(fù)責(zé)傳輸MCP負(fù)責(zé)暴露給AI三者各司其職組合起來就是一個(gè)完整的AI輔助調(diào)試閉環(huán)。