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にもあるのかな?
※このエントリは CNET Japan ブロガーにより投稿されたものです。朝日インタラクティブ および CNET Japan 編集部の見解・意向を示すものではありません。
メンバー限定サービスをご利用いただく場合、このページの上部からログイン、またはCNET_ID登録(無料)をしてください。