【ハウツー】新星Webブラウザ「Google Chrome」に付属の2デバッガを使いこなそう (3) JavaScript Debuggerを使ってみる | エンタープライズ

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

エンタープライズ

急上昇ワード

[

]

【ハウツー】

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

3 JavaScript Debuggerを使ってみる

富田宏昭　 [2008/09/12]

印刷

先頭
前へ
- 1
- 2
- 3
- ／3

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行目を基にまとめたものだ。