1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
|
---
title: Utilizar Firefox Devtools com a API Social
slug: Archive/Devtools_API_Social
translation_of: Archive/Social_API_Devtools
---
<p>O Firefox tem um número de <a href="/pt-PT/docs/Tools">ferramentas de desenvolvimento</a> que podem ser utilizadas para ajudar com o desenvolvimento dos provedores de <a href="/pt-PT/docs/Social_API">API Social</a>. Contudo, até que o <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=839959" title="https://bugzilla.mozilla.org/show_bug.cgi?id=839959"><em>bug</em> 839959</a> termine, o processo não é tão simples como deveria ser. Enquanto isso, esta página descreve algumas soluções alternativas.</p>
<h2 id="Ativar_Devtools_do_Chrome">Ativar Devtools do Chrome</h2>
<p>Both of the techniques below require the chrome devtools to be manually enabled. To do this, open <code>about:config</code> in a tab, and after verifying that you will be careful, toggle the boolean value <code>devtools.chrome.enabled</code> to true.</p>
<h2 id="Utilizar_o_Inspetor_de_DOM_e_Profiler">Utilizar o Inspetor de DOM e <em>Profiler</em></h2>
<ul>
<li>From the "Web Developer" menu, select "<a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>". In the newly created scratchpad window, select the <em>Environment</em> menu and select the <em>Browser</em> option.</li>
<li>Paste the following code into the new scratchpad:</li>
</ul>
<pre class="brush: js">// 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");
}</pre>
<ul>
<li>Review the top few lines of the script, and ensure exactly one of the "<code>let w = ...</code>" lines is uncommented, depending on which social element you wish to inspect.</li>
<li>Press Ctrl+R (or Execute->Run) to run the scratchpad.</li>
<li>A developer toolbox window should appear - the "<a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>", "<a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>", and "<a href="/en-US/docs/Tools/Profiler">Profiler</a>" tabs should all be showing the social element you enabled in the script. Executing the scratchpad a second time will hide the toolbox.</li>
<li><strong>Note that the Debugger and Web Console tabs are not showing the social content.</strong> This is currently expected - see below for how to enable the debugger.</li>
</ul>
<h2 id="Utilizar_o_'Depurador'_com_os_elementos_sociais.">Utilizar o 'Depurador' com os elementos sociais.</h2>
<ul>
<li>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.</li>
<li>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).</li>
<li>In the script, add breakpoints etc. to the code in question, and start debugging!</li>
</ul>
<pre style="position: fixed; left: -1000px;">// 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");
}</pre>
<pre style="position: fixed; left: -1000px;">// 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");
}</pre>
<pre style="position: fixed; left: -1000px;">// 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");
}</pre>
<pre style="position: fixed; left: -1000px;">// 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");
}</pre>
<pre style="position: fixed; left: -1000px;">// 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");
}</pre>
<pre style="position: fixed; left: -1000px;">// 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");
}</pre>
|
