6 ms·

Developer Tools Update – Firefox 22

134 points by Fletch137 14y ago

TazeTSchnitzel 14y ago
Great. I still wish FF's Console was as good as WebKit's, though.
- Ygg2 14y ago
  What's wrong with it? Honest question? I've used both a bit but I see no big discrepancies?
  - Skalman 14y ago
    For me the biggest problem is that it doesn't clear upon reload. Having to keep track of which messages/errors came from the previous page is really annoying. Edit: Also, viewing objects is inferior compared to Chrome's tools.
    - AndrewDucker 14y ago
      I'd go with that. I can't think of any reason why I'd want to see the information from a previous load - I just want to see what's going on right now, clearly.
      - nathanstitt 14y ago
        I can because I just found that very useful. Think of code that has an error in an window.onbeforeunload handler. By the time the console displays the error the page has switched. Without being able to view the errors from the previous page, this would have been impossible to catch.
    - mihai_sucan 14y ago
      We just changed the way you can inspect objects in the Web Console, check out a Firefox Nightly. For more details you can read: http://www.robodesign.ro/mihai/blog/web-console-improvements-and-the-new-browser-console http://www.robodesign.ro/mihai/blog/web-console-improvements... Also, we have an open bug about clearing the web console after page reload. See: https://bugzilla.mozilla.org/show_bug.cgi?id=705921 https://bugzilla.mozilla.org/show_bug.cgi?id=705921
      - Skalman 14y ago
        Okay, nice. Did you also remove the need for clicking those tiny arrows to expand?
        mihai_sucan 14y ago
        Yes.
      - Ygg2 14y ago
        You might want the ability to clear console on page reload as an option. It seems useful and people should be able to enable/disable it (or was it added to new nightly).
    - FuzzyDunlop 14y ago
      I also think that clicking on the link to an error should go to the debugger panel, rather than opening the source in another popup.
      - past 14y ago
        This is already implemented in Firefox 22.
  - ConceitedCode 14y ago
    At first it felt significantly worse for me, but as I started using it there is no significant difference. Webkit's is prettier and I like the being able to refresh to clear it though.
  - jasonlotito 14y ago
    Breakpoints are limited - In chrome, I can watch for events and have it break on them. If I'm wanting to debug minified code, in chrome I make it readable and set breakpoints. Would be nice to edit the JavaScript as well in the process of debugging it. JS Breakpoints currently (in nightly) block loading of the JavaScript file the breakpoint is in. The file is loaded, just not visible in the debugger. From the tools, no way to see data like cookies or local storage (Cookies can be seen on the network tab, but it's not the same). Chrome has this in a Resources tab. Chrome's timeline. The style editing options in the inspector are limited. Sure, the style editor is a colorized text editor, but there is no easy way to edit styles as in Chrome. Chrome, I can set states and work with them without worry. Editing CSS is also easier with auto-complete. Basically, editing in CSS in Chrome is better than in Firefox. There are a lot of little things. They are catching up. I can get some of these things in Firebug, but then I'd be using Firebug. Finally, the console is limited. In Chrome, I can bring up the console on any section. This is important, as it lets me use the console while looking at the information I'm currently working with for reference. There are things I like, and I'm looking forward to the day it's comparable and meets my needs.
    - Offler 14y ago
      "Would be nice to edit the JavaScript as well in the process of debugging it. JS Breakpoints currently (in nightly) block loading of the JavaScript file the breakpoint is in. The file is loaded, just not visible in the debugger." This is huge for me, it makes debugging impossible when loading.
    - mihai_sucan 14y ago
      Each of the aspects you tackle are known and we are working towards improvements in each area. Even myself as a web developer I find things that we are missing - I understand your pains here! Break on events and break on XHR is something we really want to have ASAP. I expect these will be among the first ones to land - from the things you mention. Also, make sure you try the new net monitor in Firefox Nightlies.
      - jasonlotito 14y ago
  - richardwhiuk 14y ago
    In Chrome, you can choose to pause on uncaught exceptions, as opposed to all exceptions or none, which is the case in Ffx
- Fletch137 14y ago
  I must admit that I find Chrome's devtools the easiest to use, but that's probably because it's what I'm most used to. I work at a web dev company and there's a pretty obvious split between people who prefer FF or Chrome devtools. Every time someone says "but you can do this with x devtools but not in y devtools", it's met with a member of the other party saying something to the effect of "yes you can! it's here!". I think it's just a matter of opinion/what you're used to.
  - Joeri 14y ago
    You can't get a formatted treeview of raw JSON post data in chrome inspector, only the response can be inspected in this way. Makes debugging broken uploads difficult at times. That's pretty much the only feature of firebug I miss. The only chrome inspector feature I know of that firebug doesn't have a real equivalent for is the heap snapshot and compare tool. Really handy to track down memory leaks. Other than that it's indeed down to personal preference.
