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);
    '
  });
});

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

启用扩展程序后，有没有办法查看页面的控制台日志？

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。

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

1 个答案: