page.waitForResponse 执行环境：页面还是 Node.js？

直击答案

Puppeteer 中的 page.waitForResponse 方法虽然监听的是页面中的网络请求，但是它的执行上下文环境是 Node.js 环境。

底层原理剖析

从 Node.js 层设置 page.waitForResponse 监听开始，到最后获取到符合条件的 HttpResponse 经历了以下几个流程：

puppeteer 在 launch 浏览器时即创建了与 Chromium 之间的 WebSocket 通信通道；
当 Node.js 层设置 page.waitForResponse() 方法时，即从 Puppeteer 通过 WebSocket 向 Chromium 发送一条 Network.enable 消息以启用网络监控，并返回 等待获取到合适 HttpResponse 的 Promise;
- Network.enable 是 CDP (Chrome DevTools Protocol) 中的一个命令；
- 实际上，为了避免不必要的 CDP 命令调用，并不是每次设置 page.waitForResponse() 时都会发送 Network.enable 消息，而是先由 Puppeteer 确认是否已经开启网络监控，只有在确认未开启时，才会发送消息，否则就不发送了；
当 Chromium 内核接收到原始的网络数据（包括 HTTP 状态码、头部、响应体等）后，通过 WebSocket 向 Puppeteer 发送"携带了原始网络数据的 Network.responseReceived CDP 事件"；
接下去，Puppeteer 将接收到的网络原始数据封装成一个统一的、易于使用的 HttpResponse 对象，这个对象包含了像 status()、url()、ok() 等方便开发者使用的方法；
然后，再由 Puppeteer 将这个对象作为参数，传递给在 Node.js 层运行的 predicate 函数进行判断。当某一个 HttpResponse 对象通过了 waitForResponse 的 predicate 函数的判断时，page.waitForResponse 的 Promise 就会被 resolve，Puppeteer 就将符合条件的这个 HttpResponse 对象直接返回给 Nodejs 层。同时，一旦 Promise 被 resolve，Puppeteer 会自动停止监听相关的网络事件，并清理内部的消息处理程序 (handler)，以避免资源泄露或不必要的监听。
Nodejs 层拿到 HttpResponse 对象就可以进行后续操作；

综上流程所述，page.waitForResponse 的执行上下文环境是在 Node.js 层，而未涉及到页面环境。如果以上文字流程难以理解的，请结合下图慢慢理解哦～

markdown 复制代码

Network.enable 是 CDP (Chrome DevTools Protocol) 中的一个命令，它的主要作用是：

1. 启用网络域监控：告诉 Chromium 开始收集和发送网络相关的所有事件；
2. 开启网络流量追踪：激活浏览器内部的网络监控功能；

写在最后

又是深挖细微技术点的一篇文章，看似不起眼，但我始终坚信"细节决定成败"。

另外，我要为看到这里的你鼓掌，让我们：今日迈出一小步，明日也迈出一小步，最终，每一步，都算数。