5 ms·

Firefox Developer Tools, Part 2: Scratchpad and Style Editor

109 points by rnyman 13y ago

rubyn00bie 13y 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/ http://people.mozilla.org/~jwein/ux-nightly/
- Aldo_MX 13y 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.
  - nnethercote 13y ago
    "Receptive to feedback" isn't the same as "do everything I want".
    - Aldo_MX 13y ago
      Neither it's the same as "we listen what we want".
shmerl 13y 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.
- mnemonik 13y 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 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? :)
  - fletchowns 13y 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?
    - mnemonik 13y ago
      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. Would definitely be cool to have this for non-numerical properties as well, filed https://bugzilla.mozilla.org/show_bug.cgi?id=934661 https://bugzilla.mozilla.org/show_bug.cgi?id=934661
      - fletchowns 13y ago
        Didn't know you could alt and shift for higher precision on the numeric values, love it! Thanks for filing the bug :)
  - EastSmith 13y 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
kibwen 13y 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 13y 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 13y 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 13y ago
Still waiting for the Style Editor's search not to suck complete and utter ass...
- robcee 13y ago
  see https://news.ycombinator.com/item?id=6671062 https://news.ycombinator.com/item?id=6671062

109 points by rnyman 13y 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/ http://people.mozilla.org/~jwein/ux-nightly/

Aldo_MX 13y 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.
- nnethercote 13y ago
  "Receptive to feedback" isn't the same as "do everything I want".
  - Aldo_MX 13y ago
    Neither it's the same as "we listen what we want".

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

mnemonik 13y 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 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? :)
- fletchowns 13y 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?
  - mnemonik 13y ago
    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. Would definitely be cool to have this for non-numerical properties as well, filed https://bugzilla.mozilla.org/show_bug.cgi?id=934661 https://bugzilla.mozilla.org/show_bug.cgi?id=934661
    - fletchowns 13y ago
      Didn't know you could alt and shift for higher precision on the numeric values, love it! Thanks for filing the bug :)
- EastSmith 13y 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

kibwen 13y 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 13y 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 13y 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 13y ago

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

robcee 13y ago
see https://news.ycombinator.com/item?id=6671062 https://news.ycombinator.com/item?id=6671062