JavaScriptデバッグ ツール作ってみました＜第1回＞

JavaScriptは、開発するのはエディタとWebブラウザがあれば事足りるのに、デバッグが恐ろしく面倒なんです。数千行のコードを書くと、Webブラウザごとの動作の違いだとか、オブジェクトの振る舞いの違いに苦労させられます。そこで、オリジナルでデバッグ ツール「Geranium」を作ってみることにしました。

まず現物を見てもらった方が分かりやすいと思うので、こちらをご覧ください。今回は手軽なサンプルということで、カラー ピッカーを作ってみました。このページにGeraniumを組み込んであります。

■カラー ピッカー

colorPicker.html

「へ？　何も起きないじゃん……」と思った人は大正解です。このままではGeraniumは動き出しません。ブラウザの別画面で立ち上がったカラー ピッカーのURL欄の末尾に、「?debugger=true」を追加してみてください。

デバッグ出力がモリモリと表示されたと思います。これが、GeraniumのJavaScript開発支援機能の中核です。しかし、使い方はそれほど難しくありません。実は、Geraniumを動かすためにHTMLを書き加えるのは次の1行だけです（colorPicker.htmlの6行目）。簡単でしょう？

Geraniumの読み込みHTML

<script language="javascript" src="geranium.js" type="text/javascript"></script>


Geraniumの使い方

Geraniumが無事アクティブになってWebページが読み込まれると、次のような画面になると思います。

このような画面になったところで、実際に使ってみようと思います。ここでは例として、カラーチップ部分はli要素で組んでいますので、その親要素であるul要素の各種プロパティを調べてみることにします。

画面の①から②に引いた線のようにマウスを動かし、②が表示されている状態でクリックします。すると、次のようなダイアログが表示されます。

このダイアログに、「ul」と入力して［Go］ボタンをクリックしてみてください。すると、デバッグ コンソールに次のような大量のメッセージが流れると思います。

デバッグコンソールへの出力1

[enumTagName(cmdLine)]
target TagName : ul(10)
----------
target.tag: UL
target.id:
target.name: undefined
target.innerHTML: <li title="#000000" ...
----------
target.tag: UL
target.id:
target.name: undefined
target.innerHTML: <li title="#330000" ...
----------
target.tag: UL
target.id:
target.name: undefined
target.innerHTML: <li title="#660000" ...
----------
…（後略）…


HTML ElementオブジェクトのinnerHTMLが取得できているので、概要を知るにはそこそこ用に足りる情報が出力されています。より細かい情報を取得してみましょう。メニューから［Misc.］－［tag.style］を選択します。すると「stylesTags」ダイアログが表示されるので、先ほどと同じように、ulと入力して［Go］ボタンをクリックします。すると、

デバッグコンソールへの出力2

[stylesTagName(cmdLine)]
target TagName : ul(10)
----------
following element high-lighted successfully.
target.tag: UL
target.id:
target.name: undefined
target.styles:
0::display
1::clear
2::float
3::background-color
4::border-top-width
5::border-right-width
6::border-bottom-width
7::border-left-width
8::border-top-style
9::border-right-style
10::border-bottom-style
11::border-left-style
12::border-top-color
13::border-right-color
14::border-bottom-color
15::border-left-color
width::
height::
position::
top::
left::
zIndex::
display::block
backgroundColor::blue
opacity::
margin::
…（後略）…


といような出力が得られます。「stylesTags」メニューを使うと、ターゲットとなる要素のスタイル プロパティも列挙されます。ただし、現在のバージョンでは継承プロパティなどを正しくプロパティ値まで表示できないことがあります。ここまで操作すると、デバッグコンソールにかなりの出力が貯まっていると思います。Webブラウザの仕様なのですが、リソースが増えるとスクリプトの反応が鈍くなっていきます。そういう場合は、［Clear］ボタンをクリックすることでデバッグコンソールをキレイにできます。

Geraniumの機能たち

現在のGeraniumの機能は、次のようなものです。

• デバッグ コンソールに出力するためのdebugPrint()関数
• JavaScriptを直書きして実行するためのコマンドライン
• HTML DOM Objectの名前を指定するとハイライトして全プロパティを表示
• 指定idあるいは指定タグの全抽出と全プロパティ表示（およびハイライト）
• 指定idあるいは指定タグの全抽出と全スタイル プロパティ表示（およびハイライト）
• 正規表現を確かめるための独立コンソール

まだ実装していませんが、実装予定のものとしてはAjax用を試験できるコマンドラインや、ページ内のすべてのイベントを検索したりフックしたりする機能の実装を予定しています。実際に僕が、このために作ったといっても過言でないくらい頻繁に使っているのは、正規表現支援機能とJavaScriptコマンドラインです。このコマンドラインは、eval()が評価できるJavaScriptの文であれば、すべて利用できます。アドレスバーに「javascript:」を使って入力する面倒から解放されました。eval()で評価しているため、かならず真偽値がデバッグ コンソールに出力されるので、自前の関数を呼び出した結果を確認するのにalert()文を使わなくて済み、さらにコピペでエディタなどに貼り付けられるというのがポイントです。手軽にログを取りながら開発できるわけです。

正規表現は、ちょっとでも書き方を間違えると何もマッチしないというワナに陥りがちですし、言語の実装により書法にかなりの差があります。また、Webブラウザ レベルで吸収されているハズですが、ひょっとするとRegExpオブジェクトの振る舞いに違いがあるかもしれません。そんな不安を解消するには、実地検証がイチバン！　2秒に1回正規表現を評価するようにしているので、お手軽に正規表現を試せます。ひょっとすると、教育用にもいいかもしれません。この機能は、HTML内のテキスト値を対象に正規表現でマッチできるように拡張していこうと思っています。

次回は、こっそりとGeraniumをバージョンアップしつつ、どのようなJavaScriptで組まれているのか、いくつかのテクニックをご紹介したいと思います。まだまだJavaScriptは面白いですよ！

■Geranium ver.1.00 Alpha 8(utf-8版／Shift-JIS版のアーカイブ)

geranium0100a08.zip