Archive of obsolete content

Utilizar Firefox Devtools com a API Social

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

Firefox tem um número de ferramentas de desenvolvimeto que pdoem ser utilizadas para ajudar com o desenvolvimento dos provedores de API Social.

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.

Utilziar 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 socias.

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

Etiquetas do documento e contribuidores

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