如何通过CDP或Playwright提取解包后的JavaScript文件

方法一：通过Chrome DevTools Protocol (CDP)直接获取解析后的源文件 #

CDP其实支持直接获取Chrome已经解析好的原始源文件，无需手动处理源映射，核心是利用Page域的资源查询接口：

• 先启用Page和Debugger域，等待页面加载完成
• 调用Page.getResourceTree遍历所有资源，筛选出源映射对应的原始源文件（通常URL前缀为webpack:///，类型为脚本）
• 调用Page.getResourceContent获取这些资源的内容

示例代码（使用Node.js的chrome-remote-interface库）：

const CDP = require('chrome-remote-interface');

async function fetchOriginalSources() {
  const client = await CDP();
  const { Page, Debugger } = client;

  await Promise.all([Page.enable(), Debugger.enable()]);
  await Page.navigate({ url: 'https://your-webpack-app.com' });
  await Page.loadEventFired();

  const { frameTree } = await Page.getResourceTree();
  const originalSourceUrls = [];

  // 递归筛选webpack原始源资源
  function traverse(frame) {
    frame.resources.forEach(resource => {
      if (resource.url.startsWith('webpack:///') && resource.type === 'Script') {
        originalSourceUrls.push(resource.url);
      }
    });
    frame.childFrames?.forEach(traverse);
  }
  traverse(frameTree.frame);

  // 获取并输出原始源内容
  for (const url of originalSourceUrls) {
    const { content, base64Encoded } = await Page.getResourceContent({ url });
    const source = base64Encoded ? Buffer.from(content, 'base64').toString() : content;
    console.log(`--- ${url} ---`);
    console.log(source);
    // 此处可将内容写入本地文件
  }

  await client.close();
}

fetchOriginalSources().catch(console.error);

方法二：用Playwright简化流程 #

Playwright封装了CDP能力，可通过拦截请求直接捕获原始源：

const { chromium } = require('playwright');

async function fetchOriginalSourcesWithPlaywright() {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  const originalSources = new Map();

  // 拦截并收集原始源请求
  await page.route('**/*', async (route) => {
    await route.continue();
    const res = await route.response();
    if (res?.url().startsWith('webpack:///') && res.headers()['content-type']?.includes('javascript')) {
      originalSources.set(res.url(), await res.text());
    }
  });

  await page.goto('https://your-webpack-app.com', { waitUntil: 'networkidle' });

  // 输出或保存结果
  for (const [url, content] of originalSources.entries()) {
    console.log(`--- ${url} ---`);
    console.log(content);
  }

  await browser.close();
}

fetchOriginalSourcesWithPlaywright().catch(console.error);

关键说明 #

Chrome已经自动完成了源映射的解析和原始源的加载，CDP/Playwright只是暴露了这些预处理后的资源，不需要手动下载、解析源映射文件——除非网站禁用了源映射加载（比如生产环境未部署源映射），这种情况下才需要手动处理（前提是能获取到源映射文件）。

注意事项 #

• 部分网站可能通过CSP或打包配置限制源映射加载，此时上述方法会失效
• 原始源的URL前缀可能因打包工具配置不同变化，需根据实际场景调整筛选规则

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