- aidos 14y ago
  One thing I've found frustrating with Webkits console is the introduction of shortcuts recently (year ago?). In particular I'm used to hitting cmd-L to get to the onmibar but if I'm in the tools it does something else now (modal controla = bad). Then I have to use the mouse, which makes me sad :(
  - thejosh 14y ago
    ctrl+1/2/3 to switch between open tabs instead changes to different tabs is annoying too
    - paulirish 14y ago
      We're going to remove that. :)
      - thejosh 14y ago
        Or the ability to set our own hotkeys? Is this possible?
      - paulirish 13y ago
        It's now removed. Over in a devtools experiment now.
        thejosh 13y ago
        Thanks for the follow up, using the dev build in Ubuntu 13.04 it works perfectly.
- ukandy 14y ago
  The re-painted feature is a very nice idea. It will really be useful when you it's available in a number of browsers, so that you can compare the results. I'd rather have a cross browser developer console. It would be easier to have the information in the same in format when debugging browser issues.
- velodrome 14y ago
  I am waiting eagerly for the network inspector. Preview (nightly): http://bits.potch.me/netpanel.png http://bits.potch.me/netpanel.png
  - TazeTSchnitzel 14y ago
    I like the look of that. It's compact and seems to use space more efficiently than Chrome's.
    - Schlaefer 14y ago
      No it does not [1]. It's one of the reasons I don't like the FF dev tools: it looks nice, but in a useable setup it feels like this: http://www.mlponies.com/wordpress/wp-content/uploads/2012/05/officebars.png http://www.mlponies.com/wordpress/wp-content/uploads/2012/05... [1] http://i.imgur.com/DzOS7bB.png http://i.imgur.com/DzOS7bB.png
      - xionon 14y ago
        The only difference I see is: * method and name column swapped * green/yellow status icons added (probably 200/304?) * dark color scheme vs light color scheme Is there something I'm missing? Because it sure doesn't seem like the MS Word super-toolbar you compared it to. Or is it the tab icons? Chrome recently disabled those by default, and I'd agree that they do seem like clutter. Edit: Misread the comment you were replying to. I thought you were comparing the number of icons and tabs, but you're just talking about the size of the elements. Firefox is slightly larger, yeah.
        Schlaefer 14y ago
        There are imho unnecessary padding and huge font sizes. For example: http://imgur.com/Cvzky1K.png http://imgur.com/Cvzky1K.png 1. Nice contrast, good padding 2. Why not the same padding as 1.? 3. To much vertical padding. Contrast: are those deactivated? 4. To much vertical padding. 5. Why is this font so huge? Or why is this sidebar font so huge: http://imgur.com/DZO4l4D.png http://imgur.com/DZO4l4D.png But I have to admit, the situation got better not worse in the last versions. But Chrome imho also has the smarter solution in the network panel: workflow over more panes. You click a request and you see the details in the main area replacing the waterfall, not adding another pane fighting for space. [edit] All a little bit smaller on the left: http://imgur.com/DooYnFY.png http://imgur.com/DooYnFY.png
pieter 14y ago
Biggest thing I'm missing in the FF Aurora builds is a console in the Inspector / Debugger panes. Having to switch to the console pane all the time gets annoying quickly.
- mihai_sucan 14y ago
  This is something the team is looking into implementing. There's a ton of work we need to do and we have that in mind as well.
- FuzzyDunlop 14y ago
  They also look like tabs and I find it frustrating that the tab switching shortcuts don't work on them.
