Confirmed users
66
edits
DevTools/GetInvolved: Difference between revisions
no edit summary
No edit summary |
|||
| Line 73: | Line 73: | ||
What is the <code>-p development</code>? It is a flag telling Firefox to use a different [https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data profile], named "development" (this name can be anything you want). If it does not exist the first time you run it, Firefox will open a popup and you can create a new profile with the name you passed in. This will prevent you from seeing an error message telling you that you need to close your main browser window, and it will let you make settings changes without worrying about messing up your normal profile. | What is the <code>-p development</code>? It is a flag telling Firefox to use a different [https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data profile], named "development" (this name can be anything you want). If it does not exist the first time you run it, Firefox will open a popup and you can create a new profile with the name you passed in. This will prevent you from seeing an error message telling you that you need to close your main browser window, and it will let you make settings changes without worrying about messing up your normal profile. | ||
Once this command runs, you should see a new Firefox window, called "Nightly". You | Once this command runs, you should see a new Firefox window, called "Nightly". You will want to make a couple of quick changes to the profile. | ||
Open DevTools, and click the "Toolbox Option" gear in the top left. Make sure the following two options are checked: '''Enable Chrome Debugging''' and '''Enable Remote Debugging'''. These settings allow you to use the [https://developer.mozilla.org/en-US/docs/Debugging_JavaScript#JavaScript_Debugger browser debugger] to set breakpoints inside of the DevTools code, 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"]] | |||
Depending on what you are working on, you may want to make some more changes to your profile. If you type '''about:config''' in the URL bar, click through the warning page, and search for '''devtools''' you can see some of them. | |||
# These two were set by you checking the boxes in the DevTools options | |||
'''devtools.chrome.enabled''' = true | '''devtools.chrome.enabled''' = true | ||
'''devtools.debugger.remote-enabled''' = true | '''devtools.debugger.remote-enabled''' = true | ||
This setting prints all packets sent over the remote debugging protocol to stdout: | # This setting prints all packets sent over the remote debugging protocol to stdout: | ||
'''devtools.debugger.log''' = true | '''devtools.debugger.log''' = true | ||