author | Oleksandr Gavenko <gavenkoa@gmail.com> |
Mon, 19 Oct 2015 17:04:52 +0300 | |
changeset 1769 | cadd23f8127f |
parent 1717 | 79628df58b2d |
child 1905 | fba288d59662 |
permissions | -rw-r--r-- |
1391 | 1 |
.. -*- coding: utf-8; -*- |
2 |
.. include:: HEADER.rst |
|
3 |
||
4 |
========================== |
|
5 |
Develop with/of Firefox. |
|
6 |
========================== |
|
7 |
.. contents:: |
|
8 |
||
1392 | 9 |
Useful Firefox add-ons for developers. |
10 |
====================================== |
|
1391 | 11 |
|
1404
20068801663f
Plug-ins for Web-development.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1393
diff
changeset
|
12 |
https://addons.mozilla.org/en-US/firefox/collections/mozilla/webdeveloper/ |
20068801663f
Plug-ins for Web-development.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1393
diff
changeset
|
13 |
Plug-ins for Web-development. |
20068801663f
Plug-ins for Web-development.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1393
diff
changeset
|
14 |
|
1391 | 15 |
Firebug. |
16 |
-------- |
|
17 |
||
18 |
Firebug integrates with Firefox to put a wealth of development tools at your fingertips |
|
19 |
while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any |
|
20 |
web page. |
|
21 |
||
22 |
http://getfirebug.com |
|
23 |
home page |
|
24 |
https://addons.mozilla.org/firefox/addon/1843 |
|
25 |
download page |
|
26 |
||
27 |
Live HTTP Headers. |
|
28 |
------------------ |
|
29 |
||
30 |
* First by adding a 'Headers' tab in 'View Page Info' of a web page. |
|
31 |
* Second by adding a tool in the 'Tools->Web Development' menu to be able to display http |
|
32 |
headers in real time (while pages are being downloaded from the Internet. |
|
33 |
* Third by letting you edit request headers and replay an URL (beta). Look for the Replay |
|
34 |
button in the live window! |
|
35 |
||
36 |
This project may be of some help for the following: |
|
37 |
||
38 |
* Help debugging web application. |
|
39 |
* See which kind of web server the remote site is using. |
|
40 |
* See the cookies sent by remote site. |
|
41 |
||
42 |
Alternatively you can use fiddler2 (only Windows as it written in .NET) |
|
43 |
||
44 |
http://livehttpheaders.mozdev.org/ |
|
45 |
home page |
|
46 |
https://addons.mozilla.org/en-US/firefox/addon/3829/ |
|
47 |
download page |
|
48 |
http://www.fiddler2.com/fiddler2/ |
|
49 |
Web Debugging Proxy |
|
50 |
||
1514 | 51 |
Wappalyzer. |
52 |
----------- |
|
53 |
||
54 |
Reverse which libraries and frameworks used by page. |
|
55 |
||
56 |
https://addons.mozilla.org/en-US/firefox/addon/wappalyzer/ |
|
57 |
download page |
|
58 |
||
1391 | 59 |
Tamper Data. |
60 |
------------ |
|
61 |
||
62 |
* Use tamperdata to view and modify HTTP/HTTPS headers and post parameters. |
|
63 |
* Trace and time http response/requests. |
|
64 |
* Security test web applications by modifying POST parameters. |
|
65 |
||
66 |
Based on code and incompotable with "Live HTTP Headers" extensions. |
|
67 |
||
68 |
http://tamperdata.mozdev.org/index.html |
|
69 |
home page |
|
70 |
https://addons.mozilla.org/en-US/firefox/addon/966/ |
|
71 |
download page |
|
72 |
http://jimbojw.com/wiki/index.php?title=Tamper_Data |
|
73 |
Tamper Data tutorial. |
|
74 |
||
75 |
Extension security. |
|
76 |
=================== |
|
77 |
||
78 |
* https://developer.mozilla.org/en/Security_best_practices_in_extensions |
|
79 |
||
80 |
Debugging in Firefox. |
|
81 |
===================== |
|
82 |
||
83 |
For JavaScript:: |
|
84 |
||
85 |
// Enables strict JavaScript warnings in the Error Console. |
|
86 |
user_pref("javascript.options.strict", true); |
|
87 |
// Logs errors in chrome files to the Error Console. Enable Components.utils.reportError(). |
|
88 |
user_pref("javascript.options.showInConsole", true); |
|
89 |
// Disables the XUL cache so that changes to windows and dialogs do not require a restart. |
|
90 |
user_pref("nglayout.debug.disable_xul_cache", true); |
|
91 |
// Enables the use of the dump() statement to print to the standard console. |
|
92 |
user_pref("browser.dom.window.dump.enabled", true); |
|
93 |
// This enables to run JavaScript code snippets in the chrome context of the Scratchpad from the Tools menu. |
|
94 |
user_pref("devtools.chrome.enabled", true); |
|
95 |
// This will send more detailed information about installation and update problems to the Error Console. |
|
96 |
user_pref("extensions.logging.enabled", true); |
|
97 |
user_pref("dom.report_all_js_exceptions", true); |
|
1516
23ce5096b67f
Some more development settings.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1514
diff
changeset
|
98 |
// This adds a "Browser Debugger" entry to the "Web Developer" submenu of the "Tools" menu. |
23ce5096b67f
Some more development settings.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1514
diff
changeset
|
99 |
// The Browser Debugger can be used to debug the JavaScript code of extensions. |
23ce5096b67f
Some more development settings.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1514
diff
changeset
|
100 |
user_pref("devtools.debugger.remote-enabled", true); |
23ce5096b67f
Some more development settings.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1514
diff
changeset
|
101 |
// Detect deprecated code use. |
23ce5096b67f
Some more development settings.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1514
diff
changeset
|
102 |
user_pref("devtools.errorconsole.deprecation_warnings", true); |
1391 | 103 |
|
1717 | 104 |
Examine ``devtool`` options in ``about:config`` with prefix ``devtools.``:: |
105 |
||
106 |
user_pref("devtools.debugger.enabled", true); |
|
107 |
user_pref("devtools.debugger.pause-on-exceptions", true); |
|
108 |
user_pref("devtools.debugger.auto-pretty-print", true); |
|
109 |
||
110 |
user_pref("devtools.debugger.chrome-debugging-host", "localhost"); |
|
111 |
user_pref("devtools.debugger.chrome-debugging-port", 6080); |
|
112 |
user_pref("devtools.debugger.ignore-caught-exceptions", true); |
|
113 |
user_pref("devtools.debugger.remote-enabled, true); |
|
114 |
user_pref("devtools.debugger.remote-host", "localhost"); |
|
115 |
user_pref("devtools.debugger.remote-port", 6000); |
|
116 |
||
1391 | 117 |
See: |
118 |
||
119 |
https://developer.mozilla.org/en/Setting_up_extension_development_environment |
|
120 |
setting up profile, options and about developer plugin |
|
121 |
||
122 |
Debugging JavaScript with Web Console. |
|
123 |
-------------------------------------- |
|
1405
c761842c6d90
Debugging JavaScript with Web Console.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1393
diff
changeset
|
124 |
|
c761842c6d90
Debugging JavaScript with Web Console.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1393
diff
changeset
|
125 |
Instead of "Error Console" (press Ctrl+Shift+J) use "Web Console" (press |
c761842c6d90
Debugging JavaScript with Web Console.
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1393
diff
changeset
|
126 |
Ctrl+Shift+K) in Firefox >=4.0:: |
1391 | 127 |
|
1517
16607af623bc
About "new Error().stack" and console.log("%o").
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1516
diff
changeset
|
128 |
console.log("str"); |
16607af623bc
About "new Error().stack" and console.log("%o").
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1516
diff
changeset
|
129 |
console.info("str is %s", "str"); |
16607af623bc
About "new Error().stack" and console.log("%o").
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1516
diff
changeset
|
130 |
console.warn("this is %o", this); |
16607af623bc
About "new Error().stack" and console.log("%o").
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1516
diff
changeset
|
131 |
console.error("int: %i, float: %f, string: %s, object: %o", 2, .333, "str", this); |
16607af623bc
About "new Error().stack" and console.log("%o").
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1516
diff
changeset
|
132 |
|
16607af623bc
About "new Error().stack" and console.log("%o").
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1516
diff
changeset
|
133 |
To see stack-trace use:: |
16607af623bc
About "new Error().stack" and console.log("%o").
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1516
diff
changeset
|
134 |
|
1522 | 135 |
console.trace(); |
1517
16607af623bc
About "new Error().stack" and console.log("%o").
Oleksandr Gavenko <gavenkoa@gmail.com>
parents:
1516
diff
changeset
|
136 |
console.log(new Error().stack); |
1391 | 137 |
|
138 |
See: |
|
139 |
||
1522 | 140 |
* https://developer.mozilla.org/en-US/docs/Web/API/console |
1393 | 141 |
* https://developer.mozilla.org/en/Using_the_Web_Console |
142 |
* https://developer.mozilla.org/en-US/docs/Tools/Web_Console |
|
1391 | 143 |
|
144 |
Debugging JavaScript with Firebug. |
|
145 |
---------------------------------- |
|
146 |
||
147 |
With Firebug you can use 'console.log(obj)' for logging. Also output can be grouped with |
|
148 |
console.group("name") to start a new indentation block, and then console.groupEnd(). |
|
149 |
||
150 |
Same but with different coloring do 'console.debug', 'console.info', 'console.warn', and |
|
151 |
'console.error' functions. |
|
152 |
||
153 |
http://getfirebug.com/logging |
|
154 |
logging |
|
155 |
http://getfirebug.com/wiki/index.php/Console_API |
|
156 |
Console API |
|
1393 | 157 |
http://getfirebug.com/wiki/index.php/Command_Line |
158 |
Command Line |
|
159 |
http://getfirebug.com/wiki/index.php/Console_Panel |
|
160 |
Console Panel |
|
1391 | 161 |
|
162 |
dump(). |
|
163 |
------- |
|
164 |
||
165 |
Set in ``about:config`` ``browser.dom.window.dump.enabled`` to ``true``. |
|
166 |
||
167 |
All messages go to native console. On Windows this require ``-console`` option |
|
168 |
for ``firefox.exe``. |
|
169 |
||
170 |
https://developer.mozilla.org/en/DOM/window.dump |
|
171 |
||
172 |
Components.utils.reportError. |
|
173 |
----------------------------- |
|
174 |
||
175 |
Write error msg to Error console (not in Web Console):: |
|
176 |
||
177 |
Components.utils.reportError("msg"); |
|
178 |
// Show the error console. |
|
179 |
toJavaScriptConsole(); |
|
180 |
||
181 |
Firefox 3.x require set preference 'javascript.options.showInConsole' to 'true' |
|
182 |
which is default value fro Firefox 4.x. |
|
183 |
||
184 |
* https://developer.mozilla.org/en/Components.utils.reportError |
|
185 |
||
186 |
Build Firefox from sources. |
|
187 |
=========================== |
|
188 |
||
189 |
https://developer.mozilla.org/en/Build_Documentation |
|
190 |
Build Instructions |
|
191 |
https://developer.mozilla.org/en/Mozilla_Source_Code_%28Mercurial%29 |
|
192 |
Getting Mozilla Source Code Using Mercurial |
|
193 |
||
194 |
Native Firefox debugging. |
|
195 |
========================= |
|
196 |
||
197 |
* https://developer.mozilla.org/en/how_to_get_a_stacktrace_with_windbg |
|
198 |
||
199 |
Adding symbols from Symbol Server. |
|
200 |
---------------------------------- |
|
201 |
||
202 |
Execute in WinDbg:: |
|
203 |
||
204 |
.sympath SRV*c:\symcache\*http://msdl.microsoft.com/download/symbols;SRV*c:\symcache\*http://symbols.mozilla.org/firefox |
|
205 |
||
206 |
or Ctrl+S and add:: |
|
207 |
||
208 |
SRV*c:\symcache\*http://msdl.microsoft.com/download/symbols;SRV*c:\symcache\*http://symbols.mozilla.org/firefox |
|
209 |
||
210 |
See: |
|
211 |
||
212 |
https://developer.mozilla.org/en/Using_the_Mozilla_symbol_server |