DevTools Onboarding session for Firefox developers

Developer Tools
#1

Hello!

We’re preparing an intro for DevTools for Firefox developers and we’d like to get your questions asked (or your topics covered).

So if you’re a new engineer that needs to use DevTools and have questions about how to be more productive, or if there are confusing aspects… we’re interested in all these!

And if you’re a seasoned Firefox developer and would like to tell us how you use DevTools, we would love to hear about these as well, as they’re wildly different from the usual use case we normally look at (web developers).

Help us make a great resource that will help lots of other developers! :slight_smile:

5 Likes
#2

I have a talk about it http://mte90.github.io/Talk-DevTools/ but I think that we need to see a comparison with the Chrom* features because is what the developers ask to evaluate if they need to switch.

2 Likes
#3

Thank you for the link, Daniele!

The talk is targeted towards Firefox developers, not web developers, so we don’t necessarily need to compare with other browsers for them to ‘switch’ :slight_smile:

#4

Things/tricks I use heavily:

  • the ‘four squares’ button to keep panels/menus open so you can use the inspector / change styles on them without the popup disappearing all the time.
  • debugger; JS keyword, especially in automated tests with the --jsdebugger commandline argument
  • watches in the JS debugger
  • toggling specific CSS properties on/off in the inspector with the checkboxes
  • to toggle quickly between a block of styles in the style editor, add /**/ after the block, and then insert /* in front of it. Use undo/redo shortcuts to toggle on/off.
1 Like
#5

Thank you, Gijs - this is ace! I might reach out directly to you to ask you more questions about your workflow, if that’s ok!

#6

It would be useful for all developers to know how to connect to a content page in Firefox for Android. It’s not hard, but it’s the kind of thing that’s easier once you’ve seen it… and is far outside of the regular flow for most Desktop engineers.

1 Like
#7

[off-topic] not sure if the feature is well known so I thought I’d mention it here: in the style editor, you can select text and use CTRL+/ (or CMD+/ on OSX) to comment out all the selected lines.

#8

Things I do with our DevTools for browser hacking:

  • Starting with --wait-for-jsdebugger if debugging something that happens early in start-up
  • Connecting the DevTools from a separate machine. This is especially useful when debugging things that require me to maintain focus on something.
  • The Browser Content Toolbox is invaluable when debugging content process scripts. Using it in tandem with the Browser Toolbox when debugging messaging between content and parent processes is invaluable.
#9

Super useful, thank you all \o/