フロントエンド開発において欠かせない存在になっているのがWebブラウザに付随する開発者ツールです。Google Chrome、Firefox、Safari、IEと各ブラウザに実装されていますが、その使い勝手や機能は細かく違っています。
そこで各ブラウザにおける操作性や機能の違いを掘り下げて紹介します。最初になる今回は最も利用者が多いと思われるGoogle Chromeです。
Google Chromeにおける開発者用ツール「DevTools」
Google Chromeやその元になるChromiumではDeveloper ToolsまたはDevToolsと呼ばれています。F12を押すと呼び出されます。
多機能かつ使いやすさとしては逸品ではないでしょうか。
機能はタブに分かれており、
- Elements
- Network
- Sources
- Profiles
- Resources
- Audits
- Console
に分かれています。まず各タブの機能を紹介します。
HTML、スタイルシートを確認できるElements
ElementsタブではHTMLソースの確認やスタイルシートの状態を確認できます。ソースは単にサーバから受け取ったものではなく、その後のJavaScriptによる操作も反映した状態が確認できます。
さらにHTMLを編集したり、要素のCSSパスやXPathでコピーもできます。これを使うことでJavaScriptから操作するDOMの指定が簡単に分かるようになります。
スタイルの設定はどのスタイルシートファイルなのか一目で分かりますし、設定が適用されているかどうかも分かります。適用されていない（そもそもサポートされていない、または上書きされている）場合は打ち消し線が表示されているのですぐに分かります。また、スタイルの設定を追加、編集、外す（チェックボックスを外す）指定も行えます。
HTMLも変更できます。
ただしHTMLの変更やスタイルシートの編集やあくまでもWebブラウザ上だけのものになりますので実際のファイルへは反映されません。再読込すると元に戻ってしまうのでご注意ください。
他にもイベントリスナーの一覧を確認することもできます。ただしこれは実際にaddEventListnerを設定したメソッドが呼ばれるので、jQueryなどのラッピングしてくれるライブラリを使っている場合は処理を追いかけるのは難しいかも知れません。
リソースの読み込み状態を確認できるNetwork
NetworkタブではWebサイトを表示するのに使われている各リソースのダウンロード時間を確認することができます。Webページの表示に時間がかかっている場合、ここでチェックすることで全体の表示にかかっている時間を確認することができます。
JavaScriptのダウンロードにかかる時間であったり、さらにそこから動的に読み込まれるスクリプト群の時間、各種画像など計測してみるとどれくらい時間がかかっているのか一目で分かるようになります。
さらにタイミングごとのスクリーンショットを撮ってくれる機能があります。これを見るとWebサイトの読み込みが完了するまでの表示（大抵崩れていたりするものです）を確認できます。
ネットワーク速度を変える機能があります。一番遅い場合で50KB/sまで落とすことができます。モバイルでの表示速度を確認したり、オフライン時の表示を確認するのに便利です。
ネットワークはプロファイルが多数登録されています。これは自作可能です。
各種リソースの確認ができるSources
Sourcesタブではページを表示する際に読み込んでいる各種コンテンツをツリービューで確認できます。HTML/JavaScript/CSSファイルの他、画像やWeb Fontなども確認できます。HTMLやJavaScriptファイルに対してブレークポイントを差し込むこともできます。これはデバッグではよく使われる機能ですね。
実際にブレークポイントに来た時は行がハイライト表示されます。
マウスオーバーでその値を確認できます。
ウォッチも用意されていますので逐次変化していく値を追いかけることもできます。JavaScriptは変数がすぐにグローバルになってしまうのでウォッチが役立つでしょう。
スタイルシートの内容確認もできます。
Sourcesの中にはスニペット機能もあります。ここによく使う開発用便利スクリプトを残しておくと使い回しができて便利です。
処理にかかっている時間を細かく確認できるTimeline
Timelineタブでは各種処理時間をレコーディングしてグラフ化します。
主にローディング、スクリプト、レンダリング、描画、その他となっています。メモリに関する測定もできます。
CPU/メモリの解析ができるProfiles
ProfilesタブではCPUやメモリのプロファイルができます。
全体の処理について、どこで遅延が発生しているか、メモリが使われているかなどを測定するのに役立ちます。ハイパフォーマンスを求める場合は必須の機能でしょう。
ストレージ、Cookiesの状態が分かるResources
かつてはCookieくらいだったのが、HTML5になって多くのデータがWebブラウザ内部に蓄積できるようになっています。それが可視化されるのがResourcesタブです。
Web SQL、IndexedDB、LocalStorage、Session Storage、Cookies、Application Cache、Cache Storageについてデータを一覧で確認できます。
Webサイトの高速化に関するレポートを出力するAudit
Webサイトにおける改善ポイントを指摘くれるのがAuditタブです。外部JavaScriptファイルに関する指摘や、ブラウザキャッシュ、スタイルシートやJavaScriptの並び順最適化など多くの項目に関してレポーティングします。
開発の基本ともいえるConsole
ConsoleタブはWebアプリケーション開発における基本とも言えるタブです。制限されている変数に対する補完も行われるので効率的なデバッグができます。
関数の中身も確認できます。ただしここからブレークポイントを仕込むことはできません。
その他の機能
その他の機能として、スマートフォンやタブレットの画面サイズをエミュレートする機能があります。
デバイス名を選ぶだけでサイズを設定してくれるのが便利です。
設定ではレンダリングにおける指定ができます。FPS表示はWebゲーム開発で役立つでしょう。
検索機能も便利で、HTML/JavaScript/CSSファイルを縦断的に検索してくれます。正規表現も使えます。
USBをつないで外部デバイスのデバッグにDevToolsを使うこともできます。
各種プラグインによる拡張もサポート
DevToolsはプラグインで拡張ができます。例えばPHPのデバッグメッセージをChromeで受けられるPHP Console、Ruby on RailsであればRailsPanel、Django向けにはDjango Debug Panel、React向けのReact Developer Toolsなどがあります。こうした機能拡張を組み合わせることでより効率的な開発体制ができるはずです。
Google ChromeのDevToolsはHTML5フロントエンド開発において充実した機能を備えています。ぜひ多くの機能を使いこなして安全かつ高速なWebアプリケーションを開発してください。
