mozilla

Compare Revisions

Using the Firefox Devtools with the Social API

Change Revisions

Revision 353085:

Revision 353085 by Markh on

Revision 444005:

Revision 444005 by kscarfone on

Title:
Using the Firefox Devtools with the Social API
Using the Firefox Devtools with the Social API
Slug:
Social_API_Devtools
Social_API_Devtools
Content:

Revision 353085
Revision 444005
n8      Firefox has a number of development tools which can be usedn8      Firefox has a number of development tools that can be used 
> to help with the development of Social API providers.  Howe>to help with the development of Social API providers. However, un
>ver, until <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=>til <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=839959"
>839959" title="https://bugzilla.mozilla.org/show_bug.cgi?id=83995> title="https://bugzilla.mozilla.org/show_bug.cgi?id=839959">bug 
>9">bug 839959</a> lands the process isn't as simple as it should >839959</a> lands the process isn't as simple as it should be. In 
>be.&nbsp; In the meantime, this page describes some work-arounds.>the meantime, this page describes some workarounds.
n10    <h2>n10    <h2 id="Enable_Chrome_Devtools">
n14      Both of the techniques below require the chrome devtools ton14      Both of the techniques below require the chrome devtools to
> be manually enabled.&nbsp; To do this, open <code>about:config</> be manually enabled. To do this, open <code>about:config</code> 
>code> in a tab, and after verifying that you will be careful, tog>in a tab, and after verifying that you will be careful, toggle th
>gle the boolean value <code>devtools.chrome.enabled</code> to tru>e boolean value <code>devtools.chrome.enabled</code> to true.
>e. 
n16    <h2>n16    <h2 id="Using_the_DOM_Inspector_and_Profiler">
n20      <li>From the "Web Developer" menu, select "Scratchpad".&nbsn20      <li>From the "Web Developer" menu, select "Scratchpad". In 
>p; In the newly created scratchpad window, select the <em>Environ>the newly created scratchpad window, select the <em>Environment</
>ment</em> menu and select the <em>Browser</em> option.>em> menu and select the <em>Browser</em> option.
n26// Uncomment one of the following lines.  NOTE: You must ensure tn26// Uncomment one of the following lines. NOTE: You must ensure th
>he element you>e element you
27// want to inspect has been created - eg, the sidebar must be vis27// want to inspect has been created - e.g., the sidebar must be v
>ible, the flyouts>isible, the flyouts
n30// The sidebar:n30// The sidebar
n33// The "flyout" panel.n33// The "flyout" panel
34// let w = document.getElementById("social-flyout-panel").firstCh34// let w = document.getElementById("social-flyout-panel").firstCh
>ild.contentWindow>ild.contentWindow;
n36// The "notification" panel - this will show the most-recently-usn36// The "notification" panel - this will show the most-recently-us
>ed panel.>ed panel
n57      <li>A developer toolbox window should appear - the "Inspectn57      <li>A developer toolbox window should appear - the "Inspect
>or", "Style Editor" and "Profiler" tabs should all be showing the>or", "Style Editor", and "Profiler" tabs should all be showing th
> social element you enabled in the script.&nbsp; Executing the sc>e social element you enabled in the script. Executing the scratch
>ratchpad a second time will hide the toolbox.>pad a second time will hide the toolbox.
n60        <strong>Note that the Debugger and Web Console tabs are nn60        <strong>Note that the Debugger and Web Console tabs are n
>ot showing the social content.</strong>&nbsp; This is currently e>ot showing the social content.</strong> This is currently expecte
>xpected - see below for how to enable the debugger.>d - see below for how to enable the debugger.
n63    <h2>n63    <h2 id="Using_the_Debugger_with_social_elements.">
n67      <li>From the "Web Developer" menu, select "Browser Debuggern67      <li>From the "Web Developer" menu, select "Browser Debugger
>".&nbsp; Wait a few seconds for a new debugger window to open ini>". Wait a few seconds for a new debugger window to open and initi
>tialize.&nbsp; You will probably be asked to confirm a new debugg>alize. You will probably be asked to confirm that a new debugging
>ing session should be started.> session should be started.
t71      <li>In the script, add break-points etc to the code in quest71      <li>In the script, add breakpoints etc. to the code in ques
>tion, and start debugging!>tion, and start debugging!

Back to History