Basic information on Chrome's Debugger

I have been seeing a bunch of questions on how to use chrome's debugger so this is my quick and dirty instruction/tutorial/help page. Hopefully when I get some sleep I can make it better! For right now I tried to get the basics down with a quick walk through example. This is not edited, spell checked, grammer checked, verified, fully completed, fully documented, etc. I wrote it at 2AM! I will edit it!

Initial Findings - Bugs - Quirks

I am finding the debugger to be a little buggy, especially when the JavaScript Console is open with the Debugger. My Chrome Browser has disappeared from the screen like magic. The stepping can lock up and leave you hanging. I am using this on a VERY simple page and having issues. I have not tried this on anything major.

If you close the debugger after you set debug points, the debug points remain. BUT there is a problem with it. When you try to read their info, clear them, or run the code it errors. Looks like they are removed from some sort of memory, but the references are left in the code itself.

I am running this on a Vista Home Premium on a MacBook with Boot Camp with 2 gigs of RAM. I use this set-up daily for some .NET development. If I can track down the errors, I will see if I can log them. For now I am just learning about this thing!

The Commands

These are the commands that you enter in the textbox at the bottom of the debugger. After you enter them, the debugger shows the command with a $ in fornt of it. The follow line(s) will be the output of the command that you enter. There are two command sets depending on the state that the debugger is in: running and paused. NOTE: [] is optional - <> is required

Commands while page is running (no breakpoints hit)

break [condition]

Set a break point where the location is or <script:function> or or

break_info [breakpoint #]

List the current breakpoints [or the details of the breakpoint that is specified]

clear

Remove a specified breakpoint

help [command]

Display the help information for the current status [or the specified command]

print

Output the expression specified which can be string, object, function, variable, etc.

scripts

List all of the scripts attached to the page.

Commands while page is paused in debugging mode (Break point is hit)

args

Summerize the arguments to the current function. Does not display anything if there are no arguments.

break [condition]

See Running Description

break_info [breakpoint #]

See Running Description

backtrace [ ]

Look at all the current frames [or look at the frames specified in the range.]* Looks like you need to specify both. Changed notation here compared to the help in the debugger *

clear

See Running Description

continue

Continues the execution of the script.

frame [frame #]

Shows the current frame [or shows the specified frame]

help

See Running Description

locals

Summarize the local variables for current frame. Displays the variables and their values.

next

Moves to the next line in the code. Seems to be like step.

print

See Running Description

scripts

See Running Description

source [from line] | [ ]

Show the current functions source code [or see a specified line or range of lines]

step

Step through the code line by line when paused in debug mode. * Not sure what is different between step and next *

stepout

* Seems to not work! Should step out of the current debugging step. It should work like continue! *

Basic Walk Through

This should show you how to do some basic steps of adding 2 break points, looking at the arguments, and looking at the variables. It is very basic

The code

The code is a simple html page with an external JavaScript file. There are two functions and two buttons that have hard coded event handlers that call the functions.

The HTML Page