新星Webブラウザ「Google Chrome」に付属の2デバッガを使いこなそう

JavaScript Debuggerを使ってみる

JavaScriptのデバッグを行うときはJavaScript Debuggerを用いる。ページメニューをたどって表示させるか、キーボードのAltと@キーを同時に押す。

ページメニューを辿るか、Alt+@キーを押す

JavaScript Debuggerが表示される。Webインスペクタと比較するとシンプルな構成

JavaScript DebuggerではCUIベースでデバッグを行う。FirebugやDragonflyのようなGUIでのデバッグに慣れているユーザや、GDBを使ったことがないユーザは多少とっつきにくいかもしれない。

helpと入力して表示されるコマンドは次のとおり。

break: ブレークポイントを設定
break_info: ブレークポイントを設定した箇所をリスト表示
clear: ブレークポイントを解除
help: ヘルプを表示
print: 式の値を表示
scripts: ロードされたスクリプトの情報を表示

また、ソースコード(debugger_shell.js)やテスタ用のドキュメントを見ると、次のコマンドが用意されていることがわかる。

source: ソースを表示
args: 全引数の情報を表示
locals: ローカル変数の情報を表示
backtrace: 関数呼び出しのバックトレースを表示
next: 次の行へ移動
frame: 関数呼び出しのフレームを表示
step: 現在行の関数にステップイン
stepout: 現在の関数からステップアウト
continue: 処理を続行

これらコマンドの詳しい使い方は、「help」に続けて調べたいコマンドを入力すれば表示される。使い方がわからなくなったらとりあえずhelpで見てみよう。

コマンドのヘルプを見る場合は、helpに続けてコマンド名を入力する

JavaScriptのデバッグをする場合はおもに次のような手順で行う。

ページを表示
JavaScript Debuggerを開く
ブレークポイントを設定する
実際にJavaScriptを実行する
デバッグしたい内容をコマンドで打ち込んでいく

ここでは解説に使用するサンプルファイルに、「jQueryを使ってるならコレ! ウィジェットライブラリの決定版 - jQuery UI」で紹介した文字サイズを動的に変更するサンプルを改変したものを使用する。

HTMLファイル - slider_fontsize.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="./css/jquery-ui-themeroller.css" rel="stylesheet" type="text/css">
<title>jQuery UI 1.5.1 Demos / Slider with API/CSS</title>
<script type="text/javascript" src="./js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="./js/jquery-ui-personalized-1.5.1.min.js"></script>
<script type="text/javascript" src="./slider.js"></script>
</head>

<body>

<div id="slider_ui">
    min(50)← value: <span id="slider_value">&nbsp;</span> →max(300)
    <div id="slider"></div>
</div>
<h1>Slider</h1>

<p>Slider - A sliding input element</p>


</body>

</html>

JavaScriptファイル - slider.js

$(document).ready(function() 
{
    var slider = $('#slider');
    var slider_ui = $('#slider_ui');
    var slider_value = $('#slider_value');

    slider.css( 'width', '300px' ) ;
    slider_ui.css( 'font-size', '12pt' ) ;
    $('body').css( 'font-size', '100.01%' ) ;

    slider_value.text( '100' );

    // slide
    slider.slider(
    {
        min: 50,
        max: 300,
        startValue: 100,
        slide: function set(event, ui)
        {
            $('body').css( 'font-size', ui.value  + '%' );
            slider_value.text( ui.value );
        }
    });
}
);

HTMLにJavaScriptを直書きした場合、HTMLファイル名を指定してブレークポイントを設定することができなかったので、ここではHTMLとJavaScriptとでファイルを分離した。上記ファイルをGoogle Chromeで開く。

サンプルファイルを開き、先ほど同様の手順でJavaScript Debuggerを表示する

ブレークポイントを設定する。ブレークポイントは関数名や「ファイル名 + 行数」で指定することが可能だ。

JavaScript Debugger
attached to jQuery UI 1.5.1 Demos / Slider with API/CSS
$ scripts
[unnamed] (source:"")
[unnamed] (source:"")
file:///C:/test/js/jquery-1.2.6.js (lines 3549)
file:///C:/test/js/jquery-ui-personalized-1.5.1.min.js (lines 1)
file:///C:/test/slider.js (lines 26)
[unnamed] (source:"void(0)")
$ break slider.js:21
set breakpoint #1

上の場合、3行目のscriptsでロードされているスクリプトを確認し、10行目の「break slider.js:21」でslider.jsの21行目「($('body').css( 'font-size', ui.value + '%' ) ;)」にブレークポイントを設定している。

ブレークポイントを設定したあとにスライドを動かすと、さきほど指定した行でブレークする。

スライダを動作させるとpaused at breakpointと表示されブレークする。この状態で各種コマンドを入力しデバッグを行っていく

paused at breakpoint 1: #<an HTMLDivElement>.set(event=#<an Object>, ui=#<an Object>), file:///C:/test/slider.js
21:             $('body').css( 'font-size', ui.value  + '%' ) ;
$ args
event = #<an Object>
ui = #<an Object>
$ print ui.value
101
$ continue
paused at breakpoint 1: #<an HTMLDivElement>.set(event=#<an Object>, ui=#<an Object>), file:///C:/test/slider.js
21:             $('body').css( 'font-size', ui.value  + '%' ) ;
$ print ui.value
102
$ continue

上は、スライダを右方向に動かした後、デバッグをしている様子。6、11行目のprintでui.valueを確認し、8行目のcontinueで処理を続行している。

GDBを使ったことがないユーザは、多少の慣れが必要そうだ。なお一部のコマンドにはエイリアスが設定されている。エイリアスを覚えておけば、すばやく目的の操作ができるようになるだろう。以下は、debugger_shell.jsの197-211行目を基にまとめたものだ。