|
|
| Line 7: |
Line 7: |
| = Configuring your dev profile = | | = Configuring your dev profile = |
|
| |
|
| You will want to make a couple of quick changes to the profile you use when running your version of Firefox.
| | These instructions have been moved to https://devtools-html.github.io/docs/building-development-profile.html |
| | |
| == Enable remote debugging and the Browser Toolbox ==
| |
| | |
| Open DevTools, and click the "Toolbox Options" gear icon in the top right (the image underneath is outdated). Make sure the following two options are checked:
| |
| | |
| * '''Enable browser chrome and add-on debugging toolboxes'''
| |
| * '''Enable remote debugging'''
| |
| | |
| These settings allow you to use the [https://developer.mozilla.org/docs/Tools/Browser_Toolbox browser toolbox] to set breakpoints inside of the DevTools code, inspect the DevTools themselves, and let you run the [https://developer.mozilla.org/en-US/docs/Tools/Scratchpad Scratchpad] in the ''Browser'' environment. | |
| | |
| [[Image:DevToolsDeveloperSettings.png|center|600px|Settings for developer tools - "Enable Chrome Debugging" and "Enable Remote Debugging"]]
| |
| | |
| You might also want to change the following preference in '''<tt>about:config</tt>''' to <code>false</code>:
| |
| | |
| * '''devtools.debugger.prompt-connection'''
| |
| | |
| This will get rid of the prompt displayed every time you open the browser toolbox.
| |
| | |
| == Enabling DevTools Logging ==
| |
| | |
| Depending on what you are working on, you may want to make some changes to your profile to enable more logging. If you type '''<tt>about:config</tt>''' in the URL bar, click through the warning page, and search for '''<tt>devtools</tt>''' you can see some of them.
| |
| | |
| Add the global "dump" function to all windows which logs strings to stdout.
| |
| | |
| '''browser.dom.window.dump.enabled''' = true
| |
| | |
| Dumps all packets sent over the remote debugging protocol to stdout (requires browser.dom.window.dump.enabled):
| |
| | |
| '''devtools.debugger.log''' = true
| |
| | |
| Log every event notification from the EventEmitter class (devtools/shared/event-emitter.js) (requires browser.dom.window.dump.enabled)
| |
| | |
| '''devtools.dump.emit''' = true
| |
| | |
| Restart the browser to apply configuration changes.
| |
| | |
| You may also be interested in the remote protocol inspector add-on: https://github.com/firebug/rdp-inspector/wiki
| |
| | |
| == Enabling DevTools Assertions ==
| |
| | |
| Highly recommended for DevTools hackers!
| |
| | |
| Add this to your '''<tt>.mozconfig</tt>''':
| |
| | |
| ac_add_options --enable-debug-js-modules
| |
| | |
| Assert your own invariants like this:
| |
| | |
| const { assert } = require("devtools/shared/DevToolsUtils");
| |
| // ...
| |
| assert(1 + 1 === 2, "I really hope this is true...");
| |
| | |
| When assertions are enabled, assertion failures are fatal, log console warnings, and throw errors.
| |
| | |
| When assertions are not enabled, the <tt>assert</tt> function is a no-op.
| |
| | |
| It also enables the "debug" builds of certain third party libraries, such as React.
| |
|
| |
|
| = Developer Tools Directories Overview = | | = Developer Tools Directories Overview = |