Chrome JavaScript Debugger is as as good as Firebug for Firefox or the Visual Studio tool in IE8 and IE9 if not better. CTRL+SHIFT+J is the key shortcut to use to get at the debugger. Or use the Tool Icon + Tools + JavaScript Console.
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:
Elements
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.
Resources
The Resources panel lets you inspect resources that are loaded / available to the inspected page. It lets you interact with Frame trees containing frame resources (HTML, JavaScript, CSS, Images, Fonts, etc.), HTML5 Databases, Local Storage, Cookies and AppCache.
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]
Scripts
To peer inside the JavaScript for a page, you will use the Scripts panel. Here you can find a list of scripts required by the page plus a full featured script debugger. You can even change the JavaScript on the fly! [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]
Audits
The Audit panel is like having your own web optimization consultant sitting next to you. This panel can analyze a page as it loads and provide suggestions and optimizations for decreasing page load time and increase perceived (and real) responsiveness.
