如何通过Chrome扩展获取当前页面及iframe的控制台日志，CDP报错如何解决？

错误根因 #

• Console.ConsoleMessage不是Chrome调试协议（CDP）的可调用命令，它是CDP主动触发的事件，不能通过chrome.debugger.sendCommand调用，这是报错的直接原因
• 现有代码异步逻辑顺序错误，chrome.debugger.attach是异步接口，未等附加成功就执行后续命令，可能触发未附加调试器的异常
• 要捕获iframe内的日志，还需要额外开启Runtime域的监听，匹配iframe的独立执行上下文

前置配置 #

首先确认manifest.json已添加必要权限：

{
  "permissions": ["debugger", "activeTab"],
  "host_permissions": ["<all_urls>"]
}

修复后代码 #

chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
  const targetTabId = tabs[0].id;
  console.log("当前激活标签页ID：", targetTabId);

  chrome.debugger.attach({ tabId: targetTabId }, "1.1", () => {
    if (chrome.runtime.lastError) {
      console.log("调试器附加失败：", chrome.runtime.lastError.message);
      return;
    }
    console.log("调试器附加成功");

    // 开启Console域监听
    chrome.debugger.sendCommand({ tabId: targetTabId }, "Console.enable", () => {
      if (chrome.runtime.lastError) {
        console.log("开启Console域失败：", chrome.runtime.lastError.message);
        return;
      }
      console.log("Console域监听已开启");
    });

    // 开启Runtime域监听，用于捕获iframe内的日志
    chrome.debugger.sendCommand({ tabId: targetTabId }, "Runtime.enable", () => {
      if (chrome.runtime.lastError) {
        console.log("开启Runtime域失败：", chrome.runtime.lastError.message);
        return;
      }
      console.log("Runtime域监听已开启，可捕获iframe日志");
    });

    // 监听CDP推送的事件
    chrome.debugger.onEvent.addListener((debuggee, method, params) => {
      // 只处理当前标签页的控制台消息事件
      // 部分版本CDP的事件名为Console.ConsoleMessage，收不到日志可替换该字段测试
      if (debuggee.tabId !== targetTabId || method !== "Console.messageAdded") {
        return;
      }
      // 输出捕获到的日志内容、级别、来源等信息
      const logInfo = params.message;
      console.log(`[${logInfo.level}] [来源：${logInfo.source}]`, logInfo.text, logInfo.args);
    });
  });
});

注意事项 #

• Chrome出于安全考虑，调试器附加到页面后，页面顶部会显示"正在调试此标签页"的提示条，该提示无法通过代码隐藏
• 调试完成后可调用chrome.debugger.detach主动解除附加，避免影响用户正常使用

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