

Chrome Developer Tools: Back to Basics - atularora
http://blog.chromium.org/2011/02/chrome-developer-tools-back-to-basics.html

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

~~~
riledhel
maybe what's he's trying to say it's it should be included with the default
installation, but not activated.

~~~
SpikeGronim
There's no point in adding however many MB of download for an add-on that so
few people use.

~~~
code_duck
It's 1.1 mb, which works out to less than five seconds for most people. I
suppose they do leave it out to keep FF more lean, but that doesn't mean it
Mozilla can't have an official web development add on.

~~~
estel
1.1mb multiplied by the number of downloads of Firefox divided by the
proportion of people that will use them? I don't think that that sounds like
very good value...

~~~
RyanMcGreal
Not to mention that any developer worth his or her salt already knows to
install Firebug, and everyone else doesn't need to.

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

~~~
rahoulb
Just on an appearance level, the inspector in Safari is significantly better
looking than the one in Chrome (although functionally they seem pretty much
equivalent)

~~~
masklinn
The only significant differences I noticed are that the Safari/Webkit version
has nice gradients (in Chrome, the "tools" tab bar is flat and each section
gets a "depressed" gradient when selected, in WebKit the whole bar has a
gradient giving it "volume", nicer to look at) and the whole bar is draggable
in Safari (for resize) whereas in Chrome you have to grab the intersection
between the tools and the actual page.

The former is a nice detail on Saf's part but not really important, the latter
is a real pain in Chrome as I'm mostly using Safari/Webkit for my development.

------
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
Resources is a list of all the resources linked to the current tab (page).

It starts with a nested trees of network resources (Frames > Pages > HTML,
CSS, JavaScript and Images, note that in the case of e.g. CSS files if you
have performed editions via the Elements tab they will be trees as well
listing all previous revisions of the file), then lists the databases, local
storage, session storage, cookies and application cache for the page.

Networks holds most of the old "Resources" tab, it is a detailed view of the
network transactions (HTTP and WebSocket request/responses) performed on the
current page since it was opened.

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

~~~
paulirish
In Chrome DevTools, during runtime $ should always be jQuery (assuming its on
the page). This isn't the case in Firebug AFAIK.

I believe in both tools, at a breakpoint, $ will be the getElementById
shortcut that's baked into the console API. Kind of a bummer, we're trying to
work around this.

You can always do `$ = jQuery;` to redefine it and you'll be good.

~~~
selectnull
Thank you for the explanation. It would be awesome if that gets "fixed". :)

~~~
paulirish
FIXED! <http://crbug.com/70969> :D

(it was actually fixed two weeks back. phew!)

~~~
HaloZero
Awww man, I thought I reported it first :( (My report is the duplicate listed
in the ticket)

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

