Going from Firebug on Firefox to Chrome Developer Tools - The struggle

[ma...@trymbill.is]

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!"

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.

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.

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

- Maggi

[Pavel Feldman]

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!"

Please file a bug at crbug.com/new, it should be easy to fix and it looks like a bug.

 

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.

Firebug has been created in the times when XHR was exotic. It is no longer the case. You could filter network requests by type and see only XHR in the Network Panel, (4) below implies that you are using it already. Why is that not enough?

 

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:

We will need more details here to address the issues.

 

Compared to Firebug:

It's close to being unusable IMHO.

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.

crbug.com/new please!

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.

No, unfortunately we will not do that. Please provide more details about the specific scenarios you'd like to be adjusted. 

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

No problem, it is now on ours.

Regards

Pavel 

- Maggi

[PhistucK]

See my comments inline.

☆PhistucK

On Tue, Jul 10, 2012 at 7:48 PM, <ma...@trymbill.is> 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? :)

[ma...@trymbill.is]

1.) Thanks for the answer. I'll post bugs and enhancements on crbug.com/new.

2.) Making the user go to a new tab to view the details of XHR is bad UX. I'd love it if instead of a link from the console to the XHR, the info from the HXR would appear below the line, accordion style. Within that window you'd get the same information you receive when looking at XHR in the Network tab. Just an idea, I don't know if I'm the only one who likes this approach in Firebug.

3.) I was hoping the 2 pictures would suffice. I can understand that Google don't have a huge budget for a design team to design a development console for developers, they are probably better used in making other things look good, but come on:

1. There's no clear separation between lines
2. Height of each line differs when you add icons for console.error, etc
3. Console.info and console.log look exactly the same
   
4. Everything is on a white background, making no distinction between XHR logs and javascript errors, etc
5. Links that take you to webpages in new tabs look exactly like links that take you into javascript files, css files, etc

I can go on, and on ... best thing Google could do is hire a good UI/UX or make the layout of the developer tools open source. If it is already, excuse my lack of Googling.

- Maggi

[ma...@trymbill.is]

Comments inline.

On Tuesday, July 10, 2012 5:27:46 PM UTC, PhistucK wrote:

See my comments inline.

☆PhistucK

On Tue, Jul 10, 2012 at 7:48 PM, Maggi Trymbill 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?

Yeah, I found those, but it still changes it to weird names that don't tell me anything when I'm looking over CSS files. "whiteShade" - what?! :D

 

 

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). 

Yeah, but console.info and console.log are exactly the same and the icons for console.warn and console.error are from Windows 95. Adding slight zebra, padding, bit more contrast in the borders and a few nice icons wouldn't kill 'em.

 

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? :)

Agreed, pure rant. I'm just pissed of at Firefox for being slow as sh** and for Chrome Dev Tools for not working the way I'd want it to. I think I've come to the conclusion that I'd rather like to help the dev tools team by filing bug reports and enhancement requests instead of Mozilla, since they're just hopeless =)

[PhistucK]

The whole thing is open source! :)

You can even submit patches and make it better yourself and add features (as long as these features are pre-approved, of course).

☆PhistucK

[ma...@trymbill.is]

What?! That's awesome news!

I always thought Webkit was insanely protective of its code, and that therefor, Safari and Chrome and others that use it had to obey some rules 'n' stuff.

Then I'll dig into the dev release and see if I can be of any use :)

Thanks for the info PhistucK!

[PhistucK]

Protective? WebKit?

WebKit is itself an open source project derived from KHTML (another open source project).

http://www.webkit.org/

Here is the entire front end code of the Developer Tools (or Web Inspector, as Safari/WebKit refers to it) -

http://trac.webkit.org/browser/trunk/Source/WebCore/inspector/front-end

You can check it out by SVN and the like. More details can be found here -

http://www.webkit.org/coding/contributing.html

And the list of bugs/features (not sure everything is approved, though) -

https://bugs.webkit.org/buglist.cgi?query_format=advanced&short_desc_type=allwordssubstr&short_desc=&component=Web+Inspector&long_desc_type=substring&long_desc=&bug_file_loc_type=allwordssubstr&bug_file_loc=&keywords_type=allwords&keywords=&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&emailassigned_to1=1&emailtype1=substring&email1=&emailassigned_to2=1&emailreporter2=1&emailcc2=1&emailtype2=substring&email2=&bugidtype=include&bug_id=&votes=&chfieldfrom=&chfieldto=Now&chfieldvalue=&cmdtype=doit&order=Bug+Number&field0-0-0=noop&type0-0-0=noop&value0-0-0=

☆PhistucK

[Sam Dutton]

You might also find Boris Smus's post about extending the tools useful:

smus.com/extending-chrome-developer-tools

This mostly explains how to write extensions for the tools, but also describes how to build your own front-end.

Sam

[Maggi Trymbill]

I clearly need to brush up on my Chrome related knowledge and start contributing. I was completely in the dark. Thanks for the info guys!

[ryana...@gmail.com]

I think a few of these things are based on it just not being what you're used to.

I like the Chrome console better. I think Firebug's is ugly. Just my opinion.

[Maggi Trymbill]

Agreed. I've been using Chrome for development this whole week now and I've only opened Firefox 2-3 times because I didn't understand what Chrome was showing me. Mainly XHR requests that looked weird to me, only because Firebug shows them in a different way, a way that I'm used to.

[deepak.kh...@gmail.com]