7 ms·

Firefox Developer Tool Features for Firefox 23

122 points by rnyman 13y ago

spindritf 13y ago
Is anyone running Aurora on Ubuntu from their PPA? Does it replace regular Firefox or installs under a different name/path? How rampant are the incompatibility issues with add-ons?
- dkuntz2 13y ago
  Not running it in Ubuntu, but used to run it on Arch. Or should be given a new executable, firefox-aurora. As for add-ons, most developers seem to mark comparability for future versions, so you shouldn't have to worry too much. You can always edit them to say they're compatible with the version of Firefox you're running and see if they have issues.
- shared4you 13y ago
  I'm running Aurora from Ubuntu PPA (but on Linux Mint). Absolutely no issues. Yes, it replaces regular Firefox. Add-on compatibility is excellent though; can't remember any addon causing me trouble whatsoever. I'm currently on Firefox 23 from Aurora channel.
- fafner 13y ago
  It's installed under a different name: firefox-trunk. It does not replace the existing firefox.
mavroprovato 13y ago
So now the Firefox Developer tools is now on par feature-wise with Firebug? I think that the Network monitor is the only thing that was missing.
- pixard 13y ago
  The only thing that's missing and is very important (from a front end designer point of view) is showing paddings / margins when you mouse over / select elements in the Inspector.
  - oulipian 13y ago
    Firefox already has that, there's a little "Box Model" tab with a little diagram showing padding, margins, and so on.
    - PavlovsCat 13y ago
      It doesn't show them on the page itself though.
- speg 13y ago
  What about editing files in the editor? Being able to adjust CSS/JS files in Chrome is great.
  - robcee 13y ago
    You can use the Style Editor to modify CSS and see the changes applied. We're going to be adding edit support to the Debugger soon.
- bobsy 13y ago
  Adding an attribute to an existing element currently seems impossible unless I am really missing something. Say you have.. <div> In any other tools you can double click it and press tab to add an attribute. Most have a right click option to edit as well. With firefox this simple task isn't possible. So adding a class to the above element requires you to at least add class="" to the element...
  - evilpie 13y ago
    You have to double-click on the bit of whitespace before the closing ">".
  - mikeratcliffe 13y ago
    Just edit a current attribute, add a space and type the new attribute name and value.
oneandoneis2 13y ago
Is it yet worth trying to make the shift from all-Firebug to all-FF-Dev-Tools? I hate having two sets of tools to do one job..
- amarsahinovic 13y ago
  There are two things that annoy me in FF Dev tools for now: - It uses RGB to show colors instead of hex (I think they are working on this) - There is no visual indication of margin/padding for the selected element on the page (it is shown in a box inside dev tools)
  - heycam 13y ago
    Yeah, I just started today on adding the ability (internally) for style declarations to expose colours in the syntax they were originally specified in (bug 731271), which the dev tools people will then be able to use.
  - jlmendezbonini 13y ago
    For the RGB issue see https://bugzilla.mozilla.org/show_bug.cgi?id=775135 https://bugzilla.mozilla.org/show_bug.cgi?id=775135 tl;dr: The bug is on hold until a Mozilla employee comes back from vacations.
    - bzbarsky 13y ago
      Though to be fair nothing is stopping someone else from stepping up and doing the work. It's just on hold from the point of view of full-time employees on the devtools team until then...
- ionelm 13y ago
  You can't customize shortcuts, the default ones are pretty bad - forcing you to use two hands to operate the inspector (on qwerty layout at least). I've given up completely on Firefox as a developer's browser ... Chrome's dev tools are better, faster - they don't crash your browser or make it unusable like Firebug.