obeattie 14y ago
Font panel. YES.
shocks 14y ago
Please, stop making the inspector lose focus immediately after you open it. It's very annoying.
sirn 14y ago
Is there any plan to expose some of these new features (subpanes, docking mode) to the developer command line tools as well? Being able to do something like this would be very nice: inspect body --font console open --side (That aside, developer command line tool[1] is already a big productivity booster. You should check it out if you haven't.) https://hacks.mozilla.org/2012/08/new-firefox-command-line-helps-you-develop-faster/ https://hacks.mozilla.org/2012/08/new-firefox-command-line-h...
- mikeratcliffe 14y ago
  That sounds like a good idea. We are going to give the command line it's own tab. This way output remains visible when navigating around the page. The popup panels are a nightmare to deal with ... particularly on some OSes.
mariusmg 14y ago
Honest question.....why work on these features when we have Firebug ?
- xionon 14y ago
  In my experience, debugger tools built into the browser run much faster and with much lower overhead than Firebug.
- pavpanchekha 14y ago
  If I recall correctly, Firebug had to do nastier and nastier black magic in order to hook into the correct parts of the rendering engine and provide the data it had. This meant both that Firebug was a poor experience to develop for, and also that it constrained Mozilla to not break certain internal interfaces, even though they weren't designed for public consumption. A tool like this really does need to go into the browser as a first-class thing, because the information it needs access to is very low-level. So, the Firefox team is making their own. As a side benefit, it should be much easier to write, since they have the power to actually change Firefox to make the information they want easily available.
- soapdog 14y ago
  the new tools are more integrated, are built by mozilla teams, come with every copy of firefox and are useful to debug new firefox os apps.
chrismccord 14y ago
I've been giving the nightly builds a real shot at replacing the main browser I do my development in, but I've been sorely missing a shortcut to clear the console output, ie ⌘K in the webkit inspector. As far as I know, the only way to clear the console is either clicking "clear" or invoking clear(); in the console itself.
akavlie 14y ago
That font inspector looks awesome. I've wanted exactly this several times before. It's often surprisingly difficult to pin down exactly what font the browser chooses. You can look at the CSS font declaration (which is often hard enough to find in complex CSS), but what if the browser didn't go with the first option?
- robin_reala 14y ago
  Well, if you’re using Firebug you install FireFontFamily[1], which crosses out the unused fonts in the CSS inspector. [1] https://addons.mozilla.org/en-Us/firefox/addon/firefontfamily/ https://addons.mozilla.org/en-Us/firefox/addon/firefontfamil...
timtadh 14y ago
It used to be that I could close the inspector in FF by hitting escape. I would love to get that functionality back it makes it super easy to go in and out of it. (Ctrl+Shift+I) do thing (ESC)
ecaron 14y ago
Looks like they're finally making my add-on - https://addons.mozilla.org/en-us/firefox/addon/font-finder/ https://addons.mozilla.org/en-us/firefox/addon/font-finder/ - obsolete. Frankly, all I can say is about time. This is something that I would've expected to be able to do long ago, and I welcome my new font analysis overlord.

134 points by Fletch137 14y ago

TazeTSchnitzel 14y ago

Great. I still wish FF's Console was as good as WebKit's, though.

Ygg2 14y ago
What's wrong with it? Honest question? I've used both a bit but I see no big discrepancies?
- Skalman 14y ago
  For me the biggest problem is that it doesn't clear upon reload. Having to keep track of which messages/errors came from the previous page is really annoying. Edit: Also, viewing objects is inferior compared to Chrome's tools.
  - AndrewDucker 14y ago
    I'd go with that. I can't think of any reason why I'd want to see the information from a previous load - I just want to see what's going on right now, clearly.
    - nathanstitt 14y ago
      I can because I just found that very useful. Think of code that has an error in an window.onbeforeunload handler. By the time the console displays the error the page has switched. Without being able to view the errors from the previous page, this would have been impossible to catch.
  - mihai_sucan 14y ago
    We just changed the way you can inspect objects in the Web Console, check out a Firefox Nightly. For more details you can read: http://www.robodesign.ro/mihai/blog/web-console-improvements-and-the-new-browser-console http://www.robodesign.ro/mihai/blog/web-console-improvements... Also, we have an open bug about clearing the web console after page reload. See: https://bugzilla.mozilla.org/show_bug.cgi?id=705921 https://bugzilla.mozilla.org/show_bug.cgi?id=705921
    - Skalman 14y ago
      Okay, nice. Did you also remove the need for clicking those tiny arrows to expand?
      - mihai_sucan 14y ago
        Yes.
    - Ygg2 14y ago
      You might want the ability to clear console on page reload as an option. It seems useful and people should be able to enable/disable it (or was it added to new nightly).
  - FuzzyDunlop 14y ago
    I also think that clicking on the link to an error should go to the debugger panel, rather than opening the source in another popup.
    - past 14y ago
      This is already implemented in Firefox 22.
- ConceitedCode 14y ago
  At first it felt significantly worse for me, but as I started using it there is no significant difference. Webkit's is prettier and I like the being able to refresh to clear it though.
- jasonlotito 14y ago
  Breakpoints are limited - In chrome, I can watch for events and have it break on them. If I'm wanting to debug minified code, in chrome I make it readable and set breakpoints. Would be nice to edit the JavaScript as well in the process of debugging it. JS Breakpoints currently (in nightly) block loading of the JavaScript file the breakpoint is in. The file is loaded, just not visible in the debugger. From the tools, no way to see data like cookies or local storage (Cookies can be seen on the network tab, but it's not the same). Chrome has this in a Resources tab. Chrome's timeline. The style editing options in the inspector are limited. Sure, the style editor is a colorized text editor, but there is no easy way to edit styles as in Chrome. Chrome, I can set states and work with them without worry. Editing CSS is also easier with auto-complete. Basically, editing in CSS in Chrome is better than in Firefox. There are a lot of little things. They are catching up. I can get some of these things in Firebug, but then I'd be using Firebug. Finally, the console is limited. In Chrome, I can bring up the console on any section. This is important, as it lets me use the console while looking at the information I'm currently working with for reference. There are things I like, and I'm looking forward to the day it's comparable and meets my needs.
  - Offler 14y ago
    "Would be nice to edit the JavaScript as well in the process of debugging it. JS Breakpoints currently (in nightly) block loading of the JavaScript file the breakpoint is in. The file is loaded, just not visible in the debugger." This is huge for me, it makes debugging impossible when loading.
  - mihai_sucan 14y ago
    Each of the aspects you tackle are known and we are working towards improvements in each area. Even myself as a web developer I find things that we are missing - I understand your pains here! Break on events and break on XHR is something we really want to have ASAP. I expect these will be among the first ones to land - from the things you mention. Also, make sure you try the new net monitor in Firefox Nightlies.
    - jasonlotito 14y ago
