Chrome devtools扩展控制台 [英] Chrome devtools extension console

问题描述

我将它包含在我的Chrome扩展清单中

 devtools_page：devtools.html
 
 code> 

在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实例用于http：// host 
 3. + devtools实例用于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 +'）;'）; 
  

I included this in my chrome extension manifest

"devtools_page": "devtools.html"

And in devtools.html I include a devtools.js file which creates a panel

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

The panel is indeed created. And in panel.html I include a panel.js file in which I added a listener

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

But where can I see the console output of the panel? Or how can I redirect it to the devtools console?

解决方案

This message will be logged in the console of the developer tools. To view this console, detach the developer tools from the window, and press Ctrl + Shift + J.

Here's an picture:

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

Your message is currently logged to 3 (the console of the devtools instance) instead of 2 (the console of the page). To log the string to the page, use the chrome.experimental.devtools.console API.

An alternative is to JSON-serialize your object, and use chrome.devtools.inspectedWindow.eval to log the result:

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

这篇关于Chrome devtools扩展控制台的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！