What features does Firebug have that Chrome's Developer Tools do not have? [closed]

StackOverflow https://stackoverflow.com/questions/3124974

  •  30-09-2019
  •  | 
  •  

Question

I'm a novice web developer, and I've had Firebug recommended for debugging several times. So far, however, I've just been using Chrome's built-in Developer Tools. It seems to do everything that Firebug does, and is cleaner and more organized as a bonus.

As I get more advanced in my debugging, are there features that Firebug has that I'll miss out on with Chrome's DevTools? If so, what are they?

Related: Firebug-like debugger for Google Chrome

Was it helpful?

Solution

I used Firebug from the start and it was a godsend like the invention of fire. But then Chrome came out with its debugger and I tried it. I kept using Firebug, but kept an eye on Chome's dev tools and finally could not longer come up with a reason not to switch after JSON tools were added in v12.

Chrome's DevTools kick butt because it has:

  • Built in Timeline, Profiler and Heap analyzer
  • Built in Audit tool
  • Can access and edit Local/SessionStorage, Cookies, SqlLite DB's, WebSQL, AppCache etc...
  • WebSockets network sniffing
  • JS debugger has some more features (e.g. WebWorker breakpoints)
  • JS debugger let's you edit JS on the fly and run it (JSFiddle w/o the fiddle)
  • Each window gets a devtools window if you like; Firebug is a singleton
  • Firebug perturbs the page by slowing its loading down and by injecting CSS for its inspector feature

UPDATE: 2 years later I have to congratulate the Firefox team for making huge inroads. That said, the Chrome team and debugger make huge leaps forward on a monthly basis, leading the industry. I'd update the above list, but frankly it would fill the entire page.

OTHER TIPS

I haven't run into a Firebug feature I've missed yet after switching to Chrome.

I feel a lot more comfortable using Firebug. I can't think of specifics at the moment, but sometimes I'll try debugging something in Safari or Chrome and it seems like such a PITA that I launch Firefox and get whatever done quickly.

The DOM tab is a plus, for one. It's more accessible and well laid out than Chrome's equivalent. I prefer the way DOM and other JS objects are logged to the console in Firebug, too.

Firebug plug-ins like Pixel Perfect are very useful as well. I don't know whether any such tool exists for Chrome.

