javascript - puppeteer 导航指标:每个请求/响应的开始和结束时间
问题描述
我正在使用这个快速启动代码,允许在 puppeteer 无头的情况下进入页面。
const puppeteer = require('puppeteer');
(async () => {
const args = [
"--disable-setuid-sandbox",
"--no-sandbox"
];
const options = {
args,
headless: true,
ignoreHTTPSErrors: true,
};
const browser = await puppeteer.launch(options);
const page = await browser.newPage();
await page.goto("https://www.example.com/", {
waitUntil: 'networkidle0',
timeout: 30000
});
await page.close();
await browser.close();
})()
我想了解有关导航的更多信息:
我能得到每个请求和每个响应的开始和结束时间吗?
puppeteer 中是否有允许获取这些指标的功能?
例如第一个请求的开始时间和第一个响应的结束时间?每个请求和每个响应的最终...
谢谢
解决方案
使用PerformanceObserver,您可以通过将条目类型指定为“资源”来获取每个请求的时间。将每个条目添加到对象window
,然后使用 puppeteer 对其进行评估。
const puppeteer = require('puppeteer');
const perfObsRunner = () => {
window.resourceList = [];
new PerformanceObserver((list) => {
list.getEntries().forEach((item) => {
window.resourceList = [...window.resourceList, item.toJSON()]
})
}).observe({type: 'resource', buffered: true});
}
const getResourceTiming = async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.evaluateOnNewDocument(perfObsRunner);
await page.goto("https://pptr.dev/", { waitUntil: 'load', timeout: 30000 });
const resource = await page.evaluate(() => ({ resource: window.resourceList }))
await page.close();
await browser.close();
}
从响应中您可以获取有关请求的信息,例如:startTime、duration、responseStart、responseEnd。 示例响应:
resource = [
{
"name": "https://pptr.dev/style.css",
"entryType": "resource",
"startTime": 55.9099999954924,
"duration": 0,
"initiatorType": "link",
"nextHopProtocol": "h2",
"workerStart": 0,
"redirectStart": 0,
"redirectEnd": 0,
"fetchStart": 55.9099999954924,
"domainLookupStart": 55.9099999954924,
"domainLookupEnd": 55.9099999954924,
"connectStart": 55.9099999954924,
"connectEnd": 55.9099999954924,
"secureConnectionStart": 55.9099999954924,
"requestStart": 0,
"responseStart": 0,
"responseEnd": 55.9099999954924,
"transferSize": 0,
"encodedBodySize": 3704,
"decodedBodySize": 14326,
"serverTiming": [],
"workerTiming": []
},
{
"name": "https://pptr.dev/index.js",
"entryType": "resource",
"startTime": 56.08000000938773,
"duration": 0,
"initiatorType": "script",
"nextHopProtocol": "h2",
"workerStart": 0,
"redirectStart": 0,
"redirectEnd": 0,
"fetchStart": 56.08000000938773,
"domainLookupStart": 56.08000000938773,
"domainLookupEnd": 56.08000000938773,
"connectStart": 56.08000000938773,
"connectEnd": 56.08000000938773,
"secureConnectionStart": 56.08000000938773,
"requestStart": 0,
"responseStart": 0,
"responseEnd": 56.08000000938773,
"transferSize": 0,
"encodedBodySize": 52861,
"decodedBodySize": 149772,
"serverTiming": [],
"workerTiming": []
},
{
"name": "https://raw.githubusercontent.com/GoogleChrome/puppeteer/main/README.md",
"entryType": "resource",
"startTime": 98.98000000976026,
"duration": 1.6949999844655395,
"initiatorType": "fetch",
"nextHopProtocol": "h2",
"workerStart": 0,
"redirectStart": 0,
"redirectEnd": 0,
"fetchStart": 98.98000000976026,
"domainLookupStart": 0,
"domainLookupEnd": 0,
"connectStart": 0,
"connectEnd": 0,
"secureConnectionStart": 0,
"requestStart": 0,
"responseStart": 0,
"responseEnd": 100.6749999942258,
"transferSize": 0,
"encodedBodySize": 0,
"decodedBodySize": 0,
"serverTiming": [],
"workerTiming": []
},
]
推荐阅读
- python - 使用 Python 初始化和自定义 QML 组件
- firebase-authentication - AngularFire:如何仅在经过身份验证后访问 Firestore
- keras - 标记列中的单词并创建嵌入向量
- nlp - 词向量空间中的“线性子结构”是什么意思?
- angular - Angular Material Table 中仅显示 3 列
- python - python selenium - 我如何才能准确地找出警报发生的时间?
- xquery - MLCP 能否根据条件读取输入
- c++ - 如何在类的所有实例之间不共享的类方法中声明静态变量?
- amazon-ec2 - 如何解决错误Service role EMR_DefaultRole has enough EC2 permissions
- kubernetes - 如何从容器访问所有物理主机网络接口?