Firefox Developer Tools, Part 2: Scratchpad and Style Editor

https://hacks.mozilla.org/2013/11/reintroducing-the-firefox-developer-tools-part-2-the-scratchpad-and-the-style-editor/

by rnyman • 13 years ago

109 28 13 years ago

hacks.mozilla.org

rubyn00bie• 13 years ago

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/

Aldo_MX2• 13 years ago

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

nnethercote2• 13 years ago

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

shmerl• 13 years ago

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.

mnemonik7• 13 years ago

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

Here is this bug for searching across all sheets: 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? :)

fletchowns2• 13 years ago

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?

EastSmith• 13 years ago

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.

Thanks

y0ghur7_xxx• 13 years ago

Anything else? :)

A disable cache checkbox in the developer tools options.

https://bugzilla.mozilla.org/show_bug.cgi?id=651888

toupeira3• 13 years ago

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

kibwen• 13 years ago

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

RussianCow• 13 years ago

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.

ahoge• 13 years ago

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.

Dirlewanger• 13 years ago

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

robcee• 13 years ago

see https://news.ycombinator.com/item?id=6671062

Firefox Developer Tools, Part 2: Scratchpad and Style Editor

Related Stories