3

Can anyone recommend a decent extension to Google Chrome that is similar to Firebug? I did see that there are a couple of similar questions here on SO, but the answers seem to be very dated.

Thanks!

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
Brandon Osborne
  • 835
  • 1
  • 12
  • 26
  • 5
    You should try the built-in webkit inspector before you ask for firebug. It is in some ways much better, and in some ways worse, but it's certainly worth a look. (Also, completely written in HTML/CSS/JS, so you can extend it if you like...) – Nick Bastin Nov 04 '10 at 09:42
  • @Nick - I won't deny that the built-in WKI is pretty good, it lacks the "net" feature that Firebug has. – Brandon Osborne Nov 04 '10 at 10:11
  • 2
    it doesn't lack that feature its called "resources" in chrome – NimChimpsky Nov 04 '10 at 10:15
  • 2
    That feature exists in WKI (and I might add, I think is generally nicer and incurs less overhead than the firebug version) – Nick Bastin Nov 04 '10 at 19:05
  • Possible duplicate of [Firebug-like debugger for Google Chrome](http://stackoverflow.com/questions/308125/firebug-like-debugger-for-google-chrome) – BuZZ-dEE Dec 02 '15 at 14:52

4 Answers4

22

It's built in. Press Ctrl + Shift + I. (Or Tools > Developer in the menu)

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
RoToRa
  • 37,635
  • 12
  • 69
  • 105
  • @NimChimpsky - Although the Chrome Developer Menu is better than most browsers, it doesn't include much support for things like AJAX. Firebug is stellar at that. – Brandon Osborne Nov 04 '10 at 09:55
  • 3
    @coderpros in what way does it not "support things like ajax". I use it everyday for exactly that. – NimChimpsky Nov 04 '10 at 09:56
  • 1
    @NimChimpsky It doesn't support JS debugging either. – Brandon Osborne Nov 04 '10 at 09:58
  • 1
    @coderpros yes it does, I use it everyday, well most days. Just go to tools > developer click on scripts tab, choose your script and insert a breakpoint ... doesn't get much simpler does it ? – NimChimpsky Nov 04 '10 at 10:00
  • 5
    @coderpros: Huh? A) Nowhere in your question you mention that you explicitly where looking for AJAX tracking and 2) Chrome Dev Tools tracks AJAX requests under "Resources" and script debugging under "Scripts". – RoToRa Nov 04 '10 at 10:01
  • @NimChimpsky - It sounds like you may *play* with AJAX. The Chrome Developer Menu has absolutely nothing like the Firebug Net menu. – Brandon Osborne Nov 04 '10 at 10:02
  • 4
    @coderpros: Chromes "Resouce" tab is exactly like Firebugs "Net". If you are looking some an exact feature, then say so instead of moping around. – RoToRa Nov 04 '10 at 10:11
  • @RoToRa If I were looking for a specific feature I would have bloody well asked for it. It's programmers like you that give the rest of us a bad name. A person is rarely looking for *A* feature, but instead a set of features. – Brandon Osborne Nov 04 '10 at 15:47
7

You can use firebug lite. But Chrome already has more than decent developer tools built in it.

darioo
  • 46,442
  • 10
  • 75
  • 103
5

Chrome's developer tools has come a long way over the last year. It took a bit to adjust and I kept getting confused so I developed a test page on my box and I set them up side by side, firebug on my left monitor and dev tools on my right.

I went through and figured out exactly how they were different. I realized a little later that Chrome had the same things as Firebug just organized a little differently. Turns out I like Dev tools way more than firebug after I got used to it.

  1. I used to have a lot of complaints about Dev tools' elements section but now it seems to operate almost exactly the same as firebug. I can quickly click to inspect elements and it expands nodes correctly, taking me to the node I want.

  2. The resources tab in dev tools blows the net tab in firebug out of the water. I think it's way better organized. You get a preview of the images in the resources list and you can actually see which elements are transparent because chrome places the checkerboard behind the image (you do get a preview of the image in firebug but only when hovering over the request node, kind of annoying). Also, you can double-click resources and chrome will pop them up in a new tab, VERY nice for when I'm debugging AJAX calls and need to see the formatted exception error in the browser without manually typing in my ajax URLs.

  3. Line numbers. Finding line numbers in firebug is very difficult and you can't do it for some content. Every time you view DOM, CSS, script, etc you always get a comprehensive line number rule on the left. The only place firebug has this is in the script section.

  4. Both firebug and dev tools have a comprehensive javascript debugger. However the ability to deactivate break points without removing them in dev tools is very helpful and I use it constantly. You can do this in firebug but you have to untick a box for EVERY breakpoint, irritating.

  5. I love that JSONObjects just appear as resources along with everything else instead of having their own section. It makes it easy to see what is going on at a quick glance.

As far as I can tell everything else appears to be the same. I really couldn't find anything that firebug did better than dev tools. Usually when I thought dev tools lacked a feature of firebug it turned out that it was just in a different place or implemented in a different way. Both have a comprehensive console display. Both support popping the tool into a separate window. Both support multiple instances for multiple tabs. Chrome even has extra features on top of those. The ability to inspect storage like cache, cookies, etc. Dev tools seems to win out for me.

I highly recommend getting familiar with dev tools over using extensions if you want an excellent chrome debugger.

Sorry my answer was so long. I may write a blog sometime doing a more comprehensive comparison.

CatDadCode
  • 58,507
  • 61
  • 212
  • 318
1

You can add Firebug Lite for Chrome as an extension

Bangline
  • 890
  • 5
  • 11