Overall, it doesn't matter because you have to test in both browsers, anyway. And IE, so might as well compare it to IE's Dev tools (which have improved, but still are not good compared to FF or Webkit's).

I don't think there's anything advanced in particular present in Firebug but not in Chrome that you'll be missing.

The Chrome Developer Tools took over the features of Firebug, so all the main features and familiarity are there (such as the $0, and console object).

There are some small differences, such as the DevTools do not have a CSS panel (although CSS stylesheets can be manipulated in the Elements panel).

The Chrome tools additionally have the Timeline, Profiles and Storage panels. The Timeline panel logs loading, CSS rendering, and JavaScript parsing. The Profile panel profiles resource usage and the Storage panel shows and allows changes in the site's database, local storage, session storage, and cookies.

Finally, both tools have their own minor variances, which make various actions a tiny bit easier or harder. My advice is to use Firebug for Firefox, and DevTools for Webkit browsers, since only Firebug Lite works on Chrome, and it lacks many features the normal Firebug has (and the DevTools are built into Chrome).

EDIT: This used to be true, but Chrome Dev Tools implemented it.

Firebug can search in all scripts loaded on a page. Chrome Dev Tools can only search in the currently selected script, AFAIK.

As far as I can tell, Firebug is the only one that can edit HTML-code and text live as you type it. Very useful, if you're for example trying to see how text would fit in a container and add one character at a time.

In Chrome when you edit the HTML, you have to press TAB or ENTER to exit "edit mode", and see the changes on your page.

In Firebug you can also enter HTML-code right away. In Chrome, you have to right-click and choose "Edit HTML". Otherwise, it will show up like <b>bold</b>.

I really want to change to Chrome, since it seems to run faster, but the live editing is too important for me.

The mouse selection firebug has is great, but I can't seem to find it in the Chrome Developer Tools.

It bothers me because I can't find a hot key for it in firebug, whereas chrome lacks it completely.

I am a noob developer, so the mouse is still used most of the time when developing.

At the time this question was asked Firebug was a beast, but now the Chrome Developer Tools (DevTools) are handy for web developers. Though I'm not ranting about Firebug because I've learnt the web development using Firefox with Firebug.

It was a great tool for web development and it introduced all major features of DevTools and Firefox's DevTools has. However, I switched to the Chrome DevTools though they don't cover all the features of Firebug, because they are light-weighted and much faster than Firebug, accessing localStorage is easily defined and the sources are organized there in my opinion.

Here I'm going to list how the features are unique in Firebug,

  • Search:

    Search option is well-defined in Firebug, because its easily accessible and we can search keyword with case-sensitive and regular expression.

  • DOM:

    The DOM structure can be easily accessed in Firebug with various filtering options like Show User-defined Properties, Show User-defined Functions and so on.

  • Cookies:

    Firebug lets us create our own cookies and gives provision to export cookies.

  • Network/Net:

    Firebug has a Net panel wheras the DevTools call it Network. Both are useful to analyse all the requests made to load the resources and their status. In Firebug, we can easily grasp the resources' Remote IP.

  • Sources:

    Even though the Source Edit is available in the DevTools, I feel Firebug is better while using Source Edit, because if you want to edit a CSS file within the DevTools, you have to go to Sources panel, then press Ctrl+O to find the file. Only then you can edit the file. In Firebug you can easily find the Source Edit under every menu tab.

  • Support for dojo:

    Once I was a dojo developer Firebug was easily extended to support dojo developement by using the Dojo Firebug Extension.

Objectively seen Firebug 2.0 has many small features, which the Chrome DevTools do not have. Some of them are listed here:

Console panel

  • Displays XMLHttpRequests including the whole request information
  • Displays cookie changes
  • Some more Command Line API functions
  • Separate Command Editor

HTML panel

CSS panel

DOM panel

  • Displays all DOM properties in one place
  • Displays closures
  • Allows to filter the display by properties, functions, etc.

Net panel

  • Allows to stop on XmlHTTPRequests
  • Shows cache information per request

Cookies panel

  • Create and edit cookies
  • Control over cookie permissions
  • Shows raw and formatted size of cookies
  • Allows to stop script execution on cookie change
  • Export cookies in standard format

General

  • Open HTML, CSS and JavaScript in external editor
  • Allows to customize shortcuts

A "feature" that goes beyond the usability is that Firebug is open source. So everyone can participate on it.

Having said that, the Chrome DevTools (as well as the Firefox DevTools) have many more features and other smaller and bigger advantages over Firebug as the team behind Firebug is very small in comparison to the teams behind the other DevTools.

Also, Firebug 3+ integrates into the built-in Firefox DevTools, which means those versions inherit all the features of the Firefox DevTools and may add additional features.

Firebug has the possibility to have other plugin attach to it such as Firecookie. For the rest they are pretty similar, it's all about taste in my opinion.

also add that it can xopy XPATH add CSS selector for a HTML element.

THAT is really handy sometimes! :))) hahaha

I think the development tools are similar but I've had trouble forcing Chrome to not cache anything. Even setting the Chrome "Disable cache" setting didn't work 100% of the time; I'm not sure why.

I didn't have this issue with Firefox/Firebug, so I am still using it.

Adding my few cents...

  1. Chrome Inspector could not sort the CSS properties alphabetically where as Firebug could do this like a charm. It helps when you inspect some css element and need to grab it firebug comes handy on this.

    As per good CSS coding practice, its always better to have your CSS properties sorted alphabetically in your code.

  2. When you are working on a project involved with lot of scripts.In firebug under script tag you have an option of searching for a js file in the suggestion box provided. Where as with chrome you will have a lame tree view to locate your JS file which is tedious to see the namespacing of your js file and traverse the tree.

    This option might not affect anyone who involves with little JS files in their project. This feature is a bang on with firebug I use when my scripts are more than 1000 JS files.

Almost made the switch today but I noticed I can't right click on modified CSS in Chrome and copy the Rule or Style declarations like I can in firebug. GOD I wish firefox didn't suddenly start sucking or I wouldn't have this problem.

With the chrome debugger I can debug the jsni of my GWT project where FireBug just show an anonymous function and I don't really recognise the actuale function at all.

I love Chrome dev tool but sometime I missed these powerful feature from firebug.

  • Conditional breakpoint : pause only on specific condition.
  • Logging function calls : mark the function and see everything you want to know in console.
  • Break On Property Change : Mark objects and debugger will pause if property get changed.

"Edit and Resend" request feature

With "Edit and Resend" feature in Firefox Developer tools (Replay XHR or something in Firebug), you can replay the XHR request with changes in the request including request headers, request body, http method and even url. Google Chrome's Replay XHR simply replays the request, and does not allow any modifications to the request.

I use Firefox Devtools when I need this feature.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top