ChromeのDeveloper Tools

様々なWebページでJavaScriptやCSSが活用されるようになり、WebブラウザにもWeb開発を効率的に行うための機能が搭載されることが一般的になってきている。たとえばFirefoxには古くからFirebugやWeb Developerといったアドオンが存在するし、Internet Explorerも8以降、開発者向けのツールが標準搭載されている。これらのツールを使用するとJavaScriptのデバッグやHTMLドキュメントのDOMツリーのインスペクションや動的な変更、CSSの変更などを行うことができる。

もちろんGoogle Chromeにも開発者向けのツールが標準で搭載されている。JavaScriptのデバッグ等はもちろんのこと、通信速度の測定やJavaScriptのプロファイリングも可能など、かなり高機能なものだ。今回はこのChromeの開発者向けツールの機能について触れてみたい。

Developer Toolsの起動

ChromeのDeveloper ToolsはChromeのツールバーの右端にあるスパナのアイコン-[ツール]-[デベロッパーツール]で起動できる。デフォルトではブラウザの下部に表示されるが、別ウィンドウに分割することもできる。

Developer Toolsには以下のタブがある。

表1 : Developer Toolsのタブ

タブ	説明
Elements	HTMLのDOMツリーを参照・編集することができる
Resources	Webページで使用しているリソースを表示する
Network	Webページの読み込みにかかった時間を表示する
Scripts	JavaScriptのデバッグを行うことができる
Timeline	Chrome上で発生したイベント、メモリ使用量を表示する
Profiles	JavaScriptのプロファイリングを行うことができる
Audits	Webページの最適化すべき点をチェックすることができる
Console	任意のJavaScriptを実行することができる

DOMインスペクタ

Elementsタブでは現在表示しているHTMLのDOMツリーを参照することができる。ブラウザ上で右クリック-[要素を検証]を選択するとElementsタブの該当の要素が選択される。また、ElementsタブでDOMツリーの要素にマウスカーソルをあわせるとブラウザ上でその部分が選択状態となる。タグの範囲がどこからどこまでかわかりやすい。

Elementsタブではダブルクリックすることで要素、属性、テキストなどを編集することができる。編集した内容は即座にブラウザでの表示に反映されるので、CSSの微調整などに便利だ。

JavaScriptのデバッグ

ScriptsタブではJavaScriptのデバッグが可能だ。

任意の位置にブレークポイントを設置し、ステップ実行を行うことができる。スタックフレームや変数を参照したり、任意のウォッチ式の追加など、一般的なIDEに付属するデバッガと遜色のない機能を備えている。

ProfilesタブではJavaScriptのプロファイルを取ることができる。また、ヒープのスナップショットを取得することも可能だ。JavaScriptの動作が遅い場合のボトルネックの解析に使用することができるだろう。

また、Consoleタブでは任意のJavaScriptコードを入力して実行することができ、JavaScriptコードの実行結果を手軽に確認することができる。

性能改善のための機能

NetworkタブではHTMLやJavaScript、CSS、画像ファイルなど、そのページを構成するリソースを取得するためにかかった時間をグラフ表示することができる。

リクエストを送信してからレスポンスが開始されるまでの待機時間、およびレスポンスの取得に要した時間を分けて表示してくれるため、サーバ側の処理に時間がかかっているのか、ファイルサイズの問題でダウンロードに時間がかかっているのかの区別を付けやすい(バーにマウスカーソルをあてるとより詳しい内訳が表示される)。

TimelineタブではChrome上で発生したイベントやメモリ使用量を確認することができる。リアルタイムにメモリの使用量を確認したい場合に便利だ。

Auditsタブではリソースのgzip圧縮やキャッシュ、未使用のCSSルールなどWebページの性能面で改善すべき点をチェックしてくれる。あくまで機械的なチェックであるし、チェック内容も基本的なものばかりだが、参考にはなるだろう。

まとめ

本稿で紹介したとおり、Chromeには高機能な開発者向けツールが付属している。他のブラウザでも類似の機能が提供されていたり、アドオンで追加可能なケースは多いが、これだけ充実した機能が標準で利用可能というのはChromeの大きなメリットといえるだろう。Chromeは軽量・高速なWebブラウザとして多くの支持を集めているが、Web開発ツールとしても活用して欲しい。