Utilizar Firefox Devtools com a API Social

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo do Inglês.

O Firefox tem um número de ferramentas de desenvolvimento que podem ser utilizadas para ajudar com o desenvolvimento dos provedores de API Social. Contudo, até que o bug 839959 termine, o processo não é tão simples como deveria ser. Enquanto isso, esta página descreve algumas soluções alternativas.

Ativar Devtools do Chrome

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.

Utilizar o Inspetor de DOM e 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.

Utilizar o 'Depurador' com os elementos sociais.

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

Etiquetas do documento e contribuidores

Contribuidores para esta página: mansil
Última atualização por: mansil,