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 Developer Tools，并选择Console选项卡，以便用户可以看到记录的内容。

如何使用Firefox Addon SDK完成此操作？

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

Answer 1

很酷的问题，是的，这可以通过程序打开。我最近是角色的粉丝，我在我的所有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");
      }
      */
});

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

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

1 个答案: