Chrome Developer Tools: Back to Basics

[code_duck]

I welcome the changes to the CSS tools in particular! While the Inspector is full featured and offers some capabilities not found in Firebug, Firebug still feels more natural and reliable to me. The change to show unfiltered CSS rules is really helpful.

It's odd that Mozilla hasn't officially adopted Firebug as part of Firefox. While Firebug continues to improve, and the Firebug team does a great job, with Google is focusing on this area I suppose at some point I will prefer the Chrome inspector. Why is Firebug still a plugin?

On the darker side of web development, IE's development tools are typically lacking. Does anyone know whether they have been improved in IE 9?

[eddieplan9]

Because less than 0.1% of Firefox's users would ever need Firebug. Unlike Chrome, which is built on top of WebKit and therefore naturally inherits its built-in Developer Tools, Firefox was designed to be lean and focused unlike its notoriously bloated lets-include-everything predecessor. Being a clean, simple browser and leveraging the extension system for customization is the biggest strength of Firefox.

[netghost]

I've actually gotten to quite like the dev tools in Chrome/Safari. I started using them because I was using Chrome anyways.

Editing CSS in Chrome is still more cumbersome, but otherwise I think it's pretty great, especially the timeline and network views.

[contextfree]

I haven't tried the IE9 tools extensively but I did notice that evaluating a JS object in the JS REPL will now let you see the structure of that object as in Chrome, not just display "{Object}" as it did in IE8. That was probably my biggest gripe with the IE8 tools.

[celticjames]

1. If it was part of trunk, you'd have to wait longer for new updates. As it is, Firebug can push updates without waiting on Firefox updates. 2. The Firebug developers and core mozilla developers overlap a lot. There is work done in trunk that complements Firebug. So it's has plenty of official blessing. 3. There isn't any performance advantage to putting it in trunk. Extensions in mozilla are first class citizens. 4. It would probably confuse ordinary users.

[purephase]

I can't recall the tools in releases prior to 9 as I've been using the betas and RC for some time now, but they're actually not that bad.

Firebug and the Chrome developer tools beat them easily, but they have improved.

[nailer]

I actually use Chrome Dev tools more than Firebug these days, but that's because I do work on Chrome Extensions.

They're typically Google: great on a technical level, with a somewhat sketchy UI.

One tip: to add a new item to a style click the whitespace area to the right of '{ '.

[masklinn]

> They're typically Google: great on a technical level, with a somewhat sketchy UI.

They come mostly from the Webkit project itself actually. I'm sure Chrome contributes, but the main driver is Webkit (thus probably Apple)

[te_chris]

I was scratching my head trying to work this out the other day - I ended up heading back to FF and Firebug. Thankyou!

[HaloZero]

I still would prefer the resources tab to split between css/js/images instead of just one giant list of all the resources (including XHR)

[yesimahuman]

Yea I don't understand the resources tab. It's just a mess right now with a huge list of files. It seems like it would be a good place to list what stylesheets were loaded and such, but it seems like the network tab has taken over most of that. I say get rid of it or rename it and move it to the end of the tab list, considering how useless it is for the majority of cases.

[masklinn]

The mixed tab is not "resources" anymore, it's "network" and it's filtrable by type. XHRs don't appear in the new "Resources" tab.

[selectnull]

$0 tip is awesome and new tip to me. Watch the video for demo, but basically it's a reference for selected DOM element. It also appears (not mentioned in the video) that $1, $2, etc references are also created for each DOM element you select in DOM tree view.

[mckoss]

Have you ever notice how '$' is sometimes overridden in the developer tools console - it does not always refer to jQuery when I'm debugging in a breakpoint (thankfully, 'jQuery' always works). This confused me for quite a while.

Is it something that the console is doing or is it some sort of feature of jQuery?

[paraschopra]

Contrary to most comments here I many times prefer IE 8's developer tools over Firebug or Chrome developer tools because of a very simple reason: IE 8 allows debugging JavaScript that is minified and which has all the whitespaces removed. Firebug goes crazy there and I so much wish it highlighted right part of JavaScript code while debugging even when there were no whitespaces in the code.

[btipling]

Is this only in the Developer channel or also the Beta? Also updates on the network view is great, I generally fallback to Firebug for those and wish I didn't have to.

Edit I see it in beta, nice. Still would like a json viewer though.