Using the Firefox Devtools with the Social API

Firefox has a number of development tools that can be used to help with the development of Social API providers. However, until bug 839959 lands the process isn't as simple as it should be. In the meantime, this page describes some workarounds.

Enable Chrome Devtools

Both of the techniques below require the chrome devtools to be manually enabled. To do this, open about:config in a tab, and after verifying that you will be careful, toggle the boolean value devtools.chrome.enabled to true.

Using the DOM Inspector and Profiler

• From the "Web Developer" menu, select "Scratchpad". In the newly created scratchpad window, select the Environment menu and select the Browser option.
• Paste the following code into the new scratchpad:

// Uncomment one of the following lines. NOTE: You must ensure the element you
// want to inspect has been created - e.g., the sidebar must be visible, the flyouts
// must have been opened once, etc.

// The sidebar
let w = document.getElementById("social-sidebar-browser").contentWindow;

// The "flyout" panel
// let w = document.getElementById("social-flyout-panel").firstChild.contentWindow;

// The "notification" panel - this will show the most-recently-used panel
// let w = document.getElementById("social-notification-panel").firstChild.contentWindow;


if (!w) {
    alert("This window is yet to be created");
} else {
    XPCOMUtils.defineLazyModuleGetter(this, "Toolbox",
      "resource:///modules/devtools/Toolbox.jsm");
    XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
      "resource:///modules/devtools/Target.jsm");
    let target = TargetFactory.forWindow(w);
    let toolbox = gDevTools.getToolbox(target);
    toolbox ? toolbox.destroy() : gDevTools.showToolbox(target, undefined, "window");
}

• Review the top few lines of the script, and ensure exactly one of the "let w = ..." lines is uncommented, depending on which social element you wish to inspect.
• Press Ctrl+R (or Execute->Run) to run the scratchpad.
• A developer toolbox window should appear - the "Inspector", "Style Editor", and "Profiler" tabs should all be showing the social element you enabled in the script. Executing the scratchpad a second time will hide the toolbox.
• Note that the Debugger and Web Console tabs are not showing the social content. This is currently expected - see below for how to enable the debugger.

Using the Debugger with social elements.

• From the "Web Developer" menu, select "Browser Debugger". Wait a few seconds for a new debugger window to open and initialize. You will probably be asked to confirm that a new debugging session should be started.
• In the "Filter Scripts" box, start typing the name of the script you wish to debug (for example, enter the name of your sidebar URL to debug the sidebar).
• In the script, add breakpoints etc. to the code in question, and start debugging!

// want to inspect has been created - eg, the sidebar must be visible, the flyouts
// must have been opened once, etc.

// The sidebar:
let w = document.getElementById("social-sidebar-browser").contentWindow;

// The "flyout" panel.
// let w = document.getElementById("social-flyout-panel").firstChild.contentWindow

// The "notification" panel - this will show the most-recently-used panel.
// let w = document.getElementById("social-notification-panel").firstChild.contentWindow;


if (!w) {
    alert("This window is yet to be created");
} else {
    XPCOMUtils.defineLazyModuleGetter(this, "Toolbox",
      "resource:///modules/devtools/Toolbox.jsm");
    XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
      "resource:///modules/devtools/Target.jsm");
    let target = TargetFactory.forWindow(w);
    let toolbox = gDevTools.getToolbox(target);
    toolbox ? toolbox.destroy() : gDevTools.showToolbox(target, undefined, "window");
}

// Uncomment one of the following lines.  NOTE: You must ensure the element you
// want to inspect has been created - eg, the sidebar must be visible, the flyouts
// must have been opened once, etc.

// The sidebar:
let w = document.getElementById("social-sidebar-browser").contentWindow;

// The "flyout" panel.
// let w = document.getElementById("social-flyout-panel").firstChild.contentWindow

// The "notification" panel - this will show the most-recently-used panel.
// let w = document.getElementById("social-notification-panel").firstChild.contentWindow;


if (!w) {
    alert("This window is yet to be created");
} else {
    XPCOMUtils.defineLazyModuleGetter(this, "Toolbox",
      "resource:///modules/devtools/Toolbox.jsm");
    XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
      "resource:///modules/devtools/Target.jsm");
    let target = TargetFactory.forWindow(w);
    let toolbox = gDevTools.getToolbox(target);
    toolbox ? toolbox.destroy() : gDevTools.showToolbox(target, undefined, "window");
}

// Uncomment one of the following lines.  NOTE: You must ensure the element you
// want to inspect has been created - eg, the sidebar must be visible, the flyouts
// must have been opened once, etc.

// The sidebar:
let w = document.getElementById("social-sidebar-browser").contentWindow;

// The "flyout" panel.
// let w = document.getElementById("social-flyout-panel").firstChild.contentWindow

// The "notification" panel - this will show the most-recently-used panel.
// let w = document.getElementById("social-notification-panel").firstChild.contentWindow;


if (!w) {
    alert("This window is yet to be created");
} else {
    XPCOMUtils.defineLazyModuleGetter(this, "Toolbox",
      "resource:///modules/devtools/Toolbox.jsm");
    XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
      "resource:///modules/devtools/Target.jsm");
    let target = TargetFactory.forWindow(w);
    let toolbox = gDevTools.getToolbox(target);
    toolbox ? toolbox.destroy() : gDevTools.showToolbox(target, undefined, "window");
}

// Uncomment one of the following lines.  NOTE: You must ensure the element you
// want to inspect has been created - eg, the sidebar must be visible, the flyouts
// must have been opened once, etc.

// The sidebar:
let w = document.getElementById("social-sidebar-browser").contentWindow;

// The "flyout" panel.
// let w = document.getElementById("social-flyout-panel").firstChild.contentWindow

// The "notification" panel - this will show the most-recently-used panel.
// let w = document.getElementById("social-notification-panel").firstChild.contentWindow;


if (!w) {
    alert("This window is yet to be created");
} else {
    XPCOMUtils.defineLazyModuleGetter(this, "Toolbox",
      "resource:///modules/devtools/Toolbox.jsm");
    XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
      "resource:///modules/devtools/Target.jsm");
    let target = TargetFactory.forWindow(w);
    let toolbox = gDevTools.getToolbox(target);
    toolbox ? toolbox.destroy() : gDevTools.showToolbox(target, undefined, "window");
}