需启用chrome devtools的协议监视器以观察cdp通信：一、用快捷键调出命令菜单并输入“show protocol monitor”开启；二、通过排序、筛选和标签页聚焦查看消息；三、可暂停、清空或导出json日志；四、支持在面板底部发送原始cdp命令验证交互；五、亦可通过websocket手动调试，需启动远程调试端口并连接websocketdebuggerurl。
如果您希望深入观察 Chrome 浏览器与 DevTools 之间的底层通信过程，以排查自动化脚本异常、验证 CDP 命令执行效果或分析页面行为链路，则需启用并使用“协议监视器”（Protocol Monitor）功能。以下是具体操作步骤：
一、启用协议监视器面板
协议监视器是 Chrome DevTools 中一个隐藏但功能强大的调试面板，用于实时捕获和展示所有 Chrome DevTools Protocol（CDP）请求与响应消息。它不依赖于页面上下文，只要 DevTools 打开且录制开启，即可持续记录跨页面、跨标签页的 CDP 流量。
1、在已打开 DevTools 的任意标签页中，按快捷键：macOS：Command + Shift + P；Windows/Linux/ChromeOS：Ctrl + Shift + P，调出命令菜单。
2、在命令输入框中键入 Show Protocol monitor，从下拉列表中选择该项并回车。
3、Protocol Monitor 面板将出现在 DevTools 底部或新标签页中，此时录制自动开始，无需额外触发。
二、查看与筛选 CDP 消息流
协议监视器默认以表格形式展示每条 CDP 消息，包含时间戳、方法名（Method）、类型（Request/Response/Event）、会话 ID 及简要参数摘要。通过列排序与右键上下文操作，可快速定位关键交互路径。
1、点击表头 "Method" 列可按字母顺序排序，便于查找如 Network.requestWillBeSent 或 DOM.documentUpdated 等高频方法。
2、右键点击某一行的 Method 值，在弹出菜单中选择 Filter by this method，即可仅显示该方法的所有消息。
3、点击顶部标签页中的 "Requests" 或 "Responses"，分别聚焦请求发起侧或浏览器响应侧的数据。
三、清除与导出历史记录
当协议监视器累积大量消息导致界面卡顿或需保留特定时段流量用于离线分析时，可主动清理缓存或导出结构化数据。导出文件为标准 JSON 格式，兼容各类日志分析工具及自定义解析脚本。
1、点击面板顶部操作栏左侧的 圆形停止图标 暂停录制（暂停后仍可查看已有记录）。
2、点击操作栏中的 垃圾桶图标 清除当前所有已记录的 CDP 消息。
3、点击操作栏右侧的 下载图标（向下箭头），将全部录制内容保存为 protocol-monitor-export.json 文件。
四、发送原始 CDP 命令进行交互验证
协议监视器不仅可观测，还支持直接向当前目标页发送任意 CDP 命令，适用于快速验证命令语法、调试 DOM 修改逻辑或触发截图等操作，无需编写外部脚本。
1、在面板底部输入框中输入无参命令，例如：Page.captureScreenshot，然后按 Enter 键执行。
2、若命令需参数，必须使用完整 JSON-RPC 格式，例如：{"cmd":"Emulation.setDeviceMetricsOverride","args":{"width":375,"height":667,"deviceScaleFactor":2,"mobile":true}}，再按 Enter。
3、确认右下角下拉菜单中选定的目标为当前活动页面（通常显示为 page://...），避免命令误发至后台标签页或 Service Worker 上下文。
五、结合 WebSocket 连接手动调试
协议监视器本身基于 Chrome 的 CDP WebSocket 通道运行，其底层连接地址可通过 DevTools 启动时的调试端口获取。此方式适用于需要绕过 UI 限制、集成到外部监控系统或复现特定握手异常的场景。
1、确保 Chrome 以远程调试模式启动：chrome --remote-debugging-port=9222。
2、访问 http://localhost:9222/json 获取当前打开页面的 WebSocket 调试地址（字段 webSocketDebuggerUrl）。
3、使用任意 WebSocket 客户端（如 wscat）连接该地址，并手动发送 JSON-RPC 请求，例如：{"id":1,"method":"Page.navigate","params":{"url":"https://example.com"}}。
