如何获取Chrome DevTools请求发起者调用栈？代码实现遇问题求助

1. 如何在Chrome DevTools中查看请求发起者的调用栈？ #

• 打开Chrome DevTools（快捷键F12，或右键页面选择「检查」）
• 切换到Network面板，刷新页面触发目标请求
• 找到需要分析的请求并点击进入详情页
• 在右侧面板切换到Initiator标签，即可查看该请求的完整调用栈，包含每个调用的文件路径、行号和函数名称，点击任意栈帧可直接跳转到Sources面板对应的代码位置。

2. 能否通过代码获取该调用栈？ #

可以通过Chrome远程调试协议（CDP）工具（比如你使用的chrome-remote-interface）获取，但你当前的代码存在访问路径错误：params.initiator.stack?.parent仅指向父栈帧的引用，并非完整调用栈，且顶层栈帧的parent本身就是null，这就是你看到空值的原因。

完整的调用栈数据存储在params.initiator.stack.callFrames数组中，每个数组元素对应一个栈帧，包含函数名、文件路径、行号等关键信息。

修改后的示例代码 #

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

(async function () {
  let client;
  try {
    client = await CDP();

    const { Page, Network } = client;

    await Promise.all([Page.enable(), Network.enable()]);

    Network.requestWillBeSent((params) => {
      console.log("请求URL:", params.request.url);
      // 检查是否存在可用调用栈
      if (params.initiator?.stack?.callFrames) {
        console.log("请求调用栈:");
        params.initiator.stack.callFrames.forEach((frame, index) => {
          console.log(`${index + 1}. ${frame.functionName} (${frame.url}:${frame.lineNumber}:${frame.columnNumber})`);
        });
      } else {
        console.log("该请求无可用调用栈（可能为浏览器自动发起的请求）");
      }
    });

    await Page.navigate({
      url: "https://example.com", // 替换为你要测试的目标URL
    });
  } catch (err) {
    console.error(err);
  } finally {
    if (client) {
      await client.close();
    }
  }
})();

注意事项 #

• 启动Chrome时需开启远程调试端口：执行chrome --remote-debugging-port=9222（需确保Chrome未在后台运行，Windows/macOS/Linux通用）
• 并非所有请求都有调用栈：比如浏览器自动发起的favicon.ico请求、重定向请求等，可能无法获取到JS调用栈
• 确保依赖已正确安装：执行npm install chrome-remote-interface完成工具安装

调用栈示例截图：

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