Google Chrome / Firefox在控制台中看不到扩展名输出
我正在尝试为浏览器testingWeb扩展的示例代码。 但是，这是行不通的。 我检查了Google Chrome和Firefox的控制台。 它不打印任何东西。 以下是我的代码：
manifest.json ：
{ "description": "Demonstrating webRequests", "manifest_version": 2, "name": "webRequest-demo", "version": "1.0", "permissions": [ "webRequest" ], "background": { "scripts": ["background.js"] } } background.js ：
function logURL(requestDetails) { console.log("Loading: " + requestDetails.url); } chrome.webRequest.onBeforeRequest.addListener( logURL, {urls: ["<all_urls>"]} ); console.log("Hell o extension background script executed");
我错过了什么吗？
火狐
在Firefox中，你的代码工作（输出到控制台），就像写在问题中一样。
如果你没有看到它在控制台，那么你可能正在看错误的控制台。
Mozilla描述了在Debugging页面的哪个控制台中可以看到什么扩展输出。
浏览器控制台
您应该使用浏览器控制台 。 您可以从Tools→Web开发人员浏览器控制台（键盘快捷键Ctrl – Shift – J或Mac上的Cmd – Shift – J ）访问它。
浏览器工具箱
如果启用了它，您也可以使用浏览器工具箱控制台。 您可以从Tools→Web开发人员浏览器工具箱（键盘快捷键Ctrl – Alt – Shift – I ;在Mac上： Cmd – Alt – Shift – I ）访问它。
附加debugging器
要debugging您的加载项，您可以使用附加的debugging器。 您可以通过以下方式访问它about:debugging ➞Debug。
Web控制台
您可能正在查看仅与单个选项卡关联的Web控制台 （键盘快捷键F12 ）。 这是你在debugging网页时想要的，而不是一个加载项。 对于在该选项卡中注入的内容脚本， console.log()输出将显示在此控制台中。 但是，您将看不到您的加载项的其他部分的输出（例如，不是其他选项卡中的内容脚本，也不是后台脚本等）。
谷歌浏览器
在Chrome中为您的扩展显示正确的控制台要复杂一点。 控制台输出将显示在多个可能位置中的一个位置，具体取决于console.log()执行环境。 以下每个DevTools都是相互独立的，并显示在单独的窗口或选项卡中。 在关联的选项卡（底部或侧面）中显示是与网页和内容脚本关联的DevTools的默认值，因为这些选项卡是特定于该选项卡的。 对于网页/内容脚本DevTools，您可以select将其显示在单独的窗口中，或停驻在选项卡（侧面或底部）内。
为您的背景页面
正如Srujan Reddy所解释的那样 ，您必须通过下拉菜单进行多项select，才能进入chrome://extensions页面（或者您可以手动inputURL作为URL，或使用书签），然后selectcheckbox（“开发者模式”），然后点击“背景页面”链接。 然后，您必须在popup的窗口中select“控制台”选项卡。
展示你要做什么要容易得多：
对于您的内容脚本
输出将显示在常规的Web控制台中（在Web 开发人员工具中 ）。 您可以通过在注入内容脚本的网页中按F12 （或其他快捷方式）将其打开。 每个Web控制台将只显示在该选项卡中注入的脚本的输出。
通过扩展名显示console.*输出，但会导致控制台JavaScript命令行，debugging程序等位于页面上下文中，而不是内容脚本。
如果要在注入到网页中的内容脚本的上下文中使用控制台JavaScript命令行，则需要从Console窗口左上angular的下拉菜单中select扩展的内容脚本上下文。 这个下拉菜单通常以“top”开头。 下拉菜单可以select每个内容脚本上下文（每个扩展有一个脚本注入）。
为您的popup窗口
右键单击您的browserActionbutton，然后select“检查popup窗口”。 或者，在popup框中右键单击并select“检查”。 要么打开popup页面的DevTools。 popup窗口会在比通常更多的条件下保持打开状态，但如果您切换标签页等，它仍然会被closures。
为您的选项页面
在“选项”popup框的主要内容（不是标题栏）中右键单击并select“检查”。 这将打开选项页面的DevTools。
对于您的面板或从您的扩展程序中加载到选项卡中的页面
当面板或标签聚焦时，可以通过按F12 （或其他快捷键）或打开上下文菜单（右键单击）并select“检查”来打开DevTools。
你在哪个控制台查看日志？
如果您正在查看选项卡上的控制台，那是错误的地方。
打开设置/扩展或以新的选项卡types
chrome://extensions
在您的扩展下，点击“后台页面”链接，您可以在其中查看日志
**确保开发者模式被选中
是的，Chrome必须单击提到的后台页面链接，但不会在那里，除非您将其设置为持久性：
"background": { "persistent": true, "scripts": ["background.js"] }
