Chrome devtools 扩展控制台答案

【问题标题】：Chrome devtools extension consoleChrome devtools 扩展控制台
【发布时间】：2013-05-23 23:50:42
【问题描述】：

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

【问题讨论】：

【解决方案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 API。

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

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

【讨论】：

【解决方案2】：

另一种方法是在一个单独的窗口（不在浏览器一侧）中打开 chrome devtools，然后按CMD + Option + i（对于 Mac），然后你会得到另一个用于该 devtools 的 devtools。在那里您可以更轻松地调试和查看控制台日志:)

【讨论】：