8 ms·

Firefox – tons of tools for web developers

231 points by Garbage 15y ago

c4urself 15y ago
A bunch of these simply don't work in later releases of Firefox
- AndrewDucker 15y ago
  Can you give examples?
- throwaway64 15y ago
  They all appear compatible in Firefox 8.x, can you be more specific? edit: why have i been down voted, i took the time, and specifically checked :/
  - waitwhat 15y ago
    It wasn't me but... Don't overthink a single downvote: the up and down arrows are awfully close, and it's easy to misclick, particularly on a tablet.
- wazoox 15y ago
  Doesn't look so; OTOH a bunch of these only work on MS Windows.
mweibel 15y ago
So will the new Dev. Tools replace the functionality of Firebug or not?
- joewalker 15y ago
  I'm not sure that anyone has a definative answer to that question right now. The new tools are interesting because they do things in a different way, but there is a lot they don't do, so we're supporting both. It's possible that one day Firebug will be totally superceeded. It's possible that both tools will have separate audiences for some time. It's possible that the new native tools will be a total flop (although I have a vested interest in making sure that doesn't happen!)
  - AndrewDucker 15y ago
    Bringing the new functionality into Firefox, where it can be more exhaustively slimmed down and the primary team is responsible for it makes sense to me. Heck, if the basic functionality is there then Firebug can be written to take advantage of those APIs, which would be a win all round.
    - mweibel 15y ago
      Regarding #2: Yeah, that would be really great. Could also lead to less memory consumed
      - JanOdvarko 15y ago
        I am hard working to fix all Firebug memory leaks (and did fix some of them recently). What I really need is a simple scenario showing that Firebug leaks. That helps me a lot! Any input is appreciated, please post here: https://groups.google.com/forum/#!forum/firebug https://groups.google.com/forum/#!forum/firebug Honza
        mkopinsky 15y ago
        How am I to tell whether leaks are from Firefox or Firebug? What I know is that after a full day developing Firefox will use 800MB of RAM, and the only way to get rid of that is to close the entire process. I use Firebug heavily and I know that _something_ is leaking somewhere.
        mweibel 15y ago
        That's nice to hear! I'll take a look on how to help. As mkopinsky points out it's sometimes hard to tell what really leaks memory. I can tell the same thing as he, but I think it has been improved a lot lately. Sometimes I had after some time working around 1.5GB Memory usage, but this is better now.
    - JanOdvarko 15y ago
      Precisely, that's the intention. Honza
jarofgreen 15y ago
Interesting/worrying comment at the end about the future of Firebug alleging there is only one developer working on it and Mozilla have all but abandoned it. Anyone able to confirm/deny/comment on the matter?
- tzury 15y ago
  13 Jan Honza Odvarko 2011-11-09 06:03:27 PST ... (given that I am the only one maintaining the entire Firebug project now). https://bugzilla.mozilla.org/show_bug.cgi?id=699528#c13 https://bugzilla.mozilla.org/show_bug.cgi?id=699528#c13
  - past 15y ago
    That comment taken out of context can be quite alarming, indeed. Firebug, until recently, had two developers who were paid to work full time on it (jjb from IBM and Honza from Mozilla) and a number of people who contributed in their spare time. Now it's down to one full-time developer paid to work on it (Honza) and a number of people who still contribute in their own time.
  - JanOdvarko 15y ago
    Just to clarify, while I am the only one full time developer, there is bunch of other contributors that are doing great work on Firebug! I am also a member of the Mozilla dev-tools team and one of the Firebug's goals in the future is to reuse Firefox built-in tools and components. This way, we can reduce amount of work on Firebug side and also make sure that APIs of these built-in tools are well designed. So, Firebug would still be a Firefox extension, but built on top of much better APIs, adding advanced features (e.g. those that are not suitable to be natively in Firefox). It's also an advantage for other dev-tools that can appear (as Firefox extensions) - especially for those that integrate with Firebug. Honza
- AndrewDucker 15y ago
  Was it a Mozilla project in the first place? I thought it was just a very popular third-party addon?
prez 15y ago
Wow, the CSS Reloader add-on is awesome! This could've save me a couple of hours if I had it earlier. https://addons.mozilla.org/en-US/firefox/addon/css-reloader/ https://addons.mozilla.org/en-US/firefox/addon/css-reloader/
- oops 15y ago
  I've been using LiveReload+Guard for this on Rails projects. It'll reload CSS as soon as the file changes on disk without any keypress required. If necessary it'll reload the whole page. It's very handy. There's a 2.x version that's a standalone OS X app and handles compiling a bunch of things like LESS, Sass, etc. but I haven't used it. 1.x https://github.com/mockko/livereload https://github.com/mockko/livereload 2.x http://livereload.com http://livereload.com
- nzjames 15y ago
  The ReCSS bookmarklet does a pretty good job of this too. http://david.dojotoolkit.org/recss.html http://david.dojotoolkit.org/recss.html
elisee 15y ago
I have found the Chrome dev tools to be much better usability-wise than anything Firebug had to offer. I also find it suspicious that Firebug is so heavy in terms of performance & memory, compared to the always-enabled chrome dev tools. Anyway it's good to see Mozilla is investing in this area by integrating tools right in the browser. Keep it up!
- plq 15y ago
  A quick google shows that there's still no way to disable browser cache in Chrome. How do you work around that problem? Or is it already fixed?
  - jasonlotito 15y ago
    Open the preferences, lower right hand corner icon that looks like a gear, and select the "Disable cache" option under Network.
  - grayrest 15y ago
    Open dev tools, click on the gear in the lower right, it's an option in the overlay menu.
- enobrev 15y ago
  I generally agree. The primary thing I find myself going back to Firebug for is debugging ajax calls, since I get the fully expandable request / response info inline along with console output. Chromium can show that an ajax call was made inline, but the link goes to the Network tab, and unfortunately doesn't auto-select the referenced call.
  - losvedir 15y ago
    Holy crap, I think Chrome can do that, too. I upvoted you because I agreed; AJAX was what I went back to Firefox for. However, a different comment in this thread mentioned the Chrome Developer Tools preferences (a little gears icon in the bottom right corner), which I'd never noticed before. Sure enough, clicking it revealed the options 1) Log XMLHttpRequests and 2)Preserve log upon navigation. Checking those (which were unchecked by default) gave a HUGE amount of info on the AJAX calls that I just tested. Maybe it's not what you're talking about, but it was a big find for me.
brianbreslin 15y ago
if you were to install all of those plugins/add-ons simultaneously your computer would grind to a halt from RAM usage.
- demetris 15y ago
  I would be surprised if that were the case. I made a clean Firefox profile and installed and enabled everything in the selection except the Firebug addons and the HTML validator, which does not support Linux. That is, 47 extensions in total. The machine is an old box from 2004 with an AMD64 3000+ processor and 2 gigabytes of RAM, running Debian Sid 64bit. In this old box, with all 47 extensions enabled, Firefox starts in less than 5 seconds and takes about 175 MB of memory. But even if installing 47 extensions brought Firefox to a halt, why would you need to install all of them? This is simply a collection of recommended extensions, not a set that no developer can do without.
Jasber 15y ago
Somewhat related, LiveReload (http://livereload.com/ http://livereload.com/) has made the biggest impact in the way I develop recently. It feels a lot like the way notch developed with hot swapping during Lundum Dare.
jroseattle 15y ago
Our team has basically abandoned Firefox in favor of Chrome. Our team consists of front-end, HTML/JS/CSS types as well as server-side devs. I'm surprised, but every member of the team independently has punted on Firefox. For some, it was the extensions. For others, it was the RAM consumption. With the new release schedule, it seems every time I would open FF with a new version to pull, some extension no longer works. It's purely anecdotal, but it was enough to annoy the bejeezus out of us that we simply switched over to Chrome.
- jeremyswank 15y ago
  if you use [add-on compatibility reporter](https://addons.mozilla.org/en-US/firefox/addon/add-on-compatibility-reporter/ https://addons.mozilla.org/en-US/firefox/addon/add-on-compat...) then you can tell firefox to use 'incompatible' extensions anyway. most of the time they work just fine.
  - e1ven 15y ago
    It the newest Aurora build of Firefox, it's even easier. In about:config, toggle extensions.strictCompatibility to False.
  - jroseattle 15y ago
    Good to know, thank you. Of course, there's the potential incompatibility of the incompatibility reporter, but I digress.
- ootachi 15y ago
  Marking add-ons compatible by default is planned and implemented for FF10 (off by default, but it'll be turned on by default assuming all goes well).
- re_todd 15y ago
  Firefox was becoming slow for me and a real pain to use, until I lowered the browser.history_expire_sites in "about:config" from 40k down to 10k. I'll probably lower it even more. http://kb.mozillazine.org/Browser.history_expire_sites http://kb.mozillazine.org/Browser.history_expire_sites
nestlequ1k 15y ago
For fun I messed around with Firefox 8 with Firebug. Crashed in less than 5 min. Lot of work is still ahead... Chrome has Firefox beat
sleighboy 15y ago
It's not Firefox-specific, but if inspecting and modifying HTTP requests/responses is what you want to do you should try Charles ( http://www.charlesproxy.com/ http://www.charlesproxy.com/ ).
deleted 15y ago
[deleted]
rch 15y ago
Using Dragonfly in Opera makes my life pretty darn easy. It would be very difficult to convince me to switch to either FF or Chrome at this point.
- gaoshan 15y ago
  I'm intrigued by Dragonfly. Why do you like it better than what is available in Chrome? Basically, what are its selling points?
  - rch 15y ago
    Unfortunately, I am totally unfamiliar with any of the alternatives to Dragonfly. And the selling points would read like the feature list of any debugger. All I can really say is that with Dragonfly, I don't mind working with JavaScript anymore -- it is tightly integrated with the browser and does its job well.
mhartl 15y ago
It's a shame there's no good in-browser HTML validator (for any browser, so far as I can tell). HTML Validator used to be perfect, but Firefox started changing too rapidly for it to work consistently, and the current version only works on Windows (!). Does anyone know of a browser/plugin combination that validates pages automatically (preferably configurable to run only on localhost)? The original HTML Validator was perfect, with a small icon in the bottom right of the screen indicating valid or invalid. Total Validator is OK, but it's not in-page, so that (for example) it's very difficult to validate pages behind a login wall.
- Skalman 15y ago
  Firefox actually has partial validation built-in: view source and see if something is red. This validation is future-compatible, meaning that it won't find all errors (such as unknown tags or attributes).
  - elisee 15y ago
    Just to be clear, Firefox doesn't have a validator built-in. It's just syntax highlighting, and it has recently been enhanced to use the same HTML5 parser as the rest of the browser. So yeah you can see some of the errors you might make in your markup but it's very far from what an actual HTML5 validator should do. It doesn't even report all parse errors (and isn't meant to). I'm pointing this out because of a recent blog post by Mozilla dev Henri Sivonen which says: "Please do not advertise the new View Source implementation by saying that Firefox now has a validator in the View Source window." (see full post here for all the details, there's a section named Limitations: http://hsivonen.iki.fi/view-source/ http://hsivonen.iki.fi/view-source/)
    - Skalman 15y ago
      Thanks for the clarification. I've mostly been using it to find some quick, obvious errors, such as tag mismatches.
- gchucky 15y ago
  I'm in the same boat as you. My computer at work is a Mac, and I was unable to use the HTML Validator plugin. The solution is to go to the plugin's forums - http://www.htmlpedia.org/phpBB/viewforum.php?f=11&sid=e9e977bdf5cf2f4614809ffb6833fbcb http://www.htmlpedia.org/phpBB/viewforum.php?f=11&sid=e9.... One of the guys there has been really good in taking the origin plugin and compiling it for other operating systems.
czervik 15y ago
The only thing I open Firefox for anymore is SQLite Manager. What really made me fall in love with Chrome developer tools is using them to write Chrome extensions.

231 points by Garbage 15y ago

c4urself 15y ago

A bunch of these simply don't work in later releases of Firefox

AndrewDucker 15y ago
Can you give examples?
throwaway64 15y ago
They all appear compatible in Firefox 8.x, can you be more specific? edit: why have i been down voted, i took the time, and specifically checked :/
- waitwhat 15y ago
  It wasn't me but... Don't overthink a single downvote: the up and down arrows are awfully close, and it's easy to misclick, particularly on a tablet.
wazoox 15y ago
Doesn't look so; OTOH a bunch of these only work on MS Windows.

mweibel 15y ago

So will the new Dev. Tools replace the functionality of Firebug or not?

joewalker 15y ago
I'm not sure that anyone has a definative answer to that question right now. The new tools are interesting because they do things in a different way, but there is a lot they don't do, so we're supporting both. It's possible that one day Firebug will be totally superceeded. It's possible that both tools will have separate audiences for some time. It's possible that the new native tools will be a total flop (although I have a vested interest in making sure that doesn't happen!)
- AndrewDucker 15y ago
  Bringing the new functionality into Firefox, where it can be more exhaustively slimmed down and the primary team is responsible for it makes sense to me. Heck, if the basic functionality is there then Firebug can be written to take advantage of those APIs, which would be a win all round.
  - mweibel 15y ago
    Regarding #2: Yeah, that would be really great. Could also lead to less memory consumed
    - JanOdvarko 15y ago
      I am hard working to fix all Firebug memory leaks (and did fix some of them recently). What I really need is a simple scenario showing that Firebug leaks. That helps me a lot! Any input is appreciated, please post here: https://groups.google.com/forum/#!forum/firebug https://groups.google.com/forum/#!forum/firebug Honza
      - mkopinsky 15y ago
        How am I to tell whether leaks are from Firefox or Firebug? What I know is that after a full day developing Firefox will use 800MB of RAM, and the only way to get rid of that is to close the entire process. I use Firebug heavily and I know that _something_ is leaking somewhere.
      - mweibel 15y ago
        That's nice to hear! I'll take a look on how to help. As mkopinsky points out it's sometimes hard to tell what really leaks memory. I can tell the same thing as he, but I think it has been improved a lot lately. Sometimes I had after some time working around 1.5GB Memory usage, but this is better now.
  - JanOdvarko 15y ago
    Precisely, that's the intention. Honza

jarofgreen 15y ago

Interesting/worrying comment at the end about the future of Firebug alleging there is only one developer working on it and Mozilla have all but abandoned it. Anyone able to confirm/deny/comment on the matter?

tzury 15y ago
13 Jan Honza Odvarko 2011-11-09 06:03:27 PST ... (given that I am the only one maintaining the entire Firebug project now). https://bugzilla.mozilla.org/show_bug.cgi?id=699528#c13 https://bugzilla.mozilla.org/show_bug.cgi?id=699528#c13
- past 15y ago
  That comment taken out of context can be quite alarming, indeed. Firebug, until recently, had two developers who were paid to work full time on it (jjb from IBM and Honza from Mozilla) and a number of people who contributed in their spare time. Now it's down to one full-time developer paid to work on it (Honza) and a number of people who still contribute in their own time.
- JanOdvarko 15y ago
  Just to clarify, while I am the only one full time developer, there is bunch of other contributors that are doing great work on Firebug! I am also a member of the Mozilla dev-tools team and one of the Firebug's goals in the future is to reuse Firefox built-in tools and components. This way, we can reduce amount of work on Firebug side and also make sure that APIs of these built-in tools are well designed. So, Firebug would still be a Firefox extension, but built on top of much better APIs, adding advanced features (e.g. those that are not suitable to be natively in Firefox). It's also an advantage for other dev-tools that can appear (as Firefox extensions) - especially for those that integrate with Firebug. Honza
AndrewDucker 15y ago
Was it a Mozilla project in the first place? I thought it was just a very popular third-party addon?

prez 15y ago

Wow, the CSS Reloader add-on is awesome! This could've save me a couple of hours if I had it earlier. https://addons.mozilla.org/en-US/firefox/addon/css-reloader/ https://addons.mozilla.org/en-US/firefox/addon/css-reloader/

oops 15y ago
I've been using LiveReload+Guard for this on Rails projects. It'll reload CSS as soon as the file changes on disk without any keypress required. If necessary it'll reload the whole page. It's very handy. There's a 2.x version that's a standalone OS X app and handles compiling a bunch of things like LESS, Sass, etc. but I haven't used it. 1.x https://github.com/mockko/livereload https://github.com/mockko/livereload 2.x http://livereload.com http://livereload.com
nzjames 15y ago
The ReCSS bookmarklet does a pretty good job of this too. http://david.dojotoolkit.org/recss.html http://david.dojotoolkit.org/recss.html

elisee 15y ago

I have found the Chrome dev tools to be much better usability-wise than anything Firebug had to offer. I also find it suspicious that Firebug is so heavy in terms of performance & memory, compared to the always-enabled chrome dev tools. Anyway it's good to see Mozilla is investing in this area by integrating tools right in the browser. Keep it up!

plq 15y ago
A quick google shows that there's still no way to disable browser cache in Chrome. How do you work around that problem? Or is it already fixed?
- jasonlotito 15y ago
  Open the preferences, lower right hand corner icon that looks like a gear, and select the "Disable cache" option under Network.
- grayrest 15y ago
  Open dev tools, click on the gear in the lower right, it's an option in the overlay menu.
enobrev 15y ago
I generally agree. The primary thing I find myself going back to Firebug for is debugging ajax calls, since I get the fully expandable request / response info inline along with console output. Chromium can show that an ajax call was made inline, but the link goes to the Network tab, and unfortunately doesn't auto-select the referenced call.
- losvedir 15y ago
  Holy crap, I think Chrome can do that, too. I upvoted you because I agreed; AJAX was what I went back to Firefox for. However, a different comment in this thread mentioned the Chrome Developer Tools preferences (a little gears icon in the bottom right corner), which I'd never noticed before. Sure enough, clicking it revealed the options 1) Log XMLHttpRequests and 2)Preserve log upon navigation. Checking those (which were unchecked by default) gave a HUGE amount of info on the AJAX calls that I just tested. Maybe it's not what you're talking about, but it was a big find for me.

brianbreslin 15y ago

if you were to install all of those plugins/add-ons simultaneously your computer would grind to a halt from RAM usage.

demetris 15y ago
I would be surprised if that were the case. I made a clean Firefox profile and installed and enabled everything in the selection except the Firebug addons and the HTML validator, which does not support Linux. That is, 47 extensions in total. The machine is an old box from 2004 with an AMD64 3000+ processor and 2 gigabytes of RAM, running Debian Sid 64bit. In this old box, with all 47 extensions enabled, Firefox starts in less than 5 seconds and takes about 175 MB of memory. But even if installing 47 extensions brought Firefox to a halt, why would you need to install all of them? This is simply a collection of recommended extensions, not a set that no developer can do without.

Jasber 15y ago

Somewhat related, LiveReload (http://livereload.com/ http://livereload.com/) has made the biggest impact in the way I develop recently. It feels a lot like the way notch developed with hot swapping during Lundum Dare.

jroseattle 15y ago

Our team has basically abandoned Firefox in favor of Chrome. Our team consists of front-end, HTML/JS/CSS types as well as server-side devs. I'm surprised, but every member of the team independently has punted on Firefox. For some, it was the extensions. For others, it was the RAM consumption. With the new release schedule, it seems every time I would open FF with a new version to pull, some extension no longer works. It's purely anecdotal, but it was enough to annoy the bejeezus out of us that we simply switched over to Chrome.

jeremyswank 15y ago
if you use [add-on compatibility reporter](https://addons.mozilla.org/en-US/firefox/addon/add-on-compatibility-reporter/ https://addons.mozilla.org/en-US/firefox/addon/add-on-compat...) then you can tell firefox to use 'incompatible' extensions anyway. most of the time they work just fine.
- e1ven 15y ago
  It the newest Aurora build of Firefox, it's even easier. In about:config, toggle extensions.strictCompatibility to False.
- jroseattle 15y ago
  Good to know, thank you. Of course, there's the potential incompatibility of the incompatibility reporter, but I digress.
ootachi 15y ago
Marking add-ons compatible by default is planned and implemented for FF10 (off by default, but it'll be turned on by default assuming all goes well).
re_todd 15y ago
Firefox was becoming slow for me and a real pain to use, until I lowered the browser.history_expire_sites in "about:config" from 40k down to 10k. I'll probably lower it even more. http://kb.mozillazine.org/Browser.history_expire_sites http://kb.mozillazine.org/Browser.history_expire_sites

nestlequ1k 15y ago

For fun I messed around with Firefox 8 with Firebug. Crashed in less than 5 min. Lot of work is still ahead... Chrome has Firefox beat

sleighboy 15y ago

It's not Firefox-specific, but if inspecting and modifying HTTP requests/responses is what you want to do you should try Charles ( http://www.charlesproxy.com/ http://www.charlesproxy.com/ ).

deleted 15y ago

[deleted]

rch 15y ago

Using Dragonfly in Opera makes my life pretty darn easy. It would be very difficult to convince me to switch to either FF or Chrome at this point.

gaoshan 15y ago
I'm intrigued by Dragonfly. Why do you like it better than what is available in Chrome? Basically, what are its selling points?
- rch 15y ago
  Unfortunately, I am totally unfamiliar with any of the alternatives to Dragonfly. And the selling points would read like the feature list of any debugger. All I can really say is that with Dragonfly, I don't mind working with JavaScript anymore -- it is tightly integrated with the browser and does its job well.

mhartl 15y ago

It's a shame there's no good in-browser HTML validator (for any browser, so far as I can tell). HTML Validator used to be perfect, but Firefox started changing too rapidly for it to work consistently, and the current version only works on Windows (!). Does anyone know of a browser/plugin combination that validates pages automatically (preferably configurable to run only on localhost)? The original HTML Validator was perfect, with a small icon in the bottom right of the screen indicating valid or invalid. Total Validator is OK, but it's not in-page, so that (for example) it's very difficult to validate pages behind a login wall.

Skalman 15y ago
Firefox actually has partial validation built-in: view source and see if something is red. This validation is future-compatible, meaning that it won't find all errors (such as unknown tags or attributes).
- elisee 15y ago
  Just to be clear, Firefox doesn't have a validator built-in. It's just syntax highlighting, and it has recently been enhanced to use the same HTML5 parser as the rest of the browser. So yeah you can see some of the errors you might make in your markup but it's very far from what an actual HTML5 validator should do. It doesn't even report all parse errors (and isn't meant to). I'm pointing this out because of a recent blog post by Mozilla dev Henri Sivonen which says: "Please do not advertise the new View Source implementation by saying that Firefox now has a validator in the View Source window." (see full post here for all the details, there's a section named Limitations: http://hsivonen.iki.fi/view-source/ http://hsivonen.iki.fi/view-source/)
  - Skalman 15y ago
    Thanks for the clarification. I've mostly been using it to find some quick, obvious errors, such as tag mismatches.
gchucky 15y ago
I'm in the same boat as you. My computer at work is a Mac, and I was unable to use the HTML Validator plugin. The solution is to go to the plugin's forums - http://www.htmlpedia.org/phpBB/viewforum.php?f=11&sid=e9e977bdf5cf2f4614809ffb6833fbcb http://www.htmlpedia.org/phpBB/viewforum.php?f=11&sid=e9.... One of the guys there has been really good in taking the origin plugin and compiling it for other operating systems.

czervik 15y ago

The only thing I open Firefox for anymore is SQLite Manager. What really made me fall in love with Chrome developer tools is using them to write Chrome extensions.