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…
{ 21 comments… read them below or add one }
I’ve created a bug about issue N1.
https://bugs.webkit.org/show_bug.cgi?id=43105
We will also work over the other issues.
Wow, I just posted this a few hours ago… and I’m also the least-read web design blog on the internet, yet already you guys reply and post a bug about my mundane complaints?
That rocks!
Fixed. Will be available in the next dev-channel release.
I am impressed at the response time and how closely the Chrome dev team is paying attention to users. To even receive feedback – let alone a response or a bug fix – wasn’t even expected. Thanks loislo!
Wow. Because of your post they have noticed the things that need to be fixed. I’m sure I will be using Google chrome more often now. Thanks for your post.
Hi Darwin, yes that is pretty awesome right? I love Chrome for personal use and it just keeps getting better for work as a developer too!
you can use firebug for ie if you use internet explorer
Awesome article about chrome.Chrome is a new and it ll take time to get popular.
impressed with your posting well done,,
why you think chrome is better than firefox.Have you some sound reasons?
i still belv firefox is better cant belv people saying chrome is better than firefox !! maybe firefox and opera will stand in same position but chrome a little above IE tht all ..
i want to try this out i never thought there is a replacement for firebug in chrome ..
Indian web hosting recently posted..Web Werks India
Although I prefer Chrome’s speed as a browser I still think Firefox is currently well ahead as a development tool with the likes of Firebug and web developer tools, compared to the version you can get for Chrome.
Firebug is now available for Google Chrome…i always support Firebug…
I do not know what to say…, but now I have a chrome lover. It is because that Chrome is clearly faster than firefox. That’s it. So…, when it comes to reality that firebug is available for Chrome…, then nothing could take chrome away from me… However…, firefox and firebug have been my partner for wonderful years ago…
I am really a big fan of the developer tools on Opera 10. I’m quite a beginner when it comes to webdesign and I find them really easy to use – especially the window that gives the sizes and spacial relationships of the elements on the page.
Jim@voodoo knife block recently posted..Knife Block
Hi Jim, thanks for the tip I will check out the Opera 10 developer tools.
On the plus side, Chrome doesn’t run like frozen treacle. I still prefer Firefox though.
I’d be interested to read a good write up in the differences between the two tools because it feels like I’m not seeing the thing that everyone else loves about firebug.
Pretty much all of these points have been fixed in subsequent versions of chrome, though people still say that firebug is miles better than dev. tools for some reason. I haven’t used firebug much at all so it may be because I’m just not used to it, though when I do use it I find it slow compared to dev. tools.
I personally use Mozilla Firefox it is easy to use and less clicks you can spend. I am using Chrome when I have so many sites that needs to be open.
Edwardo Gockel recently posted..Tires For Sale
I tend to do exactly the same as you. I use Chrome as my personal browser and Firefox for web development. Personally I like both. It’s just that I have always used FireFox for my work. I do cross check with various tools though. It’s always nice to get a broad view when doing SEO work.
Steve Hippel@web design Sussex recently posted..WordPress Comment Policy Plugin