木偶查找数据使用情况

在Puppeteer文档中，有一个示例仅使用page.coverage方法来计算JS和CSS的大小。我已经对其进行了修改，并添加了将结果保存到CSV文件的选项。

https://pptr.dev/#?product=Puppeteer&version=v1.20.0&show=api-class-coverage

const puppeteer = require('puppeteer')
const fs = require('fs-extra')

const filePath = 'datausage.csv'

;(async () => {

    const browser = await puppeteer.launch()
    const [page] = await browser.pages()

    // Enable both JavaScript and CSS coverage
    await Promise.all([
        page.coverage.startJSCoverage(),
        page.coverage.startCSSCoverage()
    ])
    // Navigate to page
    await page.goto('https://www.google.com')
    // Disable both JavaScript and CSS coverage
    const [jsCoverage, cssCoverage] = await Promise.all([
        page.coverage.stopJSCoverage(),
        page.coverage.stopCSSCoverage(),
    ])
    let totalBytes = 0
    let usedBytes = 0
    const coverage = [...jsCoverage, ...cssCoverage]
    for (const entry of coverage) {
        totalBytes += entry.text.length
        for (const range of entry.ranges) {
            usedBytes += range.end - range.start - 1
        }
    }

    if ( !await fs.pathExists(filePath) ) {
        await fs.writeFile(filePath, 'totalBytes\n')
    }

    await fs.appendFile(filePath, `${totalBytes}\n`)
    console.log(`Total data used: ${totalBytes/1048576} MBytes`)
    // console.log(`Bytes used: ${usedBytes / totalBytes * 100}%`)

    await browser.close()

})()

但是，如果您需要更多详细信息，例如图像，媒体，文档，提取，字体，xhr；您可以在content-length每次操纵人偶运行并使用任何资源时使用响应标头。我创建了以下代码来为您提供示例：

const puppeteer = require('puppeteer')
const fs = require('fs-extra')

const filePath = 'datausage.csv'

;(async () => {

    const browser = await puppeteer.launch({headless: false})
    const [page] = await browser.pages()

    // Set Request Interception to detect images, fonts, media, and others
    page.setRequestInterception(true)

    let totalBytes = 0

    page.on('request', request => {
        request.continue()
    })

    page.on('response', response => {
        let headers = response.headers()
        if ( typeof headers['content-length'] !== 'undefined' ){
            var length = parseInt( headers['content-length'] )
            totalBytes+= length
        }
    })

    // Navigate to page
    await page.goto('https://www.google.com', {waitUntil: 'networkidle0', timeout: 0})

    if ( !await fs.pathExists(filePath) ) {
        await fs.writeFile(filePath, 'totalBytes\n')
    }

    await fs.appendFile(filePath, `${totalBytes}\n`)
    console.log(`Total data used: ${totalBytes/1048576} MBytes`)

    await browser.close()

})()

PS：我不知道这是否有效，但请尝试一下以证明它与实际数据使用情况相同。如果发现正确，请选择它作为正确答案。