Google Groups

Re: [Chrome DevTools] Going from Firebug on Firefox to Chrome Developer Tools - The struggle

PhistucK Jul 10, 2012 10:27 AM
Posted in group: Chrome DevTools
See my comments inline.


On Tue, Jul 10, 2012 at 7:48 PM, <> wrote:
I've been a Firebug user for about 6 years now but since Firefox has become slower and slower on Mac OSX I find myself being forced into using Chrome for development, which I've always disliked, every other month when I've given it another try. There's always something I find to be badly thought out and a UI/UX disaster. Up until now I haven't really felt the need to express these issues since I haven't cared, I've just been happy using Firebug instead, but I thought I might share some of the frustration here and hopefully find simple ways to change it with settings, or kill it with fire.

Some of these issues might be easily changeable with settings, but then the problem lies there, not having the settings accessible enough.

1.) Named colors. Are you kidding me? So, when I change a color with the newly added color picker (which I like btw) and I hit a HEX that Chrome also knows as a text representation of the color, the dev tools change my HEX value into text, calling my color whiteSmoke or some horrible sh** like that. I've searched through the settings and I can't find an option that says "Don't mess with my colors!"

There is a menu, within the "Styles" title (a cog wheel), or a cog wheel at the right bottom corner. Both of them list the options of showing colors "As authored" or as HEX/RGBA/HLS. Does it solve it if you choose the HEX option?
2.) XHR requests in the console. Firebug handles this in a great, confortable way, Chrome doesn't. If you find the option to include XHR requests in the console, which isn't easy, you're left with the same console with addition to a link for every XHR request that links into the Network tab, completely destroying your flow (if you had console log messages in the console at the same time, etc). The Network tab is also by default set to display "ALL" requests, so you're not even comfortably lead into seeing all the XHR requests going on, but instead in a cluttered list of a bunch of things you don't care about.
3.) The console looks horrible. The styling of it is non-existant, it's just text and links with /n to represent items in the list. Just look at this mess:

Compared to Firebug:

It's close to being unusable IMHO.

You can use console.warn or console.error in order to show an icon for every entry, but I agree the border lines should be darker (or simply more visible). 

4.) Remember more things that I like. If I only want to see XHR requests in my Network tab, please remember that when I run Dev Tools again. Set that as a per-user setting if you don't think everyone will like it.

5.) Make it more like Firebug. Pretty please, with sugar on top. There's a bunch of things I prefer in dev tools over Firebug, but the fundamental tools and look are way off.

Hehe, I hate Firebug. The thing that really annoys me, for example, is the one you can see in your own screenshot. That mode/getManufacturer object. Expanding it in Firebug goes to a whole other panel or something. In the Developer Tools it is much much much more convenient.

Now, this fifth point is really just a rant. Be specific. What should be more like Firebug? what are you missing that Firebug has?
And what are you missing that Firebug does not have? :)

Sorry for the rant, just wanted to get this off my chest.

- Maggi