Chrome DevTools MCP 消耗 Token 过快问题分析与优化方案

1次阅读

共计 1393 个字符，预计需要花费 4 分钟才能阅读完成。

Chrome DevTools 的移动端调试功能（Mobile Content Proxy，简称 MCP）是开发者调试移动网页的利器，但很多开发者都遇到过 Token 消耗过快的问题。MCP 通过代理服务器中转移动设备与开发机之间的通信，每次请求都会消耗 Token。当 Token 耗尽时，调试会话会被强制中断，严重影响开发效率。

MCP 工作原理 ：MCP 代理会将移动设备的所有网络请求转发到开发机，同时将开发机的修改实时同步到移动设备。这种双向通信需要消耗 Token。
痛点表现 ：在调试复杂页面时，Token 可能在几分钟内耗尽，迫使开发者频繁重启调试会话。

经过实际测试和分析，我们发现 Token 快速消耗主要由以下几个原因导致：

高频请求 ：现代网页通常加载大量资源（如 JS、CSS、图片），每个资源请求都会消耗 Token。
长轮询或 WebSocket：实时通信技术会产生持续的连接，持续消耗 Token。
代理配置不合理 ：默认配置可能代理了不必要的请求（如第三方统计、广告等）。
缺乏缓存 ：相同的资源每次请求都会消耗 Token，没有利用缓存机制。

通过自定义代理规则，可以过滤掉不必要的请求：

// 在 DevTools 的 Overrides 中添加代理过滤规则
module.exports = {
  proxy: {
    filters: [
      '.*.google-analytics.com/.*', // 过滤谷歌统计
      '.*.doubleclick.net/.*'      // 过滤广告请求
    ]
  }
};

对于实时性要求不高的数据，可以适当降低轮询频率：

// 优化前：每秒轮询一次
setInterval(fetchData, 1000);

// 优化后：每 5 秒轮询一次
setInterval(fetchData, 5000);

对于静态资源，可以使用 Service Worker 实现本地缓存：

// 注册 Service Worker
if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/sw.js').then(registration => {console.log('ServiceWorker 注册成功');
  });
}

// sw.js 文件内容
self.addEventListener('fetch', event => {
  event.respondWith(caches.match(event.request).then(response => {return response || fetch(event.request);
    })
  );
});

我们在一个电商网站项目上测试了优化效果：