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

Question

我有一个简单的上下文菜单扩展，它将 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 控制台中单击记录的对象一样？

Answer 1

很酷的问题，是的，这可以通过编程方式打开。我最近是 angular 的粉丝，我在我的所有 html5 Firefox 应用程序中都使用它。

这是在 Web 控制台中打开开发工具的方法：

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

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

How do I programatically open the Developer Tools' Console in a Firefox addon?

firefox-addon

firefox-addon-sdk