- richardwhiuk 14y ago
  In Chrome, you can choose to pause on uncaught exceptions, as opposed to all exceptions or none, which is the case in Ffx
Fletch137 14y ago
I must admit that I find Chrome's devtools the easiest to use, but that's probably because it's what I'm most used to. I work at a web dev company and there's a pretty obvious split between people who prefer FF or Chrome devtools. Every time someone says "but you can do this with x devtools but not in y devtools", it's met with a member of the other party saying something to the effect of "yes you can! it's here!". I think it's just a matter of opinion/what you're used to.
- Joeri 14y ago
  You can't get a formatted treeview of raw JSON post data in chrome inspector, only the response can be inspected in this way. Makes debugging broken uploads difficult at times. That's pretty much the only feature of firebug I miss. The only chrome inspector feature I know of that firebug doesn't have a real equivalent for is the heap snapshot and compare tool. Really handy to track down memory leaks. Other than that it's indeed down to personal preference.
aidos 14y ago
One thing I've found frustrating with Webkits console is the introduction of shortcuts recently (year ago?). In particular I'm used to hitting cmd-L to get to the onmibar but if I'm in the tools it does something else now (modal controla = bad). Then I have to use the mouse, which makes me sad :(
- thejosh 14y ago
  ctrl+1/2/3 to switch between open tabs instead changes to different tabs is annoying too
  - paulirish 14y ago
    We're going to remove that. :)
    - thejosh 14y ago
      Or the ability to set our own hotkeys? Is this possible?
    - paulirish 13y ago
      It's now removed. Over in a devtools experiment now.
      - thejosh 13y ago
        Thanks for the follow up, using the dev build in Ubuntu 13.04 it works perfectly.
ukandy 14y ago
The re-painted feature is a very nice idea. It will really be useful when you it's available in a number of browsers, so that you can compare the results. I'd rather have a cross browser developer console. It would be easier to have the information in the same in format when debugging browser issues.
velodrome 14y ago
I am waiting eagerly for the network inspector. Preview (nightly): http://bits.potch.me/netpanel.png http://bits.potch.me/netpanel.png
- TazeTSchnitzel 14y ago
  I like the look of that. It's compact and seems to use space more efficiently than Chrome's.
  - Schlaefer 14y ago
    No it does not [1]. It's one of the reasons I don't like the FF dev tools: it looks nice, but in a useable setup it feels like this: http://www.mlponies.com/wordpress/wp-content/uploads/2012/05/officebars.png http://www.mlponies.com/wordpress/wp-content/uploads/2012/05... [1] http://i.imgur.com/DzOS7bB.png http://i.imgur.com/DzOS7bB.png
    - xionon 14y ago
      The only difference I see is: * method and name column swapped * green/yellow status icons added (probably 200/304?) * dark color scheme vs light color scheme Is there something I'm missing? Because it sure doesn't seem like the MS Word super-toolbar you compared it to. Or is it the tab icons? Chrome recently disabled those by default, and I'd agree that they do seem like clutter. Edit: Misread the comment you were replying to. I thought you were comparing the number of icons and tabs, but you're just talking about the size of the elements. Firefox is slightly larger, yeah.
      - Schlaefer 14y ago
        There are imho unnecessary padding and huge font sizes. For example: http://imgur.com/Cvzky1K.png http://imgur.com/Cvzky1K.png 1. Nice contrast, good padding 2. Why not the same padding as 1.? 3. To much vertical padding. Contrast: are those deactivated? 4. To much vertical padding. 5. Why is this font so huge? Or why is this sidebar font so huge: http://imgur.com/DZO4l4D.png http://imgur.com/DZO4l4D.png But I have to admit, the situation got better not worse in the last versions. But Chrome imho also has the smarter solution in the network panel: workflow over more panes. You click a request and you see the details in the main area replacing the waterfall, not adding another pane fighting for space. [edit] All a little bit smaller on the left: http://imgur.com/DooYnFY.png http://imgur.com/DooYnFY.png

