Puppeteer 网络日志记录指南通过 request 与 response 事件捕获页面全量网络流量【免费下载链接】puppeteerJavaScript API for Chrome and Firefox项目地址: https://gitcode.com/GitHub_Trending/puppeteer1/puppeteer本篇技术指南聚焦于 Puppeteer面向 Chrome 与 Firefox 的 JavaScript API中默认开启的网络事件监听机制讲解如何借助page.on(request)与page.on(response)事件实现网络请求日志记录、失败请求追踪与响应体分析。读完本文你将掌握事件对象HTTPRequest/HTTPResponse的核心取数方法能够快速构建出可打印 URL、方法、状态码、耗时甚至响应体的网络诊断工具。开箱即用的网络事件监听Puppeteer 默认会监听页面上的全部网络请求与响应并不需要任何额外配置或手动开启。这一点由 CDP 层 Page 实现 中的事件转发代码印证CDP 的NetworkManager每捕获到一个请求或响应就会立刻以PageEvent.Request/PageEvent.Response等事件重新发射到Page实例上。最基础的网络日志代码如下const page await browser.newPage(); page.on(request, request { console.log(request.url()); }); page.on(response, response { console.log(response.url()); });浏览器每一次发起资源请求主文档、脚本、图片、XHR/fetch、字体、WebSocket 握手等都会触发request事件服务端返回后则触发response事件。将两个监听器组合使用即可得到请求 → 响应的完整流水日志。网络事件的完整生命周期在实际项目中仅记录 URL 往往不够。page上共有 5 个与网络强相关的事件它们共同描述了请求从发出到结束的完整生命周期事件名称触发时机回调对象request页面发出一个请求时HTTPRequestrequestfinished响应体下载完成、请求正常结束时HTTPRequestrequestfailed请求失败如超时、连接中断时HTTPRequestrequestservedfromcache请求命中缓存时HTTPRequestresponse收到响应时HTTPResponse在 CDP 实现中这些事件集中由 packages/puppeteer-core/src/cdp/Page.ts#L221-L238 转发networkManagerEmitter.on(NetworkManagerEvent.Request, request { this.emit(PageEvent.Request, request); }); networkManagerEmitter.on(NetworkManagerEvent.RequestServedFromCache, request { this.emit(PageEvent.RequestServedFromCache, request!); }); networkManagerEmitter.on(NetworkManagerEvent.Response, response { this.emit(PageEvent.Response, response); }); networkManagerEmitter.on(NetworkManagerEvent.RequestFailed, request { this.emit(PageEvent.RequestFailed, request); }); networkManagerEmitter.on(NetworkManagerEvent.RequestFinished, request { this.emit(PageEvent.RequestFinished, request); });对于基于 WebDriver BiDi 的 Firefox 支持bidi/Frame.ts 与 bidi/HTTPRequest.ts 中同样实现了PageEvent.Request/RequestFinished/RequestFailed的发射逻辑——也就是说无论驱动 Chrome 还是 Firefox网络日志的监听 API 是一致的。需要特别留意的一个语义差异在 HTTPRequest 文档 与PageEvent枚举说明中均有明确记载HTTP 错误响应404、503 等在 HTTP 层面属于成功响应请求最终会以requestfinished收尾而不会触发requestfailed只有请求真的失败了超时、DNS 解析失败、连接被重置等才会触发requestfailed若请求收到重定向响应原请求会以requestfinished正常结束并随后对重定向后的新 URL 重新发起一个新请求。用 HTTPRequest 记录更丰富的请求信息request事件的回调参数是HTTPRequest抽象类实例构造函数为 internal第三方代码只能通过事件获取。记录日志时可调用的方法包括方法返回内容url()请求的 URLmethod()HTTP 方法GET、POST等headers()请求头对象所有头名称均为小写resourceType()渲染引擎感知的资源类型如document、script、xhr、image、font等frame()发起该请求的 Frame错误页导航时为nullpostData()POST 请求体已废弃推荐改用fetchPostData()fetchPostData()从浏览器端异步获取完整 POST 数据hasPostData()请求是否带有 POST 数据redirectChain()获取同一重定向链上的历史请求数组response()匹配的HTTPResponse尚未收到响应时为nullinitiator()请求的发起者信息一个可投入实际使用的控制台版抓包示例const page await browser.newPage(); page.on(request, request { // favicon 之类的噪音可自行过滤 console.log(➡️, request.method(), request.url(), request.resourceType()); }); page.on(requestfailed, request { console.error(❌, request.url(), request.failure()?.errorText); }); page.on(requestfinished, request { console.log(✅, request.method(), request.url(), request.response()?.status()); }); page.on(response, response { console.log(⬅️, response.status(), response.url()); });关于 POST 数据仓库测试 test/src/cdp/network.test.ts#L16-L75 揭示了一个容易被忽视的细节当请求体是Blob时postData()可能返回undefined但hasPostData()为true此时必须调用异步的fetchPostData()才能取到{foo:bar}这样的真实内容。因此采集日志时建议优先使用fetchPostData()。404/503 与 requestfailed 的坑结合requestfinished与requestfailed设计告警时务必记住状态码为 4xx/5xx 的响应不会触发requestfailed。要统计坏请求更可靠的方式是在response事件里结合状态码判断page.on(response, response { const status response.status(); if (status 400) { console.warn(HTTP ${status}, response.url()); } });用 HTTPResponse 分析响应内容response事件的回调参数是HTTPResponse抽象类实例支持读取响应头、状态码与响应体方法返回内容url()响应 URLstatus()/statusText()HTTP 状态码与状态文本ok()状态码是否在 200–299 区间headers()响应头对象头名称小写Set-Cookie多值时以\n分隔fromCache()是否命中浏览器磁盘/内存缓存fromServiceWorker()是否由 Service Worker 返回request()与本次响应匹配的HTTPRequestframe()发起响应对应请求的 FrameremoteAddress()远端服务器 IP 与端口timing()响应相关的计时信息securityDetails()安全连接下的证书细节非 HTTPS 为nulltext()/json()/buffer()响应体文本utf8/ JSON / Buffercontent()响应体 Buffer与buffer()类似结合text()/json()可以做带响应体的请求日志const page await browser.newPage(); page.on(response, async response { const url response.url(); if (!url.includes(/api/)) { return; // 只记录 API 请求避免大体积资源拖慢日志 } let body ; try { body await response.text(); } catch { body (非文本响应); } console.log([${response.status()}] ${response.request().method()} ${url}); console.log(body.slice(0, 500)); });需要注意text()/json()是异步方法且只对 utf8 文本响应安全遇到非 utf8 或体积过大的响应调用可能抛出异常建议用 try/catch 包裹并配合截断输出。日志噪音治理与进阶过滤网络事件默认面向页面所有资源包括 favicon、统计脚本、广告 SDK 等。日志量过大时可结合事件对象属性做主动过滤page.on(request, request { const url request.url(); const type request.resourceType(); const ignore url.startsWith(data:) || type image || type font; if (!ignore) { console.log(request.method(), url); } });在此基础上还可以进一步演进用page.waitForResponse/page.waitForRequest精准等待某个网络请求完成后再继续流程实现先等到关键接口返回再断言页面状态的测试模式若目标是拦截并改写请求例如屏蔽广告、mock 接口、注入响应需要先调用page.setRequestInterception(true)之后在request事件里使用HTTPRequest.continue()/respond()/abort()相关方法详见 HTTPRequest 与 Page.setRequestInterception 文档注意request事件中的HTTPRequest是只读对象监听日志时不要尝试修改它。实现原理小结整套网络日志能力的内部分工可以概括为两条链路CDPChrome/ChromiumCDP 的NetworkManager监听浏览器侧网络事件再由 cdp/Page.ts 统一转发为PageEvent系列并发射到page上WebDriver BiDiFirefox由 bidi/HTTPRequest.ts 与 bidi/HTTPResponse.ts 在请求生命周期节点上发射对应事件。对外这些事件由PageEvent枚举与PageEvents接口统一定义见 docs/api/puppeteer.pageevent.md回调负载则分别是 HTTPRequest 与 HTTPResponse。理解这套默认监听 → 事件转发 → 实例取数的模型后你便可以在任何 Puppeteer 脚本或测试框架中用同样的模式快速搭建网络监控、性能分析与故障排查工具。【免费下载链接】puppeteerJavaScript API for Chrome and Firefox项目地址: https://gitcode.com/GitHub_Trending/puppeteer1/puppeteer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
`)
