如何通过Chrome DevTools Protocol捕获控制台警告与详细信息？

问题描述 #

我尝试使用Chrome DevTools Protocol，借助Log和Runtime域来捕获控制台信息，编写了如下代码：

// tabId is current tab id
chrome.debugger.attach({ tabId }, '1.3', onDebuggerAttach.bind(null, tabId));

//enable Log and Runtime domains
const onDebuggerAttach = async tabId => {
  await chrome.debugger.sendCommand({ tabId: tabId}, 'Log.enable');
  await chrome.debugger.sendCommand({ tabId: tabId}, 'Runtime.enable');
  chrome.debugger.onEvent.addListener(onDebugEvent);
};

//get console messages
const onDebugEvent = (debuggeeId = {}, message, params = {}) => {
  switch (message) {
    case 'Log.entryAdded':
    case 'Runtime.consoleAPICalled':
      handleConsoleMessage(params);
      break;
    default:
      break;
  }
};

但目前无法捕获任何verbose信息，且仅能获取部分警告信息，请问我哪里操作有误？

问题原因及修复方案 #

1. Log域默认不捕获Verbose级别日志 #

Log.enable命令默认仅捕获info、warning、error级别的日志，要获取Verbose日志，必须在启用时指定maxLevel参数为verbose：

await chrome.debugger.sendCommand({ tabId: tabId }, 'Log.enable', {
  maxLevel: 'verbose'
});

2. 明确Log与Runtime域的日志覆盖范围 #

• Runtime.consoleAPICalled仅捕获通过console.log、console.warn等API主动输出的日志，不包含浏览器自身生成的系统日志（比如网络请求警告、页面加载错误）。
• Log.entryAdded可捕获浏览器系统日志，但需确保级别设置正确，否则会遗漏对应级别的警告信息。

3. 调整事件监听时机 #

当前代码是启用域后才添加监听器，可能漏掉启用过程中产生的早期日志。建议先绑定监听器，再发送启用命令：

const onDebuggerAttach = async tabId => {
  chrome.debugger.onEvent.addListener(onDebugEvent);
  await chrome.debugger.sendCommand({ tabId: tabId}, 'Log.enable', { maxLevel: 'verbose' });
  await chrome.debugger.sendCommand({ tabId: tabId}, 'Runtime.enable');
};

4. 检查日志处理函数的参数兼容性 #

Log.entryAdded和Runtime.consoleAPICalled的参数结构不同：

• Log.entryAdded的参数是{ entry: { level, text, ... } }
• Runtime.consoleAPICalled的参数是{ type, args, ... }
  如果handleConsoleMessage函数未区分两种结构，会导致部分日志被忽略，需针对性处理不同参数。

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