Google Chrome and Javascript/HTML Debugging

After the recent announcement of Google Chrome, a free web browser from Google, and the much hyped Chrome Comic Book, the browser is released and is available for download in more than 100 countries. Google has provided a pre-setup download of 476Kb which inturn fetches the actual browser setup, obviously for statistical purposes.

The first distinct feature in Chrome is that the tabs are above the address bar (unlike all other tabbed browsers where the addressbar is above the tabs), asserting the fact that each tab is a different process(a new instance of the browser) all together.

Now, there are quite a few features in Chrome that’ll come in handy for HTML, CSS and Javascript debugging. (This does not mean that none of them are available for other browsers.)

1. The Chrome DOM Inspector

The HTML DOM (Document Object Model) can be viewed in a neatly formatted tree structure. (Right-Click anywhere on the webpage and click on the “Inspect Element” option in the context menu. )

This is not a new thing. Mozilla has a DOM Inspector which is shipped as an optional component of the Firefox installation. But there are quite a few features of the Google Chrome Inspector that are not available in the Mozilla version. 

The CSS style description on the right 

The Chrome Inspector looks like it took a lot of inspiration from Firebug (a firefox addon, now also available for IE and other browsers). Though Chrome is still not there in terms of features of Firebug, but its a good starting point for a promising future of better tools for web page debugging.

2. Javascript Runtime Console

Another, vastly used feature available in Firebug. The javascript runtime console provides a command line interface to execute javascript commands in the memory space of the current web page. This helps in case you want to inject javscript commands of get debug output for javascript variables and classes.

This feature is more powerful in conjunction with the visual “Add Breakpoint” to a script feature in Firebug, which is missing in Chrome. (There is a Javascript Debugger available which is also a command line tool unlike the visual and intutive method of adding a breakpoint in Firebug)

To invoke the console, right-click on the webpage > Inspect Element; then click on the Show Console button, second from bottom left of the inspector window. Or click “Esc” while the focus in on the inspector window.

Or click on “Control the current page” icon on the right of the address bar. Inside the menu go to Developer > Javascript Console

3. Javascript Debugger

To invoke, go to “Control the current page” > Develoer > “Debug Javascript”.

The available commands while the page is running:

• break [location] <condition>
• break_info [breakpoint #]
• clear <breakpoint #>
• help [command]
• print <expression>
• scripts

Commands available while the page is paused:

• args
• break [location] <condition>
• break_info [breakpoint #]
• backtrace [from frame #] [to frame #]
• clear <breakpoint #>
• continue
• frame <frame #>
• help [command]
• locals
• next
• print <expression>
• scripts
• source [from line] | [<from line> <num lines>]
• step
• stepout

Some developers should find it easy to debug using the commadline debugger, while others might not. I searched for some documentation on how to use it in Chrome, but could not find any relevant resource.

4. Memory Usage

This feature in Chrome allows you to view the (not-so) detailed memory statistics of each webpage. Though it does not report the complete profiling info, this stat can be used to check for memory leaks in a JS script.

To invoke the Memory Usage Stats in Chrome, Right Click on the top blue window panel and click on Task manager. Click of stats for nerds inside the task manager window. (Or simply type “about:memory” in the addressbar)

You can keep hitting F5 (refresh) on this tab to check if there is an increase in the memory usage for any webpage.

Read this web developer FAQ for a complete list of features in Chrome.