JavaScriptデバッグ技法
January 27, 2006 1:33 AM by yuugo
偉そうなタイトルですが、JavaScriptを書いていて、デバッグのコツのようなものが出てきましたので、超初心者向けにメモ。
うんともすんとも言わないケース
<html>
<head>
<script type="text/javascript">
function te01(){
alert('ya!');
}
</script>
</head>
<body>
<input type="button" onclick="te01">
</body>
</html>
このソースではエラーさえでません。正しくは「onclick="te01()"」です。PerlやVBに慣れ親しんでいると、括弧をつけずに関数を呼び出しがちですが、JavaScriptでは括弧をつけることで、関数を呼び出すという意味になります。
ワケの分からないエラーが出るケース
<html>
<head>
<script type="text/javascript">
funcion te01(){
alert('ya!');
}
</script>
</head>
<body>
<input type="button" onclick="te01()">
</body>
</html>
これで、ボタンをクリックすると次のエラーメッセージが出ます。
ライン：１０
文字：１
エラー：オブジェクトを指定してください
全く意味が分かりません。行数からみると、「<input type="button" onclick="te01()">」の行でエラーになっていることが分かります。
このエラーメッセージはJavaScriptの概念を多少知っておかなくてはなりません。JavaScriptにとって関数は「オブジェクト」なのです。だから「オブジェクトを指定してください」は「functionが見つからないよ」ということを言っています。でもちゃんとte01()というfunctionを（）つきで指定しています。・・・と思ってよく見たら「function」ではなく「funcion」というスペルミスをしています。このように、そもそもfunctionの呼び出し段階で失敗すると、どこがダメなんだか分からないというのが、JavaScriptのデバッグで躓くところです。
.jsを別ファイルにして構文チェックをしよう
この技はWindows限定です。JavaScriptを.jsの別ファイルにします。そしてその.jsファイルをダブルクリックします。単なるfunctionの連なりですから、何も実行はされません。が構文チェックはしてくれます。先ほどの「funcion」というスペルミスも拾ってくれます。HTMLに組み込まれてからの構文エラーは実時エラーとの切り分けからスタートしなくてはなりませんから、まずは.js単体で構文チェックのみを行うのがいいでしょう。
アドレスバーからオブジェクトブラウズ
ワンライナーというのは、一行で実行可能なプログラムです。プログラム言語でありながら、CUIのコマンドのように扱えます。言語に備わっている関数の挙動などをプログラムに組み込む前に確認するのに便利です。
JavaScriptでもちょっとしたオブジェクトの中の値を見るのに、ワンライナーは有効です。私はブラウザのアドレスバーにこのように入れて、オブジェクトの内容を確認しています。
javascript:alert(document.cookie);
これをアドレスバーにいれてリターンを押すと、クッキーの内容が表示されます。Yahoo!などで試してください。他にも、DOMの構造を確認するのにこんなスクリプトをアドレスバーに入れると、オブジェクトの構造をたどってみることが出来ます。
javascript:alert(document.getElementsByTagName("TABLE").length);
javascript:alert(document.getElementsByTagName("TABLE")[0].outerHTML);
javascript:alert(document.forms.length);
javascript:alert(document.forms[0].outerHTML);
そもそもオブジェクトが見たい理由は、ブラウザの「ソースを見る」では元のソースであり、JavaScriptによって作り上げられたDOM構造は別物だったりします。なのでDOMメソッドを使って見る必要があるというわけです。
自作オブジェクトブラウザ
htaでデバッガもどき（右クリックからダウンロード）を作りました。次のように使います。
- デバッグしたい画面のURLを入れる
- エンター
- jsdebugがwindow.openでURLを開く
- デバッグ対象で見たいオブジェクトをテキストBOXに入力→エンター
- デバッグエリアに、そのオブジェクトのプロパティ一覧がずらずらと出てくる
- プロパティの一つをダブルクリック
- ステートメントの最後にピリオドつきで連結されて、一つ下の階層のオブジェクトが見れる
他にも便利機能をつけています。
- IDがある要素だけリストアップ
- 開発上意味のある要素とデザイン上必要な要素を分けたかったため
- テーブルを可視化
- 全てのテーブルに赤い枠をつけて「ここにテーブルがある」ということを分かりやすくします。テーブルのネストが激しいと、ワケが分からなくなるのでこんなことをしています。
主に、オブジェクトの階層構造をたどる目的で作りましたが、ステートメントでfunction名をそのまま入れれば実行もされますし、値のだ移入もできます。プログラムを一行ずつ試しに流しながら挙動を確認できます。
何よりも、プロパティ一覧が見れますので、それを参考にコーディングが出来ます。たとえば「font-size」「FontSize」「fontSize」のどのプロパティ名が正しいかなんてなかなか分からないでしょう。
たぶん有料の開発ツールにはJavaScritpのデバッガがあるのでしょうが、JavaScriptのオブジェクト構造をJavaScriptで解析するというのが面白おかしいので、作ってみたという次第です。
tags：JavaScript Tips
TRACKBACK URL：
POST COMMENT
TRACKBACKS
? 大手参加でOpen Ajaxプロジェクト発足 by たたみラボアメリカの話ですが、オープンソースを通じてAjaxの普及促進を目指すプロジェクト「Open Ajax」が発表されました。 (ニュースソースはhttp://...
? JavaScriptの関数 by ネットビジネス用CGI Perl HTML Javascriptの情報サイト
関数とは、あるプログラムの処理部分のみを、ひとまとめに集めたものです。
? SafariのJavaScriptデバッガ「Drosera」を使ってみる。 by たたみラボ_blog大井宏友です。 AJAXがずいぶんと広まってきてもう特別なことではなくなってきました。たたみラボでもいくつかのAJAXやJavaScriptリッチUIのサ...
COMMENTS
↓のJavaみたいなtry～catchもJavaScriptで使えますよね
try{
//処理
}catch(e){
alert(e.description);
}
デバッグでたまーに使ってますが、
August 31, 2006 11:18 AM by kunie.description
で表示される行数がかなりいい加減で困っています
try～catchは忘れていました。それいいですね。
行番号がいい加減なのは私も苦労しています。
August 31, 2006 3:13 PM by 山本ゆうご