javascript - 调试 tabs.executeScript 时如何使用 console.log

Question

我一直在寻找这个问题的答案，但它只带我找到了调试扩展本身的解决方案，而我想调试网页。

我想创建一个扩展程序，允许我修改特定网页(显然仅在我的计算机上)。
我按照 chrome 开发者网站上的 "activeTab" 权限教程创建了一个非常简单的脚本，然后我做了以下操作:

// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
  // No tabs or host permissions needed!
  chrome.tabs.executeScript({
    code:'
      var oSwitchContainer = document.getElementById("norm");
      console.log(oSwitchContainer.childNodes);
    '
  });
});

当我检查页面时，我看不到任何控制台消息，但是，我可以通过修改其 innerHTML 轻松更改该 oSwitchContainer 的内容。

启用扩展后有什么办法可以查看页面的控制台日志吗？

Answer 1

您说您找到了调试“扩展本身”的解决方案。

看看Architecture Overview .

您所说的“扩展本身”是其背景页面，这就是您的 browserAction.onClicked 监听器执行的位置。如果您从该代码执行 console.log() 语句，它将转到后台页面的控制台。

但是，使用 chrome.tabs.executeScript 时，您可以传递要在打开选项卡的上下文¹ 中执行的代码，而不是在后台页面中执行。来自该上下文的所有 console.log() 调用都会转到打开页面自己的控制台 - 您应该在那里查看。

console.log("This will show in the background page console");
chrome.tabs.executeScript(
  { code: 'console.log("This will show in the current tab console");' }
);

<小时/>

¹ 准确地说，扩展程序创建了一个隔离的上下文，但它仍然属于打开的页面。请参阅Content Scripts documentation了解更多详情。