

Firefox Developer Tools, Part 2: Scratchpad and Style Editor - rnyman
https://hacks.mozilla.org/2013/11/reintroducing-the-firefox-developer-tools-part-2-the-scratchpad-and-the-style-editor/

======
kibwen
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! :)

~~~
ahoge
> _Ctrl+Shift+i_

Try Ctrl+Shift+C. It jumps straight into select/inspect mode.

Prior to Firefox 25 this would open Firebug. Now it opens Firefox's dev tools
(also select/inspect mode).

I rebound Firebug's shortcut to Ctrl+Shift+X. This way I can still use it if I
want.

------
rubyn00bie
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!

[http://people.mozilla.org/~jwein/ux-
nightly/](http://people.mozilla.org/~jwein/ux-nightly/)

~~~
Aldo_MX

      ... and is incredibly receptive to feedback ...
    

I'll take this with a grain of salt due to being slapped with WontFix multiple
times in the past.

~~~
nnethercote
"Receptive to feedback" isn't the same as "do everything I want".

~~~
Aldo_MX
Neither it's the same as "we listen what we want".

------
shmerl
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.

~~~
mnemonik
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.

I filed a bug for a more discoverable UI:
[https://bugzilla.mozilla.org/show_bug.cgi?id=934624](https://bugzilla.mozilla.org/show_bug.cgi?id=934624)

Here is this bug for searching across all sheets:
[https://bugzilla.mozilla.org/show_bug.cgi?id=932093](https://bugzilla.mozilla.org/show_bug.cgi?id=932093)

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 :)

Anything else? :)

~~~
toupeira
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 ;-)

~~~
mnemonik
> 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.

We have a bug open for respecting the system font size here:
[https://bugzilla.mozilla.org/show_bug.cgi?id=760825](https://bugzilla.mozilla.org/show_bug.cgi?id=760825)

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!

[https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&c...](https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools)

> 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.

Cheers!

~~~
toupeira
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".

~~~
mnemonik
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.

~~~
toupeira
Yep just noticed it in the latest devtools blog post, the color swatches are
awesome too!

------
Dirlewanger
Still waiting for the Style Editor's search not to suck complete and utter
ass...

~~~
robcee
see
[https://news.ycombinator.com/item?id=6671062](https://news.ycombinator.com/item?id=6671062)

