【レビュー】

Google Chrome使用のデベロッパへ - GUI JavaScriptデバッガを試してみた!

1 Google Chromeに実装された2つの強力なデバッガ

    富田宏昭  [2009/07/09]

    Google ChromeでデバッグをおこなうWebデベロッパに朗報だ。Chromeの開発者向けツールに、待望のJavaScriptのフル機能デバッガ「Scripts」とサンプルベースの「Profile」が実装された。Devチャンネル(開発版)限定の同機能だが、なにはともあれ一足お先にその新機能をチェックしてみよう。

    より強力になったGoogle Chromeのデバッガとは

    Google Japan Blogは2日(日本時間)、Google Chromeの開発者向けツールとして「Scripts」と「Profiles」タブが追加されたことを発表した。Google Chromeを使用しているWebデベロッパは同機能を使用することで、より強力なJavaScriptデバッギングとプロファイラを簡単に使用できるようになる。

    今回あたらしく実装された「Scripts」と「Profiles」タブはDevチャンネルにて提供される。試してみたい方は(Early Access Release Channels (Chromium Developer Documentation)をよく読み、バックアップを取った上でチャンネルを変更しよう。

    「Scripts」でできること

    Scriptsタブでは、Firebugの「スクリプト」パネルに近い機能が用意されている。

    • JavaScriptのファイル別閲覧
    • コールスタック・変数情報の表示
    • ブレークポイントの設定
    • コードのステップ実行(ステップオーバー、ステップイン、ステップアウト)
    • スクリプト内検索

    これらの機能を簡単なソースコードと図を交えて、紹介しよう。

    HTMLファイル - hello_scripts.html

     <html>
     <head>
       <title>Google Chrome / Scripts test</title>
       <script type="text/javascript" src="./test.js"></script>
       <script type="text/javascript">
       <!--
       function execConsoleLog()
       {
           var foo = 'foo';
           var bar = 100;
           console.log(1);
           console.log(2);
           console.log(3);
           console.log(4);
           console.log(5);
           console.log(6);
           console.log(7);
           console.log(8);
           console.log(9);
           console.log(10);
           console.log(foo);
           console.log(bar);
       }
    
       function load()
       {
         document.getElementById('execButton').addEventListener('click', execConsoleLog, false);
       }
       -->
       </script>
     </head>
     <body onload="load();">
    
     <input type="button" id="execButton" value="scriptsTest">
    
     </body>
     </html>
    

    ファイルにGoogle Chromeでアクセスし、JavaScriptコンソールを開き、Scriptsタブを表示する。

    JavaScriptが記述されているファイルを選択し、表示する。プルダウンで直接ファイルを指定するほか、矢印ボタンで前/次のファイルを表示できるようになっている

    JavaScript実行中にポーズをおこなうと、Call Stackにコールスタック情報が、Scope Variablesにローカル変数とグローバル変数の内容が階層分けで表示される

    JavaScriptの行をクリックするだけで、簡単にブレークポイントを設定できるようになった

    右上の「Search Scripts」より、スクリプト内のテキストを検索

    Ctrl+Fによるショートカットでも同等の機能を持った小窓を呼び出せる。前方/後方一致や色分けなどもおこなってくれるので、できればショートカットキーでの検索に慣れておきたいところ

    これまでGoogle ChromeでJavaScriptデバッギングをするには、GDBライクなCUIのJavaScript Debuggerでおこなう必要があり、GUIが整備されたFirebugやDragonflyと比較するとやや使いにくいイメージがあった。今回あたらしく用意された「Scripts」でJavaScriptデバッグ環境はFirebugやDragonflyと比較しても色あせない使い勝手まできたといえる。

    関連したタグ

    新着記事

    特設サイトの情報

      人気記事

      一覧

        イチオシ記事

        新着記事

        特別企画

        マイナビニュースマガジン