I've noticed a curious transformation in my habits over the past several Firefox releases.
I debug sites in both Chrome and Firefox, and very frequently when in Firefox my brain misfires and performs the key combo to open Chrome's devtools (Ctrl+Shift+i) instead of launching Firebug, with the effect of opening Firefox's own built-in devtools. Originally this would elicit nothing more than a grunt of frustration as I fumbled for the F12 key; Firefox's own tools were simply far too primitive to bother with (though I couldn't help but notice how much more responsive they were than Firebug). But as the months wore on and features accumulated ("a network panel, finally!"), I found myself bothering to correct my error less and less frequently. Just today, in fact, I realized that I had happily spent all morning in the built-in tools without ever yearning for Firebug.
That said, there are still lots of things that Firebug still does better (more convenient object inspection in the console, for one). But the built-ins launch so much damn faster and keep my general browsing experience so much more responsive that it's starting to get difficult to justify having Firebug installed at all.
Hey Firefox dev tools team: nice work. Keep it up! :)
Yeah, I'm the exact same way. I now only open Firebug when I have to, because it's so much slower than the built-in tools. Switching between tabs that have Firebug open is painful.
I switched back to Firefox, after a long stint with Chrome, because of things like this...
The Firefox Dev team has really been stepping up their game (relative to the other browsers) and is incredibly receptive to feedback (especially the dev tools). The browser has been getting faster, and the dev tools are starting to be on par, and in some cases, better than Chrome's.
Also, for those appreciate Chrome's aesthetics, the "UX" build is pretty damn sexy these days... and is actually quite stable. I'd give it a strong recommendation!
Style editor needs some work still. For example searching for text there is hard to use. There are no "find next" or "find previous" shortcuts, one has to open a dialog again each time.
And there is no way to search in all style sources at once. Which makes tracking stuff harder if there are many sources provided.
In Aurora, the tools now use Code Mirror as the editor. Along with that change, we now use Code Mirror's searching, so Cmd+G and Cmd+Shift+G will cycle through next/previous search results.
It looks like it slipped under the radar, but I just talked with Heather who has worked on the Style Editor the most, and so it should be back on the radar now :)
Since you asked, here is a list of little things I miss from Chrome Dev Tools (I usually spend 2 to 6 hours a day in chrome dev tools) in random order:
Inspector
1. Use F2 to edit selected DOM element. (currently I have to double click it)
2. When I add css rule I want to see list of available properties right away (and later I want to CRTL+Space to show the same list). For example for text-align: left, right, center, initial, inherit, etc.
3. Use orange/yellow/green to draw selected element regions form margin, border and padding
4. make the tooltip which appears above selected element with its class and id optional.
5. Autocomplete !important keyword in css rules.
Console:
1. Implement one global history for all pages. Use arrow case to browse console entries.
2. When I use this $('div') I want to be able to click on result and find that element in the Inspector tab
Debugger
1. I want to open some loaded JS file, change something, CTRL+S to save it and the code should be live. Scratchpad is confusing to me for this scenario.
2. Unminify/pretify javascript code.
Style Editor:
1. Prettier theme for css files.
Others:
1. Implement Continuous Painting Mode
2. Implement h shorcut to hide/show DOM elements in the Inspector
3. Create Super Lighter theme, which does not have big dark panels everywhere. I tried both themes, but these big dark panels are still there.I like white. I work well on white.
Now that dom elements are editable, this should follow quickly. I'll ping
bgrins, who implemented the edit-as-html stuff.
> 2. When I add css rule I want to see list of available properties right away
(and later I want to CRTL+Space to show the same list). For example for
text-align: left, right, center, initial, inherit, etc.
Not sure I follow exactly what you are getting at. Would you mind filing a bug
with a little more detail? I don't want to describe the wrong thing and/or miss
what is important to you.
> 1. I want to open some loaded JS file, change something, CTRL+S to save it and
the code should be live. Scratchpad is confusing to me for this scenario.
Eventually we want to have completely live editing where you would only need to
hit "save" when you wanted to commit your changes to the filesystem. You'll be
able to register an event listener, trigger it, then decide it does the wrong
thing, change the function body, and trigger it again and see your
changes. Really excited for this.
Right now, the debugger is read only, and the scratchpad is where you can
prototype really quickly. We are integrating the two together, so hopefully it
will be less confusing soon. Eventually we will have live editing of JS and it
will be incredi-awesome :)
> 2. Unminify/pretify javascript code.
Just shipped to Aurora, although at the moment it is very slow. I used escodegen
as a backend for the pretty printing since it already accepts the ASTs
SpiderMonkey creates, however I didn't expect it to be so slow for our use
cases. I wrote a pretty printer[0] that doesn't rely on full parsing and with
performance in mind, that should get uplifted in the next couple days and pretty
printing won't be so slow anymore.
Perhaps this is alleviated now that we are using Code Mirror on Aurora?
> Others: 1. Implement Continuous Painting Mode
We are planning our performance tools right now, and among the problems we want
to solve is identifying what elements and css rules are degrading performance in
your page. We aren't sure that we want to mimic Chrome's solution, though.
> 2. Implement h shorcut to hide/show DOM elements in the Inspector
You can do this now, at least in Nightly. Not sure how long it has been there,
but I am pretty sure it is in Aurora at least.
> 3. Create Super Lighter theme, which does not have big dark panels
everywhere. I tried both themes, but these big dark panels are still there.I
like white. I work well on white.
Agreed. We have mock ups, but AFAIK everyone is busting out features at the
moment rather than working on the theming. I think Paul Rouget is going to
revisit this pretty soon.
Here are a few random things that are still bugging me (using Linux):
1. Please either respect the font sizes I set in the Firefox Preferences, or add a setting to change the font size inside the devtools. Currently the inspector and style panel on the right, among others, seem to use a fixed size that is just tiny enough to be seriously annoying.
2. All URLs everywhere should be clickable, middle-clickable, and have a context menu for these actions as well as other common stuff like copying it to the clipboard. Last time I checked there was no way to get the full URL of a stylesheet, clicking on it would only open the Style Editor which doesn't seem to expose the URL anywhere either.
3. Sometimes the devtools get stuck somehow, i.e. I suddenly can't open the Inspector anymore, or the console wwill stop displaying messages. This happened at least up until FF25, at which point I gave up and installed Firebug again.
4. Please support all different color syntaxes (ideally as in Firebug where I can choose my preferred format and have everything converted to it)
Otherwise it seems you're doing a great job, I just wish you would get the basics right first before adding stuff like a 3D view ;-)
> 1. Please either respect the font sizes I set in the Firefox Preferences, or add a setting to change the font size inside the devtools. Currently the inspector and style panel on the right, among others, seem to use a fixed size that is just tiny enough to be seriously annoying.
In the meantime, you can change the devtools font sizes with Cmd+<+> and Cmd+<->
> 2. All URLs everywhere should be clickable, middle-clickable, and have a context menu for these actions as well as other common stuff like copying it to the clipboard. Last time I checked there was no way to get the full URL of a stylesheet, clicking on it would only open the Style Editor which doesn't seem to expose the URL anywhere either.
Agreed, we have various bugs open in different bugzilla components. Will ping people about it.
> 3. Sometimes the devtools get stuck somehow, i.e. I suddenly can't open the Inspector anymore, or the console wwill stop displaying messages. This happened at least up until FF25, at which point I gave up and installed Firebug again.
Do you want to try out Aurora again? I recall a couple issues like what you described that got fixed (one of which was my fault, woops!) and I'd love to know if you are still experiencing this or if it is groovy now.
If you are still experiencing it, please file a bug!
> 4. Please support all different color syntaxes (ideally as in Firebug where I can choose my preferred format and have everything converted to it)
You mean custom syntax highlighting? Would be nice to have, but honestly probably not a priority. Everyone is very busy trying to bang out features and bug fixes, and even just the two themes we support now feel like a burden (at least to me). Hopefully we can do this sometime in the future, though!
> Otherwise it seems you're doing a great job, I just wish you would get the basics right first before adding stuff like a 3D view ;-)
Thanks! :D
For the record, the 3d view was either a GSoC project or an intern project, and hasn't really had much (basically any) maintenance burden.
On top of that, I think it is cool because it might not teach people who know about the web much, but it has the possibility to excite people who know nothing and make them want to learn more. I first got involved in web dev when I was like 10 or 11 and being able to view source was magical. Hopefully the 3d view helps give people that same feeling now days of being able to see a little under the hood and get them excited and draw them in.
Thanks for the answer! I'll take another look at the latest Aurora.
As for point 4, at the moment colors are always displayed with rgb() syntax, even if they were specified as a hex-string or with hsl() syntax in the stylesheet. In Firebug there's a dropdown menu on the style tab where you can choose between "Colors as Hex", "Colors as RGB" and "Colors as HSL".
Ah yes, I see! You can actually configure that via the options tab (the sprocket to the left of the console tab).
Soon, we will show you the colors as they were authored by default. I can't seem to track down the bug, but I know the inspector folks have it on their radar.
I like in Firebug how you can select the value of a property and then up/down arrow key through all the valid values. Any chance that is coming to the built in tools?
You can do that with numeric values in the inspector right now, and also combine with Alt and Shift to increment/decrement by tenths or tens respectively.
I debug sites in both Chrome and Firefox, and very frequently when in Firefox my brain misfires and performs the key combo to open Chrome's devtools (Ctrl+Shift+i) instead of launching Firebug, with the effect of opening Firefox's own built-in devtools. Originally this would elicit nothing more than a grunt of frustration as I fumbled for the F12 key; Firefox's own tools were simply far too primitive to bother with (though I couldn't help but notice how much more responsive they were than Firebug). But as the months wore on and features accumulated ("a network panel, finally!"), I found myself bothering to correct my error less and less frequently. Just today, in fact, I realized that I had happily spent all morning in the built-in tools without ever yearning for Firebug.
That said, there are still lots of things that Firebug still does better (more convenient object inspection in the console, for one). But the built-ins launch so much damn faster and keep my general browsing experience so much more responsive that it's starting to get difficult to justify having Firebug installed at all.
Hey Firefox dev tools team: nice work. Keep it up! :)