k__ 13y ago
Waiting to switch back from chrome to firefox after all this "Google dropping <product>" stuff. But the Chrome dev-tools are simply amazing, Firebug always felt clunky to me. So I'm looking forward to this update :)
- sherbet 13y ago
  (Chrome devotee here). I spend an hour recently with FF-22 trying to debug a regression in FF by using the built-in dev tools; it seems to lack the ONLY feature that I actually want (and to be honest I feel so bemused that it's not there that I think I'm being dumb and missed it): I can't execute a JS statement in the context of the current stack frame. I'm sure the scratchpad must be able to do this, because otherwise it seems like its the most useless debugging console I've seen in some time.
  - moonboots 13y ago
    I had the same experience. Fortunately, FF23 adds this feature (under the heading 'Web Console in Debugger Frame' in the linked post).
    - mihai_sucan 13y ago
      That feature means you can set a breakpoint in any javascript and while you are paused on a frame you can execute JS in the web console. The code you type executes in the stackframe you have selected in the debugger. (this did not work in ff22 or older)
  - the_mitsuhiko 13y ago
    Nightly does that now.
  - mihai_sucan 13y ago
    We will add a way to select the iframe/frame where to execute JS. This feature is currently in planning.
- thejosh 13y ago
pcx66 13y ago
I really love the latest FF23 dev tools, been using Nightly for quite a while now. The dark theme is nice. But I think the keyboard-bindings need some work. - Chrome has this nifty feature where pressing 'Esc' in any of the dev tools brings the Web Console. - Also, consider this use case. Let's say I enable dev tools on a page, use the Web Console, do some investigation and focus back on the page leaving the dev tools enabled. Now I want to get the focus back to Web Console, but using Ctrl-Shift-K disables the Web Console all together and I will have to re-enable it. Some key binding that brings focus back to the dev tools would be nice.
leeoniya 13y ago
is there a way to auto-clear console on refresh? i hate the current auto-persist behavior.
- mihai_sucan 13y ago
  This is a high priority feature for us. Expect a fix soon.
