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と比較しても色あせない使い勝手まできたといえる。