要监控chrome devtools与浏览器内核间原始通信,需启用protocol monitor:通过cmd/ctrl+shift+p输入“show protocol monitor”调出面板,它自动捕获cdp层json-rpc消息(request/response/event),支持按method筛选、手动执行命令及导出结构化json日志。

要监控 Chrome 开发者工具(DevTools)与浏览器内核之间的原始通讯指令,核心是启用并使用 Protocol Monitor(协议监视器)。它直接捕获 Chrome DevTools Protocol(CDP)层的 JSON-RPC 消息流,包括所有 Request、Response 和 Event,无需依赖页面上下文,也不需要写代码或启动远程调试端口——只要 DevTools 打开,录制就自动运行。
启用 Protocol Monitor 面板
该功能默认隐藏,需通过实验设置或命令菜单开启:
- 在任意已打开 DevTools 的页面中,按 Ctrl+Shift+P(Windows/Linux)或 Cmd+Shift+P(macOS)调出命令菜单
- 输入 Show Protocol monitor,回车确认
- 面板会立即出现在 DevTools 底部(或新标签页),录制自动开始
注意:部分旧版本需先在 chrome://flags 中启用 Developer Tools Experiments,再进入 DevTools 设置 → Experiments → 勾选 Protocol Monitor,重启 DevTools 后才可在 More Tools 菜单中看到入口。但当前稳定版(2026 年)推荐优先用命令方式,更直接可靠。
识别和聚焦关键 CDP 指令
面板以表格形式展示每条消息,字段含时间戳、Method、Type(Request/Response/Event)、Session ID 和参数摘要。快速定位原始指令的方法有:
- 点击 Method 列头排序,快速找到高频指令如
Network.requestWillBeSent、DOM.documentUpdated、Page.loadEventFired - 右键某行的 Method 值,选择 Filter by this method,只保留该指令的全部交互(含请求、响应、事件)
- 顶部切换 Requests / Responses / Events 标签页,分别查看发起侧、返回侧或异步通知
发送和验证原始 CDP 命令
协议监视器底部提供命令输入框,可手动触发 CDP 指令,实时观察浏览器反馈:
- 无参命令直接输入,例如:
Page.captureScreenshot,回车即执行 - 带参命令需用 JSON 格式,例如:
{"cmd":"Emulation.setDeviceMetricsOverride","args":{"width":375,"height":667,"deviceScaleFactor":2,"mobile":true}} - 右侧下拉菜单可指定目标会话(如主页面、iframe 或扩展后台页),避免误发到错误上下文
导出与持久化分析
为做离线比对或团队协作,可将原始通信数据保存为结构化日志:
- 点击顶部操作栏的 清空 图标,清除当前记录(适合重置后重新抓取特定操作流)
- 点击 下载 图标,生成标准 JSON 文件,每条记录含 id、method、params、result、timestamp 等完整字段
- 暂停录制按钮可用于临时冻结捕获,比如在复杂操作前暂停,执行后再恢复,避免干扰信息混入











