如何以编程方式在Firefox插件中打开开发者工具的控制台？ [英] How do I programatically open the Developer Tools' Console in a Firefox addon?

问题描述

我有一个简单的上下文菜单扩展，它将AngularJS范围记录到 unsafeWindow.console ：

 context：contextMenu）。 PageContext（），
 contentScript：'self.on（click，function（node）{'+ 
'if（unsafeWindow.angular）{'+ 
'unsafeWindow.console.log （unsafeWindow.angular.element（node）.scope（））;'+ 
'self.postMessage（true）;'+ 
'} else {'+ 
'unsafeWindow.alert（ ; 
'}'+ 
'}）;'，
 onMessage：function（）{
 //打开Web控制台
} 
}）; 
  

记录部分工作正常，但我需要填写 / /打开Web控制台，我想要自动打开Web开发人员工具，选择控制台选项卡，以便用户可以看到刚才记录的内容。

如何使用Firefox Addon SDK完成这项工作？

我也可以编程的方式显示完整的对象开发工具边栏就好像在Web控制台里面点击记录的对象？

解决方案

很酷的问题，是的，这可以打开编程。我是一个角色最近的粉丝，并在我所有的HTML5应用程序中使用它的Firefox。

这是如何打开devtools到Web控制台：

  var {Cu} = require（'chrome'）; 
 let {devtools} = Cu.import（resource：//gre/modules/devtools/Loader.jsm，{}）; 
 let myDOMWindow = Services.wm.getMostRecentWindow（'navigator：browser'）; 
让gBrowser = myDOMWindow.gBrowser; 
 let tt = devtools.TargetFactory.forTab（gBrowser.selectedTab）; 
 gDevTools.showToolbox（tt，webconsole）。then（function（toolbox）{
 let inspector = toolbox.getCurrentPanel（）; 
 console.log（'inspector：'，inspector） ; 
 / * 
 if（this.isRemote）{
 myDOMWindow.messageManager.sendAsyncMessage（debug：inspect，{}，{
 node：this.target $ b $ （b））; 
 inspector.walker.findInspectingNode（）。then（nodeFront => {
 inspector.selection.setNodeFront（nodeFront，browser-context-menu）; 
}） ; 
} else {
 inspector.selection.setNode（this.target，browser-context-menu）; 
} 
 * / 
}）; 
  

来自firefox代码库的这个 showToolbox 功能： https：//dxr.mozilla。 org / mozilla-central / source / browser / devtools / framework / gDevTools.jsm＃378

I have a simple context menu extension that logs an AngularJS scope to unsafeWindow.console:

require("sdk/context-menu").contextMenu.Item({
    label: "Inspect Angular scope",
    context: contextMenu.PageContext(),
    contentScript: 'self.on("click", function(node) {' +
    '    if (unsafeWindow.angular) {' +
    '        unsafeWindow.console.log(unsafeWindow.angular.element(node).scope());' +
    '        self.postMessage(true);' +
    '    } else {' +
    '        unsafeWindow.alert("No Angular scope available");' +
    '    }' +
    '});',
    onMessage: function() {
        // Open Web Console
    }
});

The logging part works, but I need to fill in the blank for // Open Web Console, where I want to automatically open the Web Developer Tools, with the Console tab selected so that the user will see what just got logged.

How can this be done using the Firefox Addon SDK?

Can I also programmatically show the full object in the Developer Tools sidebar as if the logged object were clicked inside the Web Console?

解决方案

Cool question, yes this can be opened programtically. I'm a recent fan of angular and am using it in all my html5 apps for firefox.

This is how to open the devtools into the web console:

var {Cu} = require('chrome');
let { devtools } = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
let myDOMWindow = Services.wm.getMostRecentWindow('navigator:browser');
let gBrowser = myDOMWindow.gBrowser;
let tt = devtools.TargetFactory.forTab(gBrowser.selectedTab);
gDevTools.showToolbox(tt, "webconsole").then(function(toolbox) {
    let inspector = toolbox.getCurrentPanel();
    console.log('inspector:', inspector);
    /*
      if (this.isRemote) {
          myDOMWindow.messageManager.sendAsyncMessage("debug:inspect", {}, {
              node: this.target
          });
          inspector.walker.findInspectingNode().then(nodeFront => {
              inspector.selection.setNodeFront(nodeFront, "browser-context-menu");
          });
      } else {
          inspector.selection.setNode(this.target, "browser-context-menu");
      }
      */
});

Heres documentation from the firefox codebase on this showToolbox function: https://dxr.mozilla.org/mozilla-central/source/browser/devtools/framework/gDevTools.jsm#378

这篇关于如何以编程方式在Firefox插件中打开开发者工具的控制台？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！