Firebug for Chrome

Can anyone recommend a decent extensi开发者_运维百科on 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!

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

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

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.

You can add Firebug Lite for Chrome as an extension