Firefox Developer Tools and Firebug

https://hacks.mozilla.org/2013/10/firefox-developer-tools-and-firebug/

by rnyman • 13 years ago

147 66 13 years ago

hacks.mozilla.org

hk__22• 13 years ago

Already posted 20 minutes before: https://news.ycombinator.com/item?id=6516587

k-mcgrady• 13 years ago

You've linked to the same post.

hk__22• 13 years ago

Yeah, this is a mistake, and the other post has been deleted since.

jbk• 13 years ago

Before the release of Firefox 4 we decided that Firefox needed a set of high-quality built-in tools.

I don't understand why they did not just integrate Firebug directly. What were the reasons?

Eiwatah4• 13 years ago

From the next paragraph:

An early prototype of the Inspector even included a significant portion of Firebug. Ultimately, integration proved to be too challenging and would have required rewrites that would have been equivalent to starting over.

pjmlp• 13 years ago

With the improvements of the built-in debugging tools, what will be Firebug's future on the long run?

Specially when their feature set starts to overlap.

For me it seems all very political.

dntrkv2• 13 years ago

Is there any reason for Firebug to continue existing as a plugin? I know it did a lot to further the front-end dev tools in all the browsers, but at this point the default dev tools in FF and Chrome are just as good and in many ways better.

ihsw2• 13 years ago

They answer that question in the article:

We thought long and hard about including Firebug wholesale and considered several approaches to integrating it. An early prototype of the Inspector even included a significant portion of Firebug. Ultimately, integration proved to be too challenging and would have required rewrites that would have been equivalent to starting over.

dntrkv2• 13 years ago

I did read that, but I mean is there a reason it should exist at all? Is there anything Firebug does that Chrome/FF dev tools don't do?

potch• 13 years ago

Although Firebug has "fire" in the name, it is not an official Mozilla project. It's an independent group of developers (though naturally, many are Mozilla contributors). That independence is important, as competition always is! I can't speak for the developers who are working on it, Firebug will likely evolve to be a complementary set of tools to the built-in ones. Today provides valuable continuity for people who are used to using Firebug to build websites, and has a number of addons for Firebug itself that exists nowhere else on the web. Shutting it down would be a shame.

frik2• 13 years ago

Firefox Dev Tools lacks several features that Firebug provides (editing) plus it has IMHO a slicker UI. I am glad that Firebug still is supported by some devs. Chrome Dev tools lacks several features too, that Firebug provides (vice versa), though Chrome Dev tools have a worse UI.

I hope Firefox Dev tools clone the best parts of Firebug and Chrome Tool.

bsimpson• 13 years ago

I haven't been following Firefox all that closely. Is the debugger API they're developing interoperable with Chrome's? It seems like it would be good for the web to decouple developer tools from browser engines. If I could run Firebug on Chrome or Blink's Dev Tools on Firefox, I'd only have to learn one set of tools to be able to effectively create cross-browser projects.

(If you substitute the native dev tools in this thought experiment with Brackets or Sublime Web Inspector, you start to see the power of decoupling tooling from the browser.)

stephen• 13 years ago

I have no idea, but I doubt it. Although, yes, it should really be standardized though, like the JVM debug protocol.

The Google Web Toolkit team was looking at this; instead of their historical approach of using a JVM to run/debug user code (because that was actually a really great idea in IE6), using the native JS debuggers in FF/Chrome/etc.

...except that there is all sorts of wonkiness, like only 1 debugger is supported at a time, so you can't use, say, Eclipse (whether for GWT or pure JS debugging) + FF dev tools for inspecting CSS/etc. at the same time. And you can only connect to 1 tab...something, something. I was not directly involved, but it didn't sound pleasant.

Anyway, I totally agree that native dev tools should be decoupled/play friendly with other tools.

AFAICT, so far the FF/Chrome engineers are going down the path of basically building IDEs from scratch, in the browser itself.

Which was great for Firebug, and inspecting elements, but for a debugger, I really want to stay in my IDE.

simanyay• 13 years ago

