Clearly, one of them was to utterly destroy Firefox as a web developer tool, by providing with an all-in-one debugging suite. Without any external plugin (like Firefox and Firebug) you can develop or debug websites with ease.
The developer tools can be opened just by hitting F12. They are accessible from the menus too, but it's easier to just press the key. It opens on a per-tab basis, without sharing logs or network traffic analysis, and if you close the browser it won't reopen (unlike FFox's Firebug which remembers if it was open for a given domain).
By default the developer tools panel is docked to the bottom of the browser, but you can undock to a separate window if you want.
To avoid repeating the same a hundred times, whenever I say "edit" inside the dev tools panel, this has a lifespan of "until the next refresh". If you for example change some CSS, or remove an HTML, it will be reset if you click F5 or interact with the page in a manner that results in a refresh.
The console can be opened in most tabs too, but as it has its own I won't spend time explaining it until its time comes.
Also, all sections have a search bar at the top-right of the dev tools. This search is dependant (network traffic, DOM elements, script source code...) so remember that you can always search!
In this view, at the left we have the HTML source view. We can easily navigate expanding and collapsing nodes, clicking on them shows at the bottom the tree hierarchy,
As you can see in the following screenshot, right-clicking on a node also allows you to do lots of interesting things, like watching DOM modifications or live editing attributes, the full node or even deleting it.
At the right side, we can see 6 tabs with a lot of info:
- CSS styles: Both the computed total attributes, and a hierarchy of where each one comes from. We can also add, remove and modify more CSS. The Metrics tab displays a visual "map" of the item dimensions, margins, paddings...
- DOM breakpoints: Those defined with the right-click menu. We can disable or remove them from here.
- Event Listeners: Another jewel. Displaying a list of all events attached to a given node, with some helpful properties and even the source code file and line number where it was attached from.
This view allows to see data related with data storage.
The Frames node contains all data per frame of the tab: HTML source code, CSS stylesheets, script files and images.
The Cookies node contains all cookies fetched in the tab, and we can tamper with them or even delete them if we wish.
Local Storage and Session Storage display all Web Storage data with simple key/value lists. And we also have Application cache and Databases sections, although their use is more dependant of specific needs.
To use the Network panel, remember to either have the developer tools open before loading the page, or refreshing it, so that it can capture all requests.
This view provides realtime network traffic data, from the HTTP method used or response status, to the response type, size, latency, or even impressive details of the time spent:
All of this while being able to filter by type, search or even "preserve" (lock so that even after a refresh the list doesn't empties).
We can filter per file, add watch expressions, check the call stack when we hit a breakpoint, see scope variables, and even debug worker threads.
And two (sadly exclusive) last things we can do are Pretty Print and Edit.
You will get all events, reflows/repaints/recalculations, and some non-JS events like resource loading (because they usually matter, but you can filter them out). It also shows a timeline of memory consumption.
As you can see in the following screenshot, the amount of details given for each event are great. In fact you can notice strange Chrome extension behaviours, like installing a timer for the AdBlock extension when I have the analyzed webpage whitelisted (and thus it should just be ignored).
Click record, perform a few operations in a suspicious section, click again and there you have, a nice profiling report of what consumed most time (in absolute totals or real usage milliseconds).
But let's say some of the results appear ok, and you are handling for example mousemove or other events that generate many events, and yet is not the leaking problem.
Then the "eye" button allows to do a Heap snapshot. Click to take one snapshot. Do something in the page (for example if suspicious about a photo slideshow load a few photos), and click again to have a second snapshot.
Go to the second snapshot, and in the lower part of the bar select "Comparison", like in this screenshot:
Now we have a nice treelist of objects, functions and special structures (like closures), with number of items added, deleted, creation/deletion delta (difference between created and deleted, memory consumed, memory freed and memory consumption delta.
Again we can expand the nodes and see up to the point of each compiled array and its internal values.
And with just one snapsot you can check the shallow size (memory held by an object itself), retained size (total memory that will be freed when the object is is deleted), checking the heap, and the dominators (Garbage Collector-relevant hierarchy of objects).
This section, along with the official Google's PageSpeed Chrome extension, allow to generate network and performance audits. While this audits won't cover all your possible site optimizations, they give general advices, specially regarding bandwidth, resource loading and caching.
It is worth to run it from time to time to check and improve some of the points it advices.
It allows single or multi-line code, gives a really great output, and also serves to read and filter console.xxx() outputs.
Chrome's console is as powerful as Firebug's one, I've seen colleages writing full code blocks here due to the quickness of testing.
Bonus #1: Disabling the cache
Modern browsers tend to have very aggressive caches, and Chrome by far beats everyone else (I've noticed cache inconsistencies even between their own services, like Google+ profile photo and the avatar in the header bar of GMail). So the top #1 feature requested by every web developer was "how to clear or disable the browser cache".
Well, since a few versions, things can't be easier. At the lower right part of the developer tools there is a black gear icon, click it, and you will popup the settings, including the beloved "Disable cache" :)
Bonus #2: Modifying the User Agent String
From the same gear settings as in the disabling cache checkbox, just below it you can also override the user agent, very handy for initial testing of mobile versions, etc. You should always do testing with a proper emulator or real devices, but for the first stages is perfect and now you don't need any extension.
This has been just a basic introduction to Google debugging 101, if you want to deeply learn each option, I recommend you to read the Chrome Developer Tools documentation.
Note: At the time of writing this article, Chrome is at v17.0, just out from beta into the stable channel.