Chrome devtools扩展控制台

Question

我在我的chrome扩展清单中包含了这个。

"devtools_page": "devtools.html"

在devtools.html中，我包含了一个创建面板的devtools.js文件

chrome.devtools.panels.create("Panel", "icon.png", "panel.html", function(panel){});

面板确实已经创建好了。在panel.html中，我包含了一个panel.js文件，我在其中添加了一个监听器

chrome.devtools.network.onRequestFinished.addListener(function(details){
    console.log(details);
});

但是我在哪里可以看到面板的控制台输出呢？或者我如何将其重定向到devtools控制台？

Answer 1

此消息将记录在开发人员工具的控制台中。要查看此控制台，请将开发人员工具与窗口分离，然后按Ctrl + Shift + J。

这是一张图片：

1. Page (http://host/)
2. + Devtools instance for http://host
3.   + Devtools instance for chrome-devtools://devtools/devtools.html?... )

您的消息当前记录到%3( devtools实例的控制台)，而不是%2(页面的控制台)。要将字符串记录到页面，请使用chrome.experimental.devtools.console接口。

另一种方法是对对象进行JSON序列化，并使用chrome.devtools.inspectedWindow.eval记录结果：

var obj = ...;
var str = JSON.stringify( obj );
chrome.devtools.inspectedWindow.eval('console.log(' + str + ');');

Answer 2

另一种方法是在一个单独的窗口中打开chrome开发工具(不在浏览器的一侧)，然后按CMD + Option + i (适用于Mac)，然后您将获得该开发工具的另一个开发工具。在那里，您可以更轻松地进行调试和查看控制台日志:)