pieter 14y ago

Biggest thing I'm missing in the FF Aurora builds is a console in the Inspector / Debugger panes. Having to switch to the console pane all the time gets annoying quickly.

mihai_sucan 14y ago
This is something the team is looking into implementing. There's a ton of work we need to do and we have that in mind as well.
FuzzyDunlop 14y ago
They also look like tabs and I find it frustrating that the tab switching shortcuts don't work on them.

obeattie 14y ago

Font panel. YES.

shocks 14y ago

Please, stop making the inspector lose focus immediately after you open it. It's very annoying.

sirn 14y ago

Is there any plan to expose some of these new features (subpanes, docking mode) to the developer command line tools as well? Being able to do something like this would be very nice: inspect body --font console open --side (That aside, developer command line tool[1] is already a big productivity booster. You should check it out if you haven't.) https://hacks.mozilla.org/2012/08/new-firefox-command-line-helps-you-develop-faster/ https://hacks.mozilla.org/2012/08/new-firefox-command-line-h...

mikeratcliffe 14y ago
That sounds like a good idea. We are going to give the command line it's own tab. This way output remains visible when navigating around the page. The popup panels are a nightmare to deal with ... particularly on some OSes.

mariusmg 14y ago

Honest question.....why work on these features when we have Firebug ?

xionon 14y ago
In my experience, debugger tools built into the browser run much faster and with much lower overhead than Firebug.
pavpanchekha 14y ago
If I recall correctly, Firebug had to do nastier and nastier black magic in order to hook into the correct parts of the rendering engine and provide the data it had. This meant both that Firebug was a poor experience to develop for, and also that it constrained Mozilla to not break certain internal interfaces, even though they weren't designed for public consumption. A tool like this really does need to go into the browser as a first-class thing, because the information it needs access to is very low-level. So, the Firefox team is making their own. As a side benefit, it should be much easier to write, since they have the power to actually change Firefox to make the information they want easily available.
soapdog 14y ago
the new tools are more integrated, are built by mozilla teams, come with every copy of firefox and are useful to debug new firefox os apps.

chrismccord 14y ago

I've been giving the nightly builds a real shot at replacing the main browser I do my development in, but I've been sorely missing a shortcut to clear the console output, ie ⌘K in the webkit inspector. As far as I know, the only way to clear the console is either clicking "clear" or invoking clear(); in the console itself.

akavlie 14y ago

That font inspector looks awesome. I've wanted exactly this several times before. It's often surprisingly difficult to pin down exactly what font the browser chooses. You can look at the CSS font declaration (which is often hard enough to find in complex CSS), but what if the browser didn't go with the first option?

robin_reala 14y ago
Well, if you’re using Firebug you install FireFontFamily[1], which crosses out the unused fonts in the CSS inspector. [1] https://addons.mozilla.org/en-Us/firefox/addon/firefontfamily/ https://addons.mozilla.org/en-Us/firefox/addon/firefontfamil...

timtadh 14y ago

It used to be that I could close the inspector in FF by hitting escape. I would love to get that functionality back it makes it super easy to go in and out of it. (Ctrl+Shift+I) do thing (ESC)

ecaron 14y ago

Looks like they're finally making my add-on - https://addons.mozilla.org/en-us/firefox/addon/font-finder/ https://addons.mozilla.org/en-us/firefox/addon/font-finder/ - obsolete. Frankly, all I can say is about time. This is something that I would've expected to be able to do long ago, and I welcome my new font analysis overlord.