This debugger is very rich and has added four more panel toolsets since the August 2010 video shown above. Talk about the face pace of development at Google. But also this means two “downsides” :
1)most of the videos are out of date and 2)so is the documentation. Go here for the most up to date help that Google has released so far in terms of documentation.
Lets repeat the keyboard shortcuts to get you started in the Chrome Browser Debugger:
Assume you are in Chrome browser 9.x
CTRL+Shift+I – launches the debugger in resources panel with the console closed
CTRL+Shift+J – launches the debugger in scripts panel with the console open
also clicking the Chrome browser Tool icon and then Tools | Developer Tools is the equivalent of CTRL+Shift+I. The result will pop up the Chrome debugger.
The following is Google’s summary of the Chrome Debugger panelséview modes:
The Elements panel allows you to see the web page as the browser sees it. That is, using the Elements panel, you can see the raw HTML, raw CSS styles, the Document Object Model, and edit these elements live – this means immediate feedback on changes to HTML, CSS, and/or scripts. Go here for more tips on using the Elements panel.
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]
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]