たたみラボ

  • about
  • member
  • r&d
  • blog
  • tatamicast

blog

RSS

JavaScriptデバッグ技法

icon 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>

これで、ボタンをクリックすると次のエラーメッセージが出ます。

ライン:10
文字:1
エラー:オブジェクトを指定してください

全く意味が分かりません。行数からみると、「<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でデバッガもどき(右クリックからダウンロード)を作りました。次のように使います。

  1. デバッグしたい画面のURLを入れる
  2. エンター
  3. jsdebugがwindow.openでURLを開く
  4. デバッグ対象で見たいオブジェクトをテキストBOXに入力→エンター
  5. デバッグエリアに、そのオブジェクトのプロパティ一覧がずらずらと出てくる
  6. プロパティの一つをダブルクリック
  7. ステートメントの最後にピリオドつきで連結されて、一つ下の階層のオブジェクトが見れる

他にも便利機能をつけています。

  • IDがある要素だけリストアップ
    • 開発上意味のある要素とデザイン上必要な要素を分けたかったため
  • テーブルを可視化
    • 全てのテーブルに赤い枠をつけて「ここにテーブルがある」ということを分かりやすくします。テーブルのネストが激しいと、ワケが分からなくなるのでこんなことをしています。

主に、オブジェクトの階層構造をたどる目的で作りましたが、ステートメントでfunction名をそのまま入れれば実行もされますし、値のだ移入もできます。プログラムを一行ずつ試しに流しながら挙動を確認できます。

何よりも、プロパティ一覧が見れますので、それを参考にコーディングが出来ます。たとえば「font-size」「FontSize」「fontSize」のどのプロパティ名が正しいかなんてなかなか分からないでしょう。

たぶん有料の開発ツールにはJavaScritpのデバッガがあるのでしょうが、JavaScriptのオブジェクト構造をJavaScriptで解析するというのが面白おかしいので、作ってみたという次第です。

 

COMMENTS

↓のJavaみたいなtry~catchもJavaScriptで使えますよね

try{
//処理
}catch(e){
alert(e.description);
}

デバッグでたまーに使ってますが、
e.description
で表示される行数がかなりいい加減で困っています

August 31, 2006 11:18 AM by kuni  

try~catchは忘れていました。それいいですね。

行番号がいい加減なのは私も苦労しています。

August 31, 2006 3:13 PM by 山本ゆうご  

POST COMMENT




(書式を変更するような一部のHTMLタグを使うことができます)

必ず利用規約に同意いただいた上で送信ください。

TRACKBACKS

ページトップへ



(C) RECRUIT MEDIA COMMUNICATIONS CO., LTD.