【レビュー】Google Chrome使用のデベロッパへ - GUI JavaScriptデバッガを試してみた! (1) Google Chromeに実装された2つの強力なデバッガ | エンタープライズ

【レビュー】

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

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

富田宏昭　 [2009/07/09]

- 1
- 2
- ／2
次へ
最後

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