Chrome Developer Tools
How to get It
Chrome is available for download at http://www.google.com/chrome
How to use it
Never used Chrome before? Getting the console open is simple. On the page you want to work with in Chrome, right click somewhere on the page. You will see an item at the bottom of this menu: Inspect Element. This will open the Developer Console at the bottom of your screen.
For details and tutorials, the Chrome Developers site is a great resource. On the developers site, there is a linkon the left for Documentation. Within this documentation there are details on each panel available. Also, they have links to resources including videos and a forum. There is a getting started video in this resources section.
HTML/CSS Debugging
Once you've chosen to inspect an element, the Elements tab of the console will open with the chosen element hightlighted. You will notice that if you mouse over other elements, they will be highlighted in the screen above and you can switch which element is highlighted in the console by clicking on it.
The Chrome Developer site documentation for the Elements section and the Styles include wonderful descriptions and walk throughs. There is also a video for Element/Style editing.
Script Debugging
The Script tab of the console can be used to work with the javascript on a page. The name of the script file loaded is a drop down list for all of the scripts loaded for that page.
A good, complete explanation on how to use these tools for script debugging is in the documentation for the Scripts panel. Note the Breakpoints and Exceptions subsections of this documentation. There is also video for debugging javascript.
Timing/Performance
Chrome has a Network panel that is pretty much equivalent to Firebug's Net tab, but Chrome also has more advanced Timeline and Profiles tools. Below are descriptions of these panels and links to Chrome's detailed information.
Network
Use the Network panel to learn what components your web page or application is requesting from web servers, how long these requests take, and how much bandwidth is required. You can also view the HTTP request and response headers for each of your resources. The Network panel is perfect for helping you speed up page load times. [more]
Timeline
For advanced timing and speed analysis, the Timeline panel offers in-depth visibility into the various Chrome behind-the-scenes activities. You can learn how long the browser takes to handle DOM events, rendering page layouts, and paint the window. [more]
Profiles
The Profiles tool helps you capture and analyze the performance of JavaScript scripts. For example, you can learn which functions take the most time to execute and zoom in on exactly where to optimize. [more]