Firefox Developer Tools, Part 2: Scratchpad and Style Editor(hacks.mozilla.org)
hacks.mozilla.org
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/
28 comments
> 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.
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.
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!
http://people.mozilla.org/~jwein/ux-nightly/
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/
... and is incredibly receptive to feedback ...
"Receptive to feedback" isn't the same as "do everything I want".
Neither it's the same as "we listen what we want".
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.
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.
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? :)
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? :)
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
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
Thanks for the detailed feedback/requests!
> 1. Use F2 to edit selected DOM element. (currently I have to double click it)
Follow https://bugzilla.mozilla.org/show_bug.cgi?id=892275
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.
https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&c...
> 3. Use orange/yellow/green to draw selected element regions form margin, border and padding
We are overhauling the highlighter here: https://bugzilla.mozilla.org/show_bug.cgi?id=663778
Here is a mock up that should be fairly close to how it will look: https://bugzilla.mozilla.org/attachment.cgi?id=807164
> 4. make the tooltip which appears above selected element with its class and id optional.
Filed https://bugzilla.mozilla.org/show_bug.cgi?id=934697
> 5. Autocomplete !important keyword in css rules.
Filed https://bugzilla.mozilla.org/show_bug.cgi?id=934695
> 1. Implement one global history for all pages. Use arrow case to browse console entries.
We do use arrows to browse console history, not sure what you mean there?
What makes you want to share console history between all tabs?
> 2. When I use this $('div') I want to be able to click on result and find that element in the Inspector tab
Agreed! I think there is a bug filed somewhere but, here is another that will probably just get duped over and then we will know the original bug: https://bugzilla.mozilla.org/show_bug.cgi?id=934700
> 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.
[0] https://github.com/mozilla/pretty-fast
> Style Editor: 1. Prettier theme for css files.
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 the mock ups: https://people.mozilla.org/~shorlander/mockups/devTools/ux-r...
Thanks again for the feedback! We value it a ton :)
> 1. Use F2 to edit selected DOM element. (currently I have to double click it)
Follow https://bugzilla.mozilla.org/show_bug.cgi?id=892275
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.
https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&c...
> 3. Use orange/yellow/green to draw selected element regions form margin, border and padding
We are overhauling the highlighter here: https://bugzilla.mozilla.org/show_bug.cgi?id=663778
Here is a mock up that should be fairly close to how it will look: https://bugzilla.mozilla.org/attachment.cgi?id=807164
> 4. make the tooltip which appears above selected element with its class and id optional.
Filed https://bugzilla.mozilla.org/show_bug.cgi?id=934697
> 5. Autocomplete !important keyword in css rules.
Filed https://bugzilla.mozilla.org/show_bug.cgi?id=934695
> 1. Implement one global history for all pages. Use arrow case to browse console entries.
We do use arrows to browse console history, not sure what you mean there?
What makes you want to share console history between all tabs?
> 2. When I use this $('div') I want to be able to click on result and find that element in the Inspector tab
Agreed! I think there is a bug filed somewhere but, here is another that will probably just get duped over and then we will know the original bug: https://bugzilla.mozilla.org/show_bug.cgi?id=934700
> 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.
[0] https://github.com/mozilla/pretty-fast
> Style Editor: 1. Prettier theme for css files.
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 the mock ups: https://people.mozilla.org/~shorlander/mockups/devTools/ux-r...
Thanks again for the feedback! We value it a ton :)
> Here are the mock ups: https://people.mozilla.org/~shorlander/mockups/devTools/ux-r...
Regarding theming, here is a bug that can be followed for updates: https://bugzilla.mozilla.org/show_bug.cgi?id=916766.
Regarding theming, here is a bug that can be followed for updates: https://bugzilla.mozilla.org/show_bug.cgi?id=916766.
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.
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.
We have a bug open for respecting the system font size here: 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...
> 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!
We have a bug open for respecting the system font size here: 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...
> 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!
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".
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.
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.
Yep just noticed it in the latest devtools blog post, the color swatches are awesome too!
mnemonik: two thumbs up for the great responses you are giving in this thread!
Thanks! Congrats on the low level tools team! I look forward to having more APIs to really get deep into the platform :)
Regarding point #2: URLs will soon be clickable in the markup, rule and computed views.
> Anything else? :)
A disable cache checkbox in the developer tools options.
https://bugzilla.mozilla.org/show_bug.cgi?id=651888
A disable cache checkbox in the developer tools options.
https://bugzilla.mozilla.org/show_bug.cgi?id=651888
It looks like the main work is happening in https://bugzilla.mozilla.org/show_bug.cgi?id=864098 which is marked as blocking that bug.
I'll ping Mike and see what the status is.
I'll ping Mike and see what the status is.
Disabling the cache for a single tab still does not work. Maybe somebody could find a way to workaround this though.
We just don't want to disable the cache globally as this could cause issues in other windows.
We just don't want to disable the cache globally as this could cause issues in other windows.
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.
Would definitely be cool to have this for non-numerical properties as well, filed https://bugzilla.mozilla.org/show_bug.cgi?id=934661
Would definitely be cool to have this for non-numerical properties as well, filed https://bugzilla.mozilla.org/show_bug.cgi?id=934661
Didn't know you could alt and shift for higher precision on the numeric values, love it!
Thanks for filing the bug :)
Thanks for filing the bug :)
Still waiting for the Style Editor's search not to suck complete and utter ass...
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! :)