Adobe Developer Connection(ADC)と連動する開発者向けイベント「ADC MEETUP ROUND2」のセッション5では、グーグル株式会社の北村英志氏により、Chromeに付属している開発者向けツール「Google Chrome Developer Tools」の活用方法が紹介された。

Google Chrome Developer Toolsについて

Google Chrome Developer Tools(以下Developer Tools)は、Chromeに搭載されている開発者向けツールだ。北村氏が会場の参加者にアンケートを取ったところ、Chromeをメインで使っている人は半分ほど。Chromeをメインブラウザーにしている人は結構多いようだ。さらにその中でDeveloper Toolsを使っている人となると、ほとんどいなかった。

「Developer Toolsは、一言で言うとデバッガーです。Webサイトの開発をより簡単にしてくれます」と北村氏は語る。

同様の製品にFirefoxのアドオン「FireBug」がある。FireBugとDeveloper Toolsの違いについて、北村氏は次のように語る。
「まず違う点は、Developer ToolsはChromeに標準搭載されているという点です。つまりインストール時からブラウザーに搭載されています。また、Developer Tools自体がHTML5でできているため、拡張などもしやすい仕組みになっています。そして、進化の速さです。前回のイベントで、Developer Toolsに関する要望をいくつかいただきました。今回のイベントですでに、前回いただいた要望の中から、3つが実現されています」

元々Chromeは「Chromium」というオープンソースのプロダクトで、Chrome自体への機能追加はソースにパッチを当てることで反映されるので、こちらにも挑戦してほしいとのこと。

では、Developer Toolsはどんな時に使うのだろうか?
「例えば、面白いWebアプリを見つけた時。このサイトがどういう風に出来上がっているか調査をしたくなり、その場合、通常はソースを見るのではないかと思います。Developer Toolsであれば、さらにページを構成する要素を構造化してみることができるので便利です」

デザインやインタラクションを含んだフロントエンド系の解析や確認に使えたり、普通にJavaScriptのデバッグにも使えるほか、開発中のWebアプリでどういう改善が必要かの解析にも使えるという。

メトロノームのサンプルを解析

続いてスクリーンに映し出されたのは、メトロノームの形状をした要素が中央にあるWebページだった。
「このメトロノームの下にPlayボタンとStopボタンがあります。Playボタンを押すと、実際にメトロノームになるというアプリケーションです。真ん中にあるおもりの位置を変えるとテンポが変わる仕組みになっています。おもりは、一番下にするとテンポが速くなり、上にいくと遅くなります」

今回のデモは、このメトロノームのWebアプリケーションを実際に解析してみるというものだった。北村氏によれば、このようなアプリケーションを実装する方法として、4つほど選択肢が考えられるという。  

  • 動きがあるところに注目してFlashで作る方法
  • 画像寄りの見方でCanvasもしくはSVGで作る方法
  • 単なる画像を用いてJavaScriptをメインで動きを実装する方法
  • HTMLとCSSのみで実装する方法

ブラウザー上でぱっと見ただけでは、これら4つの中のどれなのかを特定できない。そこで、Developer Toolsによる解析となるわけだが、Developer Toolsの開き方には3つの方法がある。

  • ブラウザーウインドウ右上のレンチ状の形状をしたアイコンより開く方法
  • 要素の上で右クリックでコンテキストメニューを表示し[要素の検証]を選ぶ方法
  • ショートカット(Macなら[Command]+[Shift]+[i]、Windowsなら[Ctrl]+[Shift]+[i])を使う方法

Developer Toolsを開くと、いくつかのタブがスクリーンに表示されていた。その中でも今回は「リソースパネル」「ネットワークパネル」「エレメントパネル」「スクリプトパネル」に絞って解説が行なわれた。

リソースパネルでチェック可能なもの

リソースパネルは、サーバーとの通信の中で登場してくるものを一覧できるパネルだ。リソースパネルでは、左側のペインにFrames/Databases/Local Strorageといった項目が並ぶ。会場では、Frames内にメトロノームの構成ファイルが並ぶ様子が映し出された。metronome.html/metronome.css/metronome.js/social.jsなどである。Fontsという項目も見受けられた。
「今回はWeb Fontsを使ってフォントファイルを読み込む形の実装をしています。これはHTML5から使えるようになっています」
ここでわかったことは、Flashは使われていないという点と画像もないという点だった。

ネットワークパネルでチェック可能なもの

ネットワークパネルは、左にリソースが並ぶ点ではリソースパネルと似ているが、すぐ右にはMethod/Status/Typeなどのパラメーターを表示するエリアがあり、さらにその右にタイムラインのようなものが表示された。

このタイムラインは、各リソースの読み込みを表示しており、ユーザーのアクセス以降に各リソースがどういうタイミングでダウンロードされたかがわかるというものだ。各リソースはブラウザー側で必要とわかった段階でロードされていくため、タイムライン上でもリニアに各リソースが読み込まれていく様子が見て取れた。

