Google chrome extension Chrome devtools扩展控制台

我把它包括在我的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控制台？

此消息将记录在开发人员工具的控制台中。要查看此控制台，请从窗口分离开发人员工具，然后按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（页面的控制台）。要将字符串记录到页面，请使用API

另一种方法是JSON序列化对象，并使用它记录结果：

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

---

另一种方法是在一个单独的窗口中打开chrome devtools（不在浏览器的一侧），然后按

CMD+Option+i

（对于Mac），然后为该devtools获取另一个devtools。在那里，您可以更轻松地调试和查看控制台日志：）