Chrome扩展中chrome.devtools.inspectedWindow.eval的console.log输出位置在哪？

1. 示例代码日志的输出位置 #

chrome.devtools.inspectedWindow.eval() 执行的代码运行在被调试页面的JavaScript上下文中，所以里面的console.log输出会出现在你当前打开DevTools调试的目标页面的控制台面板，不会出现在扩展自身的日志位置。

2. 直接写console.log报错的原因 #

你遇到的"编译失败"本质是运行上下文不匹配导致的报错，常见原因有两个：

• 你的manifest.json配置错误：没有声明"devtools_page": "devtools.html"，也没有在权限列表中添加"devtools"权限
• 你误将依赖chrome.devtools API的代码写到了扩展的background、content script等其他上下文中，这些上下文默认没有权限访问devtools相关API，运行时会直接抛出错误。

3. 正确实现需求的方案 #

你不需要套chrome.devtools.inspectedWindow.eval就可以直接获取请求数据，直接在监听回调中处理即可：

// devtools.js 代码
chrome.devtools.network.onRequestFinished.addListener(function(request) {
  // 直接获取需要的字段
  const url = request.request.url;
  const bodySize = request.response.bodySize;
  // 此处的console.log输出到devtools扩展自身的控制台
  console.log('捕获到请求：', {url, bodySize});
  // 后续如果要写入数据库，可通过chrome.runtime.sendMessage把数据传给扩展的background/service worker处理存储逻辑
});

4. 查看devtools.js日志的方法 #

• 打开Chrome扩展管理页（地址栏输入chrome://extensions/），开启右上角的「开发者模式」
• 找到你开发的扩展，进入详情页，找到「检查视图」分类，点击对应的devtools.html入口
• 弹出的新调试窗口的控制台就是devtools.js的日志输出位置。

内容的提问来源于stack exchange，提问作者Adam E.