Overview of Chrome Debugger

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:


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.

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.

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]

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]


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]

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]

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.

Last but definitely not least, the Developer Tools offers a full featured Console. From the Console, you can enter arbitrary JavaScript to programmatically interact with your page. [more]


About warkworth1

Web Designer and Developer that uses WordPress primarily but also Bootstrap, Foundation Zurb, Ink, and even Magento etc. Love teaching full stack developer tricks with HTML/CSS/JavaScript/PHP/SQL at WordCamps and on my blogs
This entry was posted in coding, reviews. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s