(I'm a member of the Firefox Developer Tools team)

Our RDP (Remote Debugging Protocol) is not interoperable with the one in Chrome or any other browser. There are two reasons:

1) Both us and Chrome team would like to iterate on our protocols and tools as fast as we can. Maybe in future, when tools across browsers stabilize there will be a case for a standard but I personally believe that a wrapper protocol is a better answer.

2) RDPs depend on their platform's architecture. Ours is very SpiderMonkey centric while Chrome's is all about V8.

Google organized a nice Summit during the I/O this year and I attended on behalf of our team (video: https://www.youtube.com/watch?v=SOO9Kb1-JJU). I shared my thoughts on interoperability and other issues here: https://medium.com/web-developer-tools/1060a9f69e6a

Hope that helps.

gkoberger• 13 years ago

Interesting Firebug story: Years ago when Netscape/Firefox was being built, some developers wanted to put a bunch of developer tools into the browser. Mostly so Firefox developers could inspect the browser (remember, websites were pretty bland back then).

However, they were worried about the codebase becoming too big -- after all, 99.9% of people wouldn't need a DOM inspector. So, the add-ons architecture was born. Firebug was created as a separate tool by Joe Hewitt. Add-ons and Firebug probably ended up being the reason why Firefox took off.

keypusher• 13 years ago

One of the reasons. I think tabs were actually a bigger deal back then. Although Opera had them first, Firefox was the one that put them front and center. Back then, Opera was still championing a gesture-based interface, and Firefox felt a lot more solid and polished.

derleth• 13 years ago

Although Opera had them first

Opera had little miniature windows inside the main window. A small difference, perhaps, but tabs are simpler to manipulate at the cost of, perhaps, being less flexible (you can't resize tabs and move them around like you can windows).

jayflux• 13 years ago

I agree with keypusher. Firefox 'took off' long before the whole add-ons/extensions became popular. It was being able to use tabs which caused many too switch back in the day (plus it was faster to, or at least felt that way). And yes I'm also aware opera did this first.

127• 13 years ago

Firefox back then, when it was "Phoenix" was a very light browser, while still being completely functional. That's the main reason I used it.

rip747• 13 years ago

actually firefox took off because it wasn't IE :) remember that those were the days that you either used IE on windows or nothing since netscape was dead and there weren't too many choices out there for a free browser that worked well.

mixmastamyk2• 13 years ago

Firefox was started when Mozilla (Communicator) grew too large. Let's put everything in plugins they said! Do even 5% of users need dev tools? History repeating itself.

pbreit• 13 years ago

While I agree with the sentiment, I think bundling developer tools is fine. The other browsers, which are generally leaner than Firefox, include them.

richardjs• 13 years ago

Also, bundled developer tools can be nice when you're trying to debug an issue on a user's machine. It's a small thing, but it's nice to not make them install some plugin.

pcwalton• 13 years ago

The other browsers, which are generally leaner than Firefox

Not anymore, judging by binary size and lines of code.

nullc• 13 years ago

It could be argued that integrating basic developer tools is also a statement about the kind of internet we ought to have: One where people are as empowered to understand and contribute as they are to consume.

I've seen not-terribly technical people— or at least people who'd never otherwise have firebug installed— go and edit braindamaged forms to get a webpage working right. Having it built in is practically empowering.

Benvie• 13 years ago

At this point, developer tools are essentially a required feature for a browser. All else aside, there's no way to debug a bug that's specific to a single browser without tools integrated into that browser.

mixmastamyk2• 13 years ago

And that's relevant to what proportion of the user-base?

bjitty2• 13 years ago

I recently started using the dev tools in FF daily in place of Chrome. One thing I really wish they had (and maybe they do but I can't find it) is a way to format JavaScript code. So much JavaScript is minimized these days so reading it is about impossible. Chrome has a {} button you can click to format the code. This would be extremely useful in FF.

epmatsw• 13 years ago

That's present in Nightly (FF27). Not sure when it was introduced though.

mbrubeck• 13 years ago

Pretty-printing of JavaScript landed in Nightly just a few weeks ago: http://bugzil.la/762761

bjitty2• 13 years ago

Awesome that's great news thanks.

kaixi• 13 years ago

They actually implemented this feature a couple of weeks ago but as for now, it's only available in the Nightly channel.

jfaucett2• 13 years ago

First Id like to say Im a huge fan of firefox and really like what mozilla does.

So I would love to be able to use the developer tools - but for me they're still not quite there (but getting close). Here's some things Id like to see, and then I think I could change over from chromes devtools completely, wonder what other devs think?

1. speed (becoming less of a problem)

2. edit html in elements inspector, also dynamically creating styles: - What I like about chromes devtools is the fact that I can completly alter my html page via the elements panel (styles and html) very fast, also auto-expanding to the selected element and seeing its surroundings is nice.

3. network panel still not as good as chromes (imho) - mainly because I cant enlarge the detailed inspection of each listed http request.

4. too intrusive (popups for javascript editor) - make it more compact and use less space, also I like tabs (that are optionally detachable) instead of windows.

And thats it, these are the only reasons for me personally, why I dont use firefox as my development browser of choice.

But again Id like to say the work the mozilla devteam is putting into the devtools makes me think its just a matter of time until I can finally go back to mozilla :)

ep1032• 13 years ago

1) Will be improved in next release, was a platform specific issue, apparently.

2) You can do this already. It works just about the same as chrome dev tools, create a new rule to add a new css rule, etc.

