Sample debug session with Google Chrome JavaScript debuger

Sat, 09/27/2008 - 18:33

This article will show you how to use JavaScript debugger in Google Chrome browser.

This article describes debugging JavaScript code in early versions of the Google Chrome browser. The debugger is greatly improved since then so you do not longer need to fight the command line debugger.

After a couple weeks of using Chrome as my primary browser I consider it wonderful. It is not as feature-rich as FireFox with plugins but it is excellent for regular browsing. The thing I've missed the much is JavaScript debugger so I've decided that this time I will dig through the command line Chrome debugger.

At the first, let's talk a little about how we debug. In most of the systems developers debug code by setting breakpoints and review variable values in the breakpoints and use step-by-step debugging, e.g. executing instructions line by line and review how the variables are changed. Google Chrome debugger supports these features but instead of user-friendly GUI it provides developers with command-line debugger.

Let's start from the sample page with a bit of JavaScript:

<html>
<head>
<title>Sample debug page</title>
<script type="text/javascript">
function test(msg) {
  var message = createMessage(msg);
  alert(message);
}
function createMessage(text) {
  var result = getTime()
  result += '\n' + text;
  return result;
}
function getTime() {
  return new Date().toDateString();
}
</script>
</head>
<body>
<button onclick="test('Yes!');">Debug me</button>
</body>
</html>

Then open this page in the browser, press Alt-` (` usually the key before 1 on the first line on the keyboard) to open JavaScript debugger and Ctrl+U to view the source (pressing Alt-` in source view will attach the debugger to the source view window, not to the page we want to debug). Type help in debugger prompt and most likelly your will have something similar to the picture below on your screen:

In this mode you can execute the following commands: break, break_info, clear, help, print, and scripts.

break [location] <condition>: set breakpoint
break_info <breakpoint #>: view breakpoint information
clear <breakpoint #>: delete breakpoint
help [command]: show help for command
print <expression>: evaluate expression and print the result
scripts: shows all scripts debugger can work with

First, let's see what we can debug on the sample page by typing "scripts" command:

$ scripts
[unnamed] (source:"")
[unnamed] (source:"")
file:///C:/Test.html (lines 3-15)
[unnamed] (source:"void(0)")

It seems that first two and last lines exists for even an empty document to what we can debug is between them: file:///C:/Test.html (lines 3-15)

Let's set out first breakpoint. For this we need to call the break command and its syntax is

$ help break
usage: break [location] <condition>
location is one of <function> | <script:function> |
<script:line> | <script:line:pos>

So if we want to set breakpoint on "var message = createMessage(msg);" line we can use:

$ break file:///C:/Test.html:6
set breakpoint #1

and to check the current status of the breakpoint:

$ break_info 1
id=1, hit_count=0, type=script, target=file:///C:/Test.html, line=5

Now click on the button, the debugger will output the following:

paused at breakpoint 1: test(msg=Yes!), file:///C:/Test.html
6:   var message = createMessage(msg);

Let's print breakpoint information and see what is changed:

$ break_info 1
id=1, hit_count=1, type=script, target=file:///C:/Test.html, line=5

and type "help" to review what we can do when the script is paused:

$ help
Status: page is paused
Available commands:
   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

The set of commands is expanded by adding several new commands: args, backtrace, continue, frame, locals, next, source, step, and stepout.

args displays the parameters the current function is called with.

$ args
msg = "Yes!"

backtrace shows function call stack and you can move between contexts using frame command:

$ backtrace
Frames #0 to #1 of 2:
#00 test(msg=Yes!) file:///C:/Test.html line 6 column 17 (position 39)
#01 #<an HTMLButtonElement>.onclick(evt=#<a MouseEvent>)
    file:///C:/Test.html line 20 column 9 (position 143)

Moving to previous frame:

$ frame 1
#1 onclick, file:///C:/Test.html
15:         test('Yes!');

Review the arguments:

$ args
evt = #<a MouseEvent>

Print event argument:

$ print evt
#<a MouseEvent>

Back to our breakpoint:

$ frame 0

Print all local variables:

$ locals
message = undefined

Display source code of the script, 6 lines from line 3rd line:

$ source 3 6
 4: 
 5: function test(msg) {
 6:   var message = createMessage(msg);
 7:   alert(message);
 8: }

next: Executes the current statement and moves instruction pointer to the next instruction in the current function. Visual Studio equivalent: step.
step: Similar to next, except instead of moving over instructions on the current function it moves the debugger into the called functions. Visual Studio equivalent: step into.
stepout: Executes all commands in the current function and stops after function returns the value. Visual Studio equivalent: step out.
continue: Executes all commands till the next breakpoint.

Let's investigate how out code works by executing next command several times and reviewing variables:

$ step
createMessage(text=Yes!), file:///C:/Test.html
10:   var result = getTime()

$ step
getTime(), file:///C:/Test.html
15:   return new Date().toDateString();

$ step
new Date(year=undefined, month=undefined, date=undefined, hours=undefined,
minutes=undefined, seconds=undefined, ms=undefined), [no source]

$ step
getTime(), file:///C:/Test.html
15:   return new Date().toDateString();

$ step
15:   return new Date().toDateString();

$ step
createMessage(text=Yes!), file:///C:/Test.html
12:   return result;

$ locals
result = "Sat Sep 27 2008\nYes!"

$ source
 7:   alert(message);
 8: }
 9: function createMessage(text) {
10:   var result = getTime()
11:   result += '\n' + text;
>>>>  return result;
13: }
14: function getTime() {
15:   return new Date().toDateString();
16: }

$ print result
Sat Sep 27 2008
Yes!

$ print result.length
20

$ stepout
test(msg=Yes!), file:///C:/Test.html
7:   alert(message);

$ source
 4: 
 5: function test(msg) {
 6:   var message = createMessage(msg);
>>>>  alert(message);
 8: }
 9: function createMessage(text) {
10:   var result = getTime()
11:   result += '\n' + text;
12:   return result;

$ step
}

Now the message box should be displayed.

$ continue

continue do not output anything.

Add new comment

Alex@Net

Sample debug session with Google Chrome JavaScript debuger

User login