Google chrome extension 如何打开正确的devtools控制台以查看扩展脚本的输出？

我正在尝试测试浏览器web扩展的示例代码。 但是，它不起作用。我检查了谷歌Chrome和Firefox的控制台。它不打印任何东西。以下是我的代码：

manifest.json：

background.js：

函数日志URL（请求详细信息）{
log（“加载：+requestDetails.url”）；
}
chrome.webRequest.onBeforeRequest.addListener(
logURL，
{URL:[“”]}
);
log（“执行了hello扩展后台脚本”）；

---

我遗漏了什么吗？

您正在哪个控制台中查看日志

如果您在选项卡上查看console，则这是错误的位置

打开设置/扩展或在新选项卡类型中

chrome://extensions

在你的分机下点击“背景页面”链接，你可以在这里查看日志

---

**确保选中了开发人员模式

您在哪个控制台中查看日志

如果您在选项卡上查看console，则这是错误的位置

打开设置/扩展或在新选项卡类型中

chrome://extensions

在你的分机下点击“背景页面”链接，你可以在这里查看日志

---

**确保选中了开发人员模式

您的代码编写正确，可以工作并输出到控制台。
如果您没有看到它，那么您可能是看错了控制台

1.火狐 Mozilla在文章中描述了在哪个控制台中可以看到哪些扩展输出

• 默认情况下，不再显示WebExtensions背景页的输出。通过选择显示“show Content Messages”（显示内容消息），您可以让它显示所有WebExtensions的输出，当您单击齿轮状符号时，弹出窗口会显示“show Content Messages”（显示内容消息）⚙️" 在窗口的右上角，就在“请求”的右侧。根据您正在执行的操作，浏览器控制台可能会显示来自的输出。您可以通过“工具”访问浏览器控制台➜网络开发者➜浏览器控制台（键盘快捷键Ctrl-Shift-J或Mac上的Cmd-Shift-J）
  在旧版本的Firefox中，这是用来查看扩展输出的控制台。然而，情况不再如此

• 如果您启用了它，还可以使用控制台。您可以通过工具访问它➜网络开发者➜浏览器工具箱（Mac上的键盘快捷键Ctrl-Alt-Shift-I；Cmd-Alt-Shift-I）。如果不可用，可以通过Web控制台设置页面中的选项启用它
  此工具箱中的控制台将显示后台运行的脚本和内容脚本的输出。但是，复杂数据将不可用（例如，没有对象）

• 这是您应该用来查看在WebExtension的后台上下文中运行的脚本的控制台输出的内容。这包括后台脚本、在弹出窗口中运行的脚本、选项页，以及从扩展加载的作为选项卡或iframe主URL的任何其他页。您可以通过

  关于：debuggin访问附加调试程序g

  ➞检查（使用与您正在调试的WebExtension关联的“检查”按钮；每个扩展都有一个单独的按钮）。这将使用调试器打开一个新选项卡。然后，您可以单击浏览器选项卡中的控制台选项卡。此控制台将仅显示您正在检查的WebExtension中的内容

• 您可能正在查看仅与单个选项卡关联的（键盘快捷键F12）。这是调试网页时所需的，而不是加载项的背景脚本。对于插入到该选项卡中的内容脚本，

  console.log（）

  输出将显示在此控制台中。但是，您将看不到加载项任何其他部分的输出（例如，其他选项卡中的内容脚本、背景脚本等）

2.谷歌浏览器 在Chrome中，为扩展显示正确的控制台要复杂一些。控制台输出将仅显示在多个可能的位置中的一个，具体取决于

console.log（）的上下文

已执行。以下每个devtool彼此独立，并显示在单独的窗口或选项卡中。显示在关联的选项卡（底部或侧面）是与网页和内容脚本关联的DevTools的默认值，因为它们特定于选项卡。对于网页/内容脚本DevTools，您可以选择将其显示在其自己的单独窗口中，或停靠在选项卡内（侧面或底部）

• 背景脚本 如图所示，您必须通过下拉菜单上的多个选项才能进入

  chrome://extensions

  page（或者您可以手动键入URL，或者使用书签），然后选中两个复选框（“开发人员模式”），然后单击“后台页面”链接。然后，您必须选择“控制台”“弹出窗口上的选项卡
  展示您必须做的事情要容易得多：
  

• 内容脚本 输出将显示在常规web控制台中（在web中）。您可以在插入内容脚本的网页中按F12（或其他快捷键）打开它。每个web控制台将仅显示该选项卡中注入的脚本的输出
  通过显示扩展的

  控制台。*

  输出执行上述操作，但会导致控制台JavaScript命令行、调试器等位于页面上下文中，而不是内容脚本中
  如果要在注入网页的内容脚本上下文中使用console JavaScript命令行，则需要从console窗口左上角的下拉菜单中选择扩展的内容脚本上下文。此下拉菜单通常以值“top”开始。下拉列表将为每个内容脚本上下文（已注入脚本的每个扩展名一个）提供选择

  chrome://extensions
  

  "background": {
      "persistent": true,
      "scripts": ["background.js"]
  }