如何以编程方式在 Firefox 插件中打开开发者工具控制台？答案

【问题标题】：How do I programatically open the Developer Tools' Console in a Firefox addon?如何以编程方式在 Firefox 插件中打开开发者工具控制台？
【发布时间】：2015-09-11 16:49:37
【问题描述】：

我有一个简单的上下文菜单扩展，它将 AngularJS 范围记录到 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
    }
});

日志记录部分有效，但我需要填写// Open Web Console 的空白，我想在此处自动打开 Web 开发人员工具，并选择控制台选项卡，以便用户看到刚刚记录的内容。

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

我是否也可以在开发者工具侧边栏中以编程方式显示完整对象，就像在 Web 控制台中单击记录的对象一样？

【问题讨论】：

标签： firefox-addon firefox-addon-sdk

【解决方案1】：

很酷的问题，是的，这可以通过编程方式打开。我最近是 Angular 的粉丝，并且在我所有的 html5 应用程序中都使用它来支持 firefox。

这是在 web 控制台中打开 devtools 的方法：

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");
      }
      */
});

这是来自 firefox 代码库的关于此 showToolbox 函数的文档：https://dxr.mozilla.org/mozilla-central/source/browser/devtools/framework/gDevTools.jsm#378

【讨论】：