Alex @ Net

Sample debug session with Google Chrome JavaScript debuger

Alex — Sat, 27 Sep 2008 16:33:37 +0000

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

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 like
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 follwing:

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.

Small hint for PDT, use autocomplete in /* @var */type hint.

Alex — Mon, 22 Sep 2008 21:33:34 +0000

@var variable type hint is very useful, but adding it a little bit complex: usually you need to type the class name or copy/paste it from somewhere:

/* @var $controller Zend_Controller_Front */

But with Eclipse PDT templates you can simplify this and add an autocomplete for variable name and class name:

To add this template open Window menu, select Preferences and then navigate to PHP/Templates section in the tree. Then click "New..." button and fill the fields correspondingly:

After that, in the code view type "var" and press Ctrl+Space. Select "var - Variable type hint" in the list and continue by selecting or typing variable name and class name as shown on the video below:

PHP IDE with autocomplete for class properties

Alex — Sat, 13 Sep 2008 12:45:30 +0000

Happy dreams of PHP developers come true. Yesterday I received a letter from Eclipse PDT bugzilla with notification that my proposition about autocomplete for properties that submitted more than a year ago is implemented in PDT 2.0 nightly builds.

To test it you need to download Eclipse and several packages as described on PDT download page.

Property description is not supported yet, e.g. the property description is not displayed in property autocomplete hint as you may see on the screenshot.

Many thanks to the Eclipse, PDT and Zend teams for helping us in coding our cool ideas!

JDK 6u10 silent install/uninstall

Alex — Mon, 08 Sep 2008 09:33:29 +0000

From time to time Sun changes the way on how JDK can be installed silently, without user interaction. I've noticed that in the 6u10 update the silent install method is different from 6u7 so here is two command lines for installing and uninstalling JDK from command line:

Install:
C:\> C:\jdk-6u10-rc-bin-b28-windows-amd64-21_jul_2008.exe /s /v/qn