また、ネットワークパネルでは、サーバー側にボトルネックがある時に、実際にサーバーが遅いせいかどうかを解析することができるとのこと。その他にもサーバー側のAPIにアクセスするときや、通信内容の中身が見たいときに使うと便利だそうだ。通信の内容を見たいときは、リソースをクリックすることで表示が切り替わり、httpヘッダーやresponseヘッダーの中身を確認することができる。ちなみにcontentというタブでは、画像などのプレビューもできるとのこと。

エレメンツパネルでチェック可能なもの

おそらく会場の中で一番馴染みがあるだろうと北村氏は前置きした上で、エレメンツパネルを紹介した。
「このパネルでは、DOMツリーの参照ができます。今はメトロノームのDOMツリーがDeveloper Toolsに表示されています。DOMツリーというのはダウンロードしてきたHTMLではなく、JavaScriptで制御された後の状態を指します。ちなみに各要素についている三角アイコンをクリックすると階層をたどっていくことができます」
そして、各要素にマウスカーソルを持っていくと、タグと対象要素を画面上と照らし合わせて確認できる様子が実演された。

またエレメンツパネルの開き方として、画面上の要素上で右クリックして要素を参照したり、虫眼鏡アイコンをクリックしたあとで、画面上の要素をクリックすることでもエレメンツパネル上で指定のDOM要素にアクセスすることができる。

このパネルを見てわかったことは、メトロノームはCanvasで作られてはいないという点だった。DOMツリーで選択されている要素に当てられているCSSが右側のペインに表示され、そこでCSSでおもりを表現していることが判明した。 メトロノームのおもりは、CSSのグラデーションと角丸などで作られており、会場では、エレメンツパネルからCSSを変更して重しの形状を自由に変更できる機能が解説された。

ちなみにエレメンツパネルでは、DOM要素やCSSを自由に変更することが可能で、CSSのプロパティに至っては、直接数値を指定できるほか、キーボードの上下キーで1px単位ずつ変更ができたり、Shiftキーを押しながら上下キーを押すと10px単位での変更が可能とのこと。これは普段利用していても、気づいていなかった人も多いのではないだろうか?

続いて北村氏は、CSSペインの有効な使い方として、変更したCSSの再利用方法について解説を行なった。
「例えばFireBugでは、CSSペインで変更したCSSをどこかにメモしておき、テキストエディタで実際のCSSを開いて該当箇所を確認する必要がありました。Developer Toolsでは、CSSの変更の履歴を管理する機能があり、変更したCSSを丸ごとダウンロードすることができます。これで実際のCSSを上書きするだけで、変更を反映できます」

スクリプトパネルでチェック可能なもの

スクリプトパネルは、他のパネルと比べて開発者の方が利用頻度が高いパネルといえるが、このパネルもアプリケーションのロジックを調べるためには重要とのこと。 スクリプトパネルを開くとJavaScript内容が表示されるが、このパネルはそれだけではなく、現在の状態でJavaScript内でどういう変数が使われているかの値もチェックできるそうだ。

また、パネルの左下にある[Show Console]ボタンを押すとコンソールが開き、JavaScriptをその場で実行可能だという。JavaScriptにはブレイクポイントというスクリプトの一時停止ポイントを指定することができ、その行から1行ずつ実行可能なステップインボタンや次の処理から実行可能なステップアウトボタンなども用意されていた。

デモでは、少しだけ処理を動かして、メトロノームのおもりが少しだけ動かせる様子が確認できた。JavaScriptの処理を見た結果、CSSでアニメーション自体を制御していることが明らかになり、つまりはCSSで左右に動くのを繰り返していただけというのが判明した。

高度な使い方の紹介

最後に北村氏は、少し高度な使い方の紹介や未来の機能など、3つのトピックを解説した。1つ目は、FireBugのコンソールに存在する便利な機能が、Chromeでどう実装されているかについて。FireBugと同じ書き方で使える機能がChromeにもあり、例えばコンソールを使っている時に「$0」という書き方で、エレメンツパネルで選択したDOMツリー要素をプログラムに渡せるという機能や、対象の要素について現在行われているイベントをリアルタイムで一覧できる「monitorEvents」といった機能が使えるようになっているとのこと。この辺りは開発者には嬉しい機能ではないだろうか。

2つ目は、Developer ToolsのコマンドAPIについて。「API for Chrome Extentions」という形で、Chromeの拡張機能からDeveloper Toolsを操作できるAPIを用意する予定であるとのこと。こちらもDeveloper Toolsの可能性を感じられる機能だ。

3つ目は、リモートデバッギング。こちらはちょっと将来の話という前置きがあったが、別のブラウザーからChromeのデバッガーを起動して使うことができる機能を考えているという。

北村氏は、ラーニングリソースとして、Developer Toolsでも使えるAPI、Google Code、Developer Toolsのチートシートといったリソースを紹介し、セッションを締めくくった。

関連記事