Opera 9.5のデバッグツールであるDragonflyを試す

Javascriptのデバッガーは、「各WEBブラウザのJavascriptデバッガの状況」に書きましたが、FirefoxのFirebugが有名です。このため、Javascriptのデバッグを行うときはFirefoxを使用していました。

ですが、ブラウザはFirefoxだけではありませんし、クロスブラウザサポートをするにはFirefoxで動作したからと言って、他のブラウザも動く保障はありません。また、Javascriptの地位が高くなっている現状を考えると、そのほかのブラウザもJavascriptデバッガーがあるほう良いに決まっています。

そのような状況でOpera 9.5ベータ2で、デバッグツールであるDragonflyがついてきましたので、試してみます。

デバッグ用に「Google AJAX Language APIで遊んでみる」で書いたソースを使用しました。

メニューから開発者用ツールを起動します。

起動すると別ウインドで開発者用ツールが起動します。

Firebugで慣れていると、あれソースは?と思ってしまいましたが、今回のサンプルがJavascriptをHTMLに直接埋め込まれているものだったため、inlineのところが実際のソースでした。そこをクリックすることで可能です。

通常のIDEなのでDragonflyは、ブレイクポイントの設定やデータを参照できます。

IDEの動作に慣れていれば、それほど違和感なく(違和感があったのは最初のソースを指定するときでした)できると思います。

試しにデバッグしようとしたのがGoogle AJAX Language APIを用いたソースだったためか、FirebugとDragonflyの相違点を見つけました。このサンプルは、以下のように動作をしています。

1.Google AJAX Feed APIでFeedを取得
2.取得したFeed(3個)のコンテンツ部分をGoogle AJAX Language APIで日本語訳を取得

このため、JavascriptデバッガーとしてFirefoxは以下のようにファイルを読み込んでいるように見えます。実際は、Javascriptのファイル的にはそうなのでしょう*1。

これがDragonflyでは以下のようにファイルがあるように見えます。

Firebugと数などが合いませんし、長いURLに見覚えがありません。そこでクリックしたところ、AJAXでcallbackされて呼ばれたときのデータでした(以下のサンプルはGoogle AJAX Language APIで取得した翻訳の結果が載っています)。

Callbackで呼ばれたときに入っているデータは、Firebugは呼び出される先でブレイクポイントを設定して中身のデータを見ていたのですが、DragonflyではCallbackされた時のデータがワンクリックで確認できます。これは便利です*2。

AJAX系のAPIを使用する人には願ってもない機能だと思います。

まだ、Dragonflyはアルファ版ですので画面周りが微妙ですが、OperaでJavascriptデバッグができるようになるのは非常にうれしいです。これでOperaをセカンドブラウザとして使用しようかと意欲がわいてきました。

*1：ソースを見るとjsapiを読み込んで、その後google.loadでfeedとlanguageを読み込んでいるようです。
*2：Firebugにもあるのかな?