modeless 13y ago
Finally, the debugger has a REPL! Hallelujah! That's the main feature I was waiting for.
kibwen 13y ago
One question: what does the new "Security" log level in the console watch for? Congratulations to the tools team, I'm loving the network panel and the object inspector. And the built-in tools are so much more responsive than Firebug that I'm tempted to switch right now. There are just two things that I'm immediately missing: 1) When I log objects, Firebug prints a preview such as ["a", "b", "c"] or {foo: 1, bar: 2} to the console, whereas the built-in tools print [object Array] or [object Object] and force me to rely on the object inspector (which I'd really just like to use for very large objects, rather than every single little object). 2) I like to try out snippets of code that are longer than a single line, but I'm not a huge fan of the scratchpad (can't be docked, no autocomplete). Firebug allows the console input to toggle between single-line and multi-line, and I'd love if the built-in tools had this as well. I'm sure I'll stumble across more differences, but the tools really are looking great. Congratulations again on coming so far in so short a time.
- robcee 13y ago
  The Security filter shows CSP errors and mixed content warnings among other things. I expect the security team will add more messages to that section of the console over time. We're going to revamp the Console's output area fairly significantly in the next few months. Better Object output is high on the list of changes. (you can use console.dir(object) for an inlined inspector view, or inspect(object) in the console's jsterm input line to view the object in the sidebar) Shift-Enter turns the Console's input line into a multi-line input. We're hoping to add autocomplete to the Scratchpad down the road too.
  - kibwen 13y ago
    Ah, that all sounds wonderful, thanks. Shift-enter for multi-line input is actually nicer than Firebug's modal toggle (though less discoverable). And since I think 23 actually broke Firebug's console, I'll certainly be getting more acquainted with the built-in tools for a little while. :)
wonnage 13y ago
The one thing keeping me from using FF dev tools is the fact that there's no interactive console in the debugger. Seems like you have to instead create watch expressions for everything you want to check. Even GDB lets you poke around after a breakpoint... For anything Javascript-related you're still gonna have to install Firebug.
- past 13y ago
  As mentioned on the hacks post, ever since Firefox 23 the web console is actually working on the same context as the debugger, when execution is paused on a breakpoint or debugger statement. You can use all the familiar tools in there to examine the current state of the page.
akeeble 13y ago
Not sure if it was observed enough but check the "Responsive Design View" (Ctrl+Shift+M) which allows you to write CSS for all browsers at the same time

122 points by rnyman 13y ago

Is anyone running Aurora on Ubuntu from their PPA? Does it replace regular Firefox or installs under a different name/path? How rampant are the incompatibility issues with add-ons?

dkuntz2 13y ago
Not running it in Ubuntu, but used to run it on Arch. Or should be given a new executable, firefox-aurora. As for add-ons, most developers seem to mark comparability for future versions, so you shouldn't have to worry too much. You can always edit them to say they're compatible with the version of Firefox you're running and see if they have issues.
shared4you 13y ago
I'm running Aurora from Ubuntu PPA (but on Linux Mint). Absolutely no issues. Yes, it replaces regular Firefox. Add-on compatibility is excellent though; can't remember any addon causing me trouble whatsoever. I'm currently on Firefox 23 from Aurora channel.
fafner 13y ago
It's installed under a different name: firefox-trunk. It does not replace the existing firefox.

mavroprovato 13y ago

So now the Firefox Developer tools is now on par feature-wise with Firebug? I think that the Network monitor is the only thing that was missing.

pixard 13y ago
The only thing that's missing and is very important (from a front end designer point of view) is showing paddings / margins when you mouse over / select elements in the Inspector.
- oulipian 13y ago
  Firefox already has that, there's a little "Box Model" tab with a little diagram showing padding, margins, and so on.
  - PavlovsCat 13y ago
    It doesn't show them on the page itself though.
speg 13y ago
What about editing files in the editor? Being able to adjust CSS/JS files in Chrome is great.
- robcee 13y ago
  You can use the Style Editor to modify CSS and see the changes applied. We're going to be adding edit support to the Debugger soon.
bobsy 13y ago
Adding an attribute to an existing element currently seems impossible unless I am really missing something. Say you have.. <div> In any other tools you can double click it and press tab to add an attribute. Most have a right click option to edit as well. With firefox this simple task isn't possible. So adding a class to the above element requires you to at least add class="" to the element...
- evilpie 13y ago
  You have to double-click on the bit of whitespace before the closing ">".
- mikeratcliffe 13y ago
  Just edit a current attribute, add a space and type the new attribute name and value.

oneandoneis2 13y ago

Is it yet worth trying to make the shift from all-Firebug to all-FF-Dev-Tools? I hate having two sets of tools to do one job..

amarsahinovic 13y ago
There are two things that annoy me in FF Dev tools for now: - It uses RGB to show colors instead of hex (I think they are working on this) - There is no visual indication of margin/padding for the selected element on the page (it is shown in a box inside dev tools)
- heycam 13y ago
  Yeah, I just started today on adding the ability (internally) for style declarations to expose colours in the syntax they were originally specified in (bug 731271), which the dev tools people will then be able to use.
- jlmendezbonini 13y ago
  For the RGB issue see https://bugzilla.mozilla.org/show_bug.cgi?id=775135 https://bugzilla.mozilla.org/show_bug.cgi?id=775135 tl;dr: The bug is on hold until a Mozilla employee comes back from vacations.
  - bzbarsky 13y ago
    Though to be fair nothing is stopping someone else from stepping up and doing the work. It's just on hold from the point of view of full-time employees on the devtools team until then...
ionelm 13y ago
You can't customize shortcuts, the default ones are pretty bad - forcing you to use two hands to operate the inspector (on qwerty layout at least). I've given up completely on Firefox as a developer's browser ... Chrome's dev tools are better, faster - they don't crash your browser or make it unusable like Firebug.

k__ 13y ago

Waiting to switch back from chrome to firefox after all this "Google dropping <product>" stuff. But the Chrome dev-tools are simply amazing, Firebug always felt clunky to me. So I'm looking forward to this update :)

sherbet 13y ago
(Chrome devotee here). I spend an hour recently with FF-22 trying to debug a regression in FF by using the built-in dev tools; it seems to lack the ONLY feature that I actually want (and to be honest I feel so bemused that it's not there that I think I'm being dumb and missed it): I can't execute a JS statement in the context of the current stack frame. I'm sure the scratchpad must be able to do this, because otherwise it seems like its the most useless debugging console I've seen in some time.
- moonboots 13y ago
  I had the same experience. Fortunately, FF23 adds this feature (under the heading 'Web Console in Debugger Frame' in the linked post).
  - mihai_sucan 13y ago
    That feature means you can set a breakpoint in any javascript and while you are paused on a frame you can execute JS in the web console. The code you type executes in the stackframe you have selected in the debugger. (this did not work in ff22 or older)
- the_mitsuhiko 13y ago
  Nightly does that now.
- mihai_sucan 13y ago
  We will add a way to select the iframe/frame where to execute JS. This feature is currently in planning.
thejosh 13y ago

pcx66 13y ago

I really love the latest FF23 dev tools, been using Nightly for quite a while now. The dark theme is nice. But I think the keyboard-bindings need some work. - Chrome has this nifty feature where pressing 'Esc' in any of the dev tools brings the Web Console. - Also, consider this use case. Let's say I enable dev tools on a page, use the Web Console, do some investigation and focus back on the page leaving the dev tools enabled. Now I want to get the focus back to Web Console, but using Ctrl-Shift-K disables the Web Console all together and I will have to re-enable it. Some key binding that brings focus back to the dev tools would be nice.

leeoniya 13y ago

is there a way to auto-clear console on refresh? i hate the current auto-persist behavior.

mihai_sucan 13y ago
This is a high priority feature for us. Expect a fix soon.

modeless 13y ago

Finally, the debugger has a REPL! Hallelujah! That's the main feature I was waiting for.

kibwen 13y ago

One question: what does the new "Security" log level in the console watch for? Congratulations to the tools team, I'm loving the network panel and the object inspector. And the built-in tools are so much more responsive than Firebug that I'm tempted to switch right now. There are just two things that I'm immediately missing: 1) When I log objects, Firebug prints a preview such as ["a", "b", "c"] or {foo: 1, bar: 2} to the console, whereas the built-in tools print [object Array] or [object Object] and force me to rely on the object inspector (which I'd really just like to use for very large objects, rather than every single little object). 2) I like to try out snippets of code that are longer than a single line, but I'm not a huge fan of the scratchpad (can't be docked, no autocomplete). Firebug allows the console input to toggle between single-line and multi-line, and I'd love if the built-in tools had this as well. I'm sure I'll stumble across more differences, but the tools really are looking great. Congratulations again on coming so far in so short a time.

robcee 13y ago
The Security filter shows CSP errors and mixed content warnings among other things. I expect the security team will add more messages to that section of the console over time. We're going to revamp the Console's output area fairly significantly in the next few months. Better Object output is high on the list of changes. (you can use console.dir(object) for an inlined inspector view, or inspect(object) in the console's jsterm input line to view the object in the sidebar) Shift-Enter turns the Console's input line into a multi-line input. We're hoping to add autocomplete to the Scratchpad down the road too.
- kibwen 13y ago
  Ah, that all sounds wonderful, thanks. Shift-enter for multi-line input is actually nicer than Firebug's modal toggle (though less discoverable). And since I think 23 actually broke Firebug's console, I'll certainly be getting more acquainted with the built-in tools for a little while. :)

wonnage 13y ago

The one thing keeping me from using FF dev tools is the fact that there's no interactive console in the debugger. Seems like you have to instead create watch expressions for everything you want to check. Even GDB lets you poke around after a breakpoint... For anything Javascript-related you're still gonna have to install Firebug.

past 13y ago
As mentioned on the hacks post, ever since Firefox 23 the web console is actually working on the same context as the debugger, when execution is paused on a breakpoint or debugger statement. You can use all the familiar tools in there to examine the current state of the page.

akeeble 13y ago

Not sure if it was observed enough but check the "Responsive Design View" (Ctrl+Shift+M) which allows you to write CSS for all browsers at the same time