Chrome Developer Tools vs Firebug

Eric — Tue, 27 Jul 2010 21:58:01 +0000

I often compare Chrome’s Developer Tools vs Firefox’s Firebug while working on various projects.

The thing is, although I use Chrome as my main browser for personal use, I still go back to Firefox when I’m doing my website development work. I use Firefox because Firebug still seems the best for debugging javascript and for quickly assessing what’s going on with certain elements in a webpage. Or, if I just want to tinker around with some css rules, Firebug is there for me – fast and efficient.

But Chrome’s Developer Tools are rapidly catching up to Firebug. Using Chrome, I can tinker with the css rules, I can do my assessments with various elements, and I have access to all sorts of information like page speed or javascript issues, that previously only Firebug could really deliver on. I guess I partly still feel ‘at home’ with Firefox and Firebug – for years Firebug’s tools have been great for both web developers and designers.

So what is it about Chrome Developer Tools vs Firefox’s Firebug that has me still going back to Firebug? I came across an annoyance with Chrome’s Developer Tools that maybe helped provide an answer – at least in my mind anyway.

Top 3 annoyances with Chrome Dev Tools

Annoyance #1 – Too many clicks until I can Inspect an Element

Very often I need to quickly check an element, whether to check the spelling of an id or a div, or to see what the code is doing inside the page. What I do is hover the mouse and right click right over the element, and when the menu opens, I choose “Inspect Element”. Now in Firebug, as soon as I make that choice to inspect the element, the Firebug display opens, and it immediately shows me the exact element within the page. But with Chrome’s Developer Tools – when I choose Inspect Element, it only opens the display, but does not show me the exact element. Instead, I have to go back to the page, hover the mouse, right click and choose Inspect Element – a second time! Then Chrome finally shows me the element I wanted to look at.

Maybe this seems like a minor annoyance, but I do this right-clicking and inspecting elements all the time when I’m developing a web page. And sometimes with Chrome, the display will open and I’ll have to go back and scroll some to find my element again on the page, before I can right click and choose Inspect Element again. When this happens over and over, I’m sorry but at that point, I go right back to Firebug again. I right click something, I choose Inspect Element, and voila there’s my element right there and I can quickly recall that ID name or whatever it is I needed to assess.

Annoyance #2 – Developer Tools open up slower than Firebug

Chrome’s Developer Tools opens up slower than Firebug. If I’m working on a page and do my right click and inspect element, Firebug is almost immediate. With Chrome, I get roughly a 2 second delay. No, it’s not the longest time in the world to have to wait on something, but when I’m doing my web development and I just need to quickly look at the spelling of a div or something, the 2 second delay just gets annoying. With Firebug, it opens right up and I can check it and go back to my work. It’s just a simple matter of speed. The thing is – why wait when you don’t have to?

Annoyance #3 – Ease of use is inferior to Firebug

This is less of an annoyance with Chrome and more props to Firebug’s ease of use. With Firebug, I can play around with the css rules quickly and easily, and often simply by moving my arrow keys up and down. So let’s say I feel like the margin of an element isn’t quite right. If I want to find the exact pixel or em number that I can put in my stylesheet, I inspect my element, then I can jump right over to the CSS rule, click in it, and just tap my up or down arrow keys to get just the right measurement I need.

I love that quick ability to be able to refine and adjust – and it’s not just with pixels or numbers. I can use the arrow keys to try other properties of an element, for example, on a display attribute I can click in where an element might have ‘block’, tap the arrow down and I get ‘inline’ right away, with the element in the page adjusting as I tap.

Conclusion

I really don’t mean to come across as knocking on Chrome. Like I said, I use it most of the time for personal use and often will keep it open while I am doing website work. The annoyance are somewhat minor ultimately, however, when I’m getting deep into serious web development, there is just no choice. Give me my Firebug!

Chrome’s Developer Tools are catching up – we’re just not quite there yet…

Digital Design Diary » Chrome Developer Tools vs Firebug

Chrome Developer Tools vs Firebug

Top 3 annoyances with Chrome Dev Tools

Incoming search terms: