Google ChromeのJavascript Debuggerを試す

Chromeのタブ毎にプロセス起動することと速いJavascriptエンジンを持っていることはJavascriptのスクリプトを書く者としてはすばらしいブラウザに見えます。

前者の仕様は、先日公開したスクリプトでデバッグ中に無限ループになりそのたびにブラウザを再開していました。お陰でデバッグ中のブラウザに広げていた資料ページも一緒に落ちて困りました。Chromeならこの心配もありません(無限ループさせる方が駄目なんですけどね)。後者の能力は、誰の目にも魅力です。

但しJavascriptを動かす上でどれだけ優秀なプラットフォームでもデバッグしづらければ、開発メインブラウザに出来ません。そこでChromeのJavascript Debuggerを使用してみました。

まず、デバッグするファイルを準備しました。マチンの公式を用いて円周率を計算するjsファイルです。参考にさせていただきましたサイトではHTMLとJavascriptが一緒になっているため、それを分割しています。それをソース置き場のpai.zipにあります。

これを自分のPCにダウンロード&解凍してpai.htmlをChormeにドラッグアンドドロップしてください。

次に、URL窓の横にあるファイルの様なアイコン(ページメニューと言うらしいです)をクリックして「開発/管理」→「Javascriptをデバッグ」を選択します。Javascript Debuggerが起動します。

下にある窓に"help"と打ってみましょう。

今使用できるコマンド出てきます。私はこれと上の"attached"を見た瞬間、「gdb?*1」と思ってしまいました。gdbならば経験があるのでまずは、"help break"と打ってみますと以下の様な結果が返ってきました。

これでbreakの使い方が分かりました。そこで、ブレイクポイントを登録してみましょう。"b pai.js:13"と投入します。

ブレイクポイントが登録できました。あれなんで"b"なの、"break"じゃないのと思われるかも知れませんが、そこはgdbっぽいのでbで代用できます。

ブレイクポイントを設定できたので、ブラウザの方で「計算」ボタンをクリックしましょう。

そうするとJavascript Debuggerがブレイクポイントで止まります。

では、中身のデータを見てみましょう。"p i"と投入します。

データを表示できました。但しデータの書き換えに関してはhelpを見てもわかりませんでした。後は、n/step/stepout/continue等で次の行などに移動してください。また、ブレイクポイントの削除は"clear 1"等で出来ます。

とりあえずはコンソールにしかない時代遅れなブラウザよりは十分にJavascriptのデバッグが出来ます。これだけ速いJavascriptエンジンとデバッグのAPIがあるのですから、早く皮(IDE)を被せてください。お願いします。

*1：gdbの詳細なのは「gdb を用いたデバッグ方法」等参照してください。