Install to specific folder and specify additional parameters:
C:\> C:\jdk-6u10-rc-bin-b28-windows-amd64-21_jul_2008.exe /s /v"/qn INSTALLDIR="""C:\path to folder\Java""" IEXPLORER=1 MOZILLA=1 REBOOT=Suppress ADDLOCAL=ALL"

Uninstall:
C:\> msiexec.exe /qn /x {64A3A4F4-B792-11D6-A78A-00B0D0160100}

Help Andrii Nikitin’s son - MySQL support engineer asks for help

Alex — Mon, 14 Jul 2008 21:04:40 +0000

Andrii Nikitin is one of the MySQL support engineers located in Ukraine has asked for help. His son Ivan, who is 2 1/2, is in need of a bone marrow transplant operation.

More details:

http://www.mysql.com/about/help-ivan.html
http://www.phpcult.com/blog/andrii-nikitis-son-needs-our-help/
http://www.google.com/search?q=%22Andrii+Nikitin%22+Ivan+MySQL

Even the small amount can help.

I've created the banner, maybe you can add and link to that page:
http://www.mysql.com/about/help-ivan.html

Example of Canvas 3D drawing in 2D context.

Alex — Sat, 12 Jul 2008 18:15:24 +0000

Just to make some fun at weekend: a nice animation that was created with CANVAS tag and JavaScript. Just view source to investigate how it is created. Will post a source with a little more details soon.

JavaScript language - current state

Alex — Sun, 29 Jun 2008 00:42:06 +0000

JavaScript is a trademark of Sun Microsystems and it was used for technology implemented by Netscape Communications and introduced in the Netscape Communicator Web browser in December 1995.

The first JavaScript language specification, described in ECMA-262 standard, was adopted by the ECMA General Assembly of June 1997 and the “ECMAScript” name means this standard. There are three editions of this standard, known as ES1, ES2 and ES3, and fourth edition is currently under development. The fourth edition is known as JavaScript 2 or ES4 and it describes several very important language enhancements such as classes, packages and namespaces and other features that aid developers in their work. ES4 is expected to be finished by October 2008.

The widely used JavaScript implementation that is closest to ES4 is ActionScript language, which is part of Adobe Flash platforms. In November 2006 Adobe donated 135,000 lines of code of its ActionScript Virtual Machine (AVM) to the Mozilla project. So, Mozilla FireFox 4 may be the first browser that will have ES4.

Another known partial ES4 implementation is JScript.NET, but there is no information on when Microsoft add its support into browser.

Safari and Opera support ES2 and ES3 and there is no official information on when they will support ES4.

FireFox market share

Alex — Thu, 19 Jun 2008 10:59:53 +0000

New release of FireFox have inspired a lot of FireFox-related news and predictions. While I'm quite sceptical about the prediction made by Shayne Tilley about IE disappearing in 2013 it is interesting to see how many Alex@Net visitors use IE and FireFox during last year. What I can say... Viva FireFox!

FireFox 3 questions and answers

Alex — Wed, 18 Jun 2008 21:54:27 +0000

FireFox 3 is great but there are a few minor issues that are frequently asked:

Where is FireBug?
How to run different versions of FireFox in the same time?

Answers are below.

1. Where is FireBug?

FireBug was updated to the version 1.2, which is FireFox 3 compatible. Just delete old one and install this: Firebug 1.2.0b3.

2. How to run different versions of FireFox in the same time?

Install FireFox to the "C:\Program Files\Mozilla FireFox 3" folder and follow this article: Running different versions of Firefox at the same time.

Cross-browser image rotation with JavaScript and CSS

Alex — Tue, 17 Jun 2008 08:59:27 +0000

Here is a cross-browser implementation of image rotation. The code uses IE filters and Mozilla/Opera/Safari Canvas object:

The source code:

<script type="text/javascript">

(function (element, event, handler) {
 if (element.addEventListener)
  element.addEventListener(event, handler, false);
 else if (element.attachEvent)
  element.attachEvent('on' + event, handler);
 else
  element['on' + event] = handler;
})(window, 'load', function () {
 document.img = (function (id, src, width, height) {
  var _element = document.getElementById(id);
  var _canvas = document.createElement('canvas');
  if (_canvas.getContext) {
   // Opera/Safari/FireFox code:
   _element.appendChild(_canvas);
   _canvas.setAttribute('width', width);
   _canvas.setAttribute('height', height);
   var _center = { 'x' : Math.round(width / 2), 'y' : Math.round(height / 2) };
   var _ctx = _canvas.getContext('2d');
   var _img = new Image();
   _img.onload = function () {
    _ctx.translate(_center.x, _center.y);
    _ctx.drawImage(_img, -1 * _center.x, -1 * _center.y);
   };
   _img.src = src;
   return {
    'rotateCW' : function () {
     _ctx.rotate(Math.PI/2);
     _ctx.drawImage(_img, -1 * _center.x, -1 * _center.y);
    },
    'rotateCCW' : function () {
     _ctx.rotate(-Math.PI/2);
     _ctx.drawImage(_img, -1 * _center.x, -1 * _center.y);
    }
   };
  }
  // IE code:
  var _rotation = 0;
  var _filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation={0})';
  _element.style.width = width + 'px';
  _element.style.height = height + 'px';
  _element.style.background = 'url(\'' + src + '\')';
  _element.style.backgroundPosition = 'center center';
  _element.style.backgroundRepeat = 'no-repeat';
  return {
   'rotateCW' : function () {
    _rotation = (_rotation + 1) % 4;
    _element.style.filter = _filter.replace('{0}', _rotation);
   },
   'rotateCCW' : function () {
    _rotation = (4 + _rotation - 1) % 4;
    _element.style.filter = _filter.replace('{0}', _rotation);
   }
  };
 })('image', '/files/n152.sample.png', 150, 150);
});
</script>
<button onclick="document.img.rotateCCW()" style="font-family: arial;">&#8592;</button>&nbsp;
<button onclick="document.img.rotateCW()" style="font-family: arial;">&#8594;</button>
<div id="image" style="margin: 1em;"></div>