如何通过Puppeteer获取JS、CSS文件及其发起者（类似Network面板）

I totally get it—using Puppeteer's trace option can feel frustrating when you need clear initiator info for your loaded resources. The trace output doesn't explicitly surface that data, but there's a much more straightforward way using request event listeners. Here's how to do it:

Step-by-Step Solution #

We'll use Puppeteer's requestfinished event to capture every successfully loaded resource, filter for JS and CSS files, and extract their initiator details directly from the request object.

const puppeteer = require('puppeteer');

(async () => {
  // Launch browser (set headless: true for production use)
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  // Array to store our collected resource data
  const loadedResources = [];

  // Listen for finished requests to capture only successful resources
  page.on('requestfinished', (request) => {
    const resourceType = request.resourceType();
    
    // Filter to only track JavaScript and CSS files
    if (['script', 'stylesheet'].includes(resourceType)) {
      const initiator = request.initiator();
      loadedResources.push({
        resourceUrl: request.url(),
        resourceType: resourceType.toUpperCase(),
        initiatorType: initiator.type, // e.g., "script", "parser", "browser"
        initiatorUrl: initiator.url || 'No initiator URL available'
      });
    }
  });

  // Navigate to your target URL, wait for network activity to settle
  await page.goto('https://your-target-url-here.com', { waitUntil: 'networkidle2' });

  // Print out the collected resource details
  console.log('Loaded JS & CSS Resources with Initiators:');
  loadedResources.forEach((resource, idx) => {
    console.log(`\n${idx + 1}. Resource URL: ${resource.resourceUrl}`);
    console.log(`   Type: ${resource.resourceType}`);
    console.log(`   Initiator Type: ${resource.initiatorType}`);
    console.log(`   Initiator URL: ${resource.initiatorUrl}`);
  });

  await browser.close();
})();

Key Details Explained #

• requestfinished Event: This triggers only when a request completes successfully, so we don't waste time tracking failed or aborted resources.
• request.initiator(): This method returns an object with two critical properties:
  • type: What initiated the request (e.g., a <script> tag, the HTML parser, or a browser-native action)
  • url: The URL of the parent resource that triggered this request (like a script file or the main HTML page)
• waitUntil: 'networkidle2': Ensures we wait until there are no more than 2 active network connections for 500ms, so we capture most late-loaded resources. Use networkidle0 if you need absolute completeness (waits for zero active connections).

Quick Notes #

• Some requests (like browser-initiated system requests) might not have an initiator URL—we handle that with a fallback message.
• If you want to track all resource types (images, fonts, etc.), just remove the if filter targeting script and stylesheet.

内容的提问来源于stack exchange，提问作者Devaraj Kommineni