3) I would like this too.

jfaucett2• 13 years ago

- as far as #2 goes, I have to open up the style editor tab (then i find myself switching back and forth, is it possible to add rules in "rules" panel inside the "inspector" tab to avoid the switching? Also, in my build (maybe a week old or so), When I right-click a node in the inspector I only have copy html options and delete node, no edit html - does a more recent release have this - that would be awesome.

sgarrity3• 13 years ago

re: #2

You can edit all of the individual components of a tag (attributes, the tag itself, add new attributes, etc.), but you can't edit/select the entire tag or child tags at once as you can in Firebug.

This can be really powerful, because when you can edit an entire tag including the open/close brackets, you can type in whole new tags or paste in a blob of new HTML.

This bug was the closest I could find: https://bugzilla.mozilla.org/show_bug.cgi?id=777009

jamesgeck0• 13 years ago

3. Yes. If I get a 500 error from my web application with a stacktrace in the html, it's really hard to read it in the source in the Firefox inspector. Webkit dev tools will both show the source and render it.

integricho• 13 years ago

1. Logging of objects and arrays should produce a similar output like in chrome or firebug, currently the [object Object] like representation is not really helpful, I have to inspect all of them to find what I'm looking for.

2. +1 for the above mentioned network panel details, I agree, and the URL of the request can not be copied currerntly, that's mean :)

3. +1 for the need of stacktrace, like in chrome, that's sooo needed

4. A shortcut in it's settings for disabling the cache

l0c0b0x2• 13 years ago

We've uninstalled Firefox throughout our domain(s) due to the lack of standard support for the enterprise, and various issues with managing installs, updates, and freaking random crashes on their recent official releases.

smnrchrds• 13 years ago

Even assuming you're correct, what does it have to do with Developer Tools. Please stay on topic.

cpeterso• 13 years ago

Does Google provide enterprise support for Chrome?

chris_mahan• 13 years ago

Perhaps they went back to IE7.

mh-• 13 years ago

http://www.google.com/intl/en/chrome/business/browser/

https://support.google.com/chrome/a/?hl=en#topic=2936229

https://support.google.com/chrome/a/answer/188446?hl=en&ref_...

(see user-based policies)

l0c0b0x2• 13 years ago

Yes, Google does provide enterprise support.

antonios• 13 years ago

From the "Chrome for business FAQ" page:

"Google only supports the most current dev, beta, and stable channel releases."

Given the frequency of the stable channel releases, I'd rather go for the Firefox ESR version.

eddieh• 13 years ago

Did you try Firefox ESR? http://www.mozilla.org/en-US/firefox/organizations/

donbronson• 13 years ago

So long Firebug. It was like Christmas when we first saw what you did for us.

sgarrity3• 13 years ago

I'm glad to see Firebug being replace with a more modern set of tools, but you're right - Firebug (and the webkit devtools that followed from it) is/was amazing. It was probably the most significant change in front-end web development I've experienced in my 15ish year career.

mattmanser• 13 years ago

XMLHttpRequest was released by MS in IE 5 in 1999, which is less than 15 years ago. I'd say that the development of ajax was far more significant than some dev tools.

And as a slight nitpick, the IE Dev toolbar came out about 6 months before Firebug and as best I can remember actually had more functionality than Firebug for quite a while.

It's some sort of persistent web developer myth that Firebug came first. Firebug was just easier to find/install, you had to know that the IE6 developer toolbar existed.

NB: I hate IE as much as the next web dev, but credit where credit's due...

acomjean• 13 years ago

I develop using firefox/ firebug. I do really like the way firebug works, but its starting to show its age a bit.

The integrated tool are getting better but I often forget they're there. The responsive page resizer/viewer I use frequently

Tools->web developer seems to incorporate firebug and the native tools (confusing...). I like the way firebug puts a little button on the menu bar I can click to turn debuggin on and off.

We'll see how this shakes out.

conradfr• 13 years ago

I'm exactly the same, I just forgot to use built-in tools except the responsive, because I have that Firebug button.

However, I mainly use FB to inspect network requests nowadays and if you do a lot of Ajax calls, inspecting the responses and the json could require less clicks IMHO.

thousande• 13 years ago

work for having a toolbar menubutton has started,

https://bugzilla.mozilla.org/show_bug.cgi?id=754481

pcx66• 13 years ago

I use the Nightlies, and am really digging the new stuff that's coming in. What I want the most is, a DevTools-level universal shortcut to focus onto the Web Console prompt. I know that C-S-k is the Web Console short-cut, but when focus is on the other parts of the Web Console, pressing C-S-k just closes Dev Tools. I like how Chrome uses 'Esc' to focus on the prompt, and I find it a very superior UX.

mnemonik• 13 years ago

Cmd+Opt+K (or Ctrl+Shift+K) should take you to the console panel if you are in a different panel. For example, Cmd+Opt+S to open the debugger, and then Cmd+Opt+K should take you directly to the console, not close the tools.

If you find this isn't happening for you, please file a bug: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&c...

sgarrity3• 13 years ago

The Firefox devtools have been improving dramatically. I'm looking forward to dropping Firebug completely. The responsive mode is an excellent new feature.

What I'd really like, though is a single set of web devtools that can inspect any browser. Having to learn a different set of devtools for each browser is a pain when you have to test a slew of different browsers.

It's a pipe dream, but I filed a bug anyhow: https://bugzilla.mozilla.org/show_bug.cgi?id=924670

j1z0• 13 years ago

The Firebug story is a good and a bad thing. For starters the only reason I still use Firefox is because Firebug is awesome. In the article at least Firefox gives credit to Firebug where it's due, but it's a bit like OS X notifications taking Growl's idea and leaving Growl to rot. Maybe that's a bit dramatic, but it's a common story now a days. Indie developer develops something awesome for big companies eco-system. Big company takes idea and leaves indie dev to die. I am not privy to the entire story but it sure would have been nice if mozilla could have at least done an acquire-hire for the Firebug team (assuming they wanted it). You know show some love for the greatness they gave to the dev community.

Ygg2• 13 years ago

They both work for Mozilla, no? I do remember Mozilla acquiring them. Some major contributor to Firebug did leave for Chrome IIRC[1].

It's more like Mozilla cannibalizing itself, than anything else.

[1]http://www.chromestory.com/2011/07/firebug-guru-joins-chrome...

past• 13 years ago

Mozilla has been paying the main Firebug developer for a long time to work on it, but I've never heard of an open source project that would like to be "acquired", whatever that means. If hiring all of the project's developers is what you mean, quite a few of them had high profile jobs already, so funding wasn't an issue here. As for the reasons why simply incorporating Firebug into Firefox wasn't a viable solution, see the original post.

frik2• 13 years ago

Firebug doesn't parse JSON that start with "for(;;);" or "while(1);". Chrome Dev Tools support this.

Please add support, reason why: http://stackoverflow.com/questions/2669690/why-does-google-p...

dhruvaray• 13 years ago

I wonder what our ( http://dhruvaray.github.io/spa-eye/ ) future is going to look like?

Firefox Developer Tools and Firebug

Related Stories