Chrome デベロッパー ツールの概要（パート 1）

はじめに

Google Chrome は機能豊富でパワフルなウェブブラウザであり、ウェブ上のアプリケーションでできることの可能性を開拓しています。Google は、非常に高速で安定した、豊富な機能を備えたブラウジング エクスペリエンスをエンドユーザーに提供できるよう尽力してきました。また Google は、デベロッパーの皆様が Chrome を快適にご利用いただけるようにしています。デベロッパー ツールは Chrome と Safari にバンドルされており、ウェブ デベロッパーやプログラマーがブラウザやウェブ アプリケーションの詳細な内部構造を把握できるツールです。

デベロッパー ツールはオープンソースの Webkit プロジェクトの一部です。この記事で説明する内容のほとんどは、Google Chrome と Safari の両方に当てはまります。ただし、スクリーンショットは Google Chrome 6 を使用して撮影されたため、ブラウザによって若干異なる場合があります。

この記事では、デベロッパー ツールの概要ツアーを取り上げ、特によく利用される便利な機能を紹介します。Google のターゲット ユーザーは、デベロッパー ツールについて知らなかった、または調査していないウェブ デベロッパーです。経験豊富なウェブ デベロッパーの方にも、ヒントを 1 つか 2 つ教えていただけるはずです。

デベロッパー ツールのインスタンスが、この記事で紹介しているスクリーンショットと完全に一致しない場合は、5 にアップグレードすることをおすすめします。5 にアップグレードすれば、ここで説明したすべての機能を利用できるようになります。

概要

デベロッパー ツールは主に 8 つのグループに分かれており、リリースごとに機能が拡張されています。Chrome 5 で、要素、リソース、スクリプト、タイムライン、プロフィール、ストレージ、監査、コンソールを利用できるようになりました。

要素

[要素] タブ。
[要素] タブ

要素ツールを使用すると、ブラウザが見ているとおりにウェブページを表示できます。つまり、Elements ツールを使用すると、未加工の HTML、未加工の CSS スタイル、ドキュメント オブジェクト モデルを確認し、そのいずれかをリアルタイムで操作できます。

リソース

[Resources] タブ。
[リソース] タブ

リソースツールを使用して、ウェブページまたはアプリケーションがウェブサーバーにリクエストしているコンポーネント、リクエストの所要時間、必要な帯域幅を確認する。各リソースの HTTP リクエスト ヘッダーと HTTP レスポンス ヘッダーを表示することもできます。リソースツールは、ページの読み込み時間を短縮するのに最適なツールです。

スクリプト

[Scripts] タブ。
[スクリプト] タブ

ページの JavaScript 内部をピアリングするには、Scripts ツールを使用します。このページに必要なスクリプトのリストと、フル機能のスクリプト デバッガーが用意されています。JavaScript をその場で変更することもできます。

タイムライン

[タイムライン] タブ。
[タイムライン] タブ

タイムライン ツールでは、Chrome のさまざまなバックグラウンド アクティビティを詳細に可視化できるため、タイミングや速度の高度な分析が可能です。ブラウザでの DOM イベントの処理、ページ レイアウトのレンダリング、ウィンドウのペイントにかかる時間を確認できます。

プロフィール

[パフォーマンス] タブ。
[パフォーマンス] タブ

プロファイル ツールを使用すると、JavaScript スクリプトのパフォーマンスを取得して分析できます。たとえば、実行に最も時間がかかっている関数を把握して、最適化すべき箇所をピンポイントで特定できます。

ストレージ

[ストレージ] タブ。
[ストレージ] タブ

最新のウェブ アプリケーションには、単に Cookie よりも高い永続性が要求されます。Storage ツールを使用すると、ローカルのブラウザ ストレージを追跡、照会、デバッグできます。このツールは、ローカル データベース、ローカル ストレージ、セッション ストレージ、Cookie に保存されたデータの表示とクエリを行うことができます。

監査する

[Audit] タブ。
[監査] タブ

監査ツールは、お客様専任のウェブ最適化コンサルタントが近くにいるようなものです。このツールは、ページの読み込み時にそのページを分析し、ページの読み込み時間を短縮してユーザーの目にとまる（そして実際の）応答性を高めるための推奨事項や最適化を提案します。

コンソール

[Console] タブ。
[コンソール] タブ

最後に、デベロッパー ツールにはフル機能のコンソールも用意されています。コンソールで任意の JavaScript を入力し、プログラムでページを操作できます。

起動中

Chrome 内からデベロッパー ツールを簡単に起動できます。

オペレーティング システムを問わず、ページ上の要素を右クリックして、コンテキスト メニューから [要素を検証] オプションを選択します。デベロッパー ツールが開き、クリックした要素に直接ドリルダウンできます。

実際の動作を確認するには、Chrome ブラウザで http://www.google.com にアクセスしてください。Google ロゴを右クリックします。次のオプションが表示されます。

インスペクタを開きます。
インスペクタを開く

[要素を検証] を選択すると、以下のようなデベロッパー ツールが表示されます。

要素インスペクタの内部
要素インスペクタの詳細

[要素] タブ内でデベロッパー ツールが開き、Google ロゴの <img> タグまで自動的にドリルダウンしてハイライト表示されます。これは、どの HTML が特定のページ要素を生成したのかを知りたい場合に非常に便利です。

デベロッパー ツールは、シンプルなキーボード ショートカットを使って開くこともできます。オペレーティング システムに応じて、次の手順をお試しください。

  • Windows と Linux では、Control-Shift-J キーを選択します。
  • Mac の場合は Command-Option-J キーを選択します。

最後に、メインのブラウザ メニューからツールを開くこともできます。

Mac の場合は、メインのアプリケーション メニューバーから [表示]、[デベロッパー]、[デベロッパー ツール] の順に選択します。

Mac で Dev Tools を開きます。
Mac で Dev Tools を開く

Windows PC の場合は、右上のページメニューを使用し、[デベロッパー]、[デベロッパー ツール] の順に選択します。

Windows で Dev Tools を開きます。
Windows で Dev Tools を開く

デベロッパー ツールを開いたら、さっそく Google のホームページの要素を見てみましょう。

要素

[要素] タブを選択する。
[要素] タブを選択する

デベロッパー ツールの最初のタブは [要素] です。このウィンドウは、ブラウザで見ているウェブページの構造を表示します。

DOM ブラウジング

[要素] タブは、ページの特定の部分の HTML スニペットを特定したいときによく利用されます。たとえば、画像に HTML の id [ID] 属性があるかどうか、その属性の値について知りたいとします。

ページの「ソースを表示」するには、[要素] タブの方が便利な場合があります。[要素] タブ内には、ページの DOM が適切にフォーマットされ、HTML 要素とその祖先、子孫が簡単に表示されます。アクセスするページでは多くの場合、圧縮されていない、または見づらい HTML が使用されており、ページ構成を把握するのが困難です。[要素] タブは、ページの実際の基本構造を表示するためのソリューションです。

たとえば、Google ホームページの「ソースを表示」からの出力は、次のとおりです。

Google.com の圧縮ソース
Google.com の圧縮ソース

上記のソースは最適化、圧縮されているため、読みにくい。この形式はクライアントやサーバーには適していますが、デベロッパーにとっては難しい作業です。

ページのソースを読みたい場合は、[要素] タブを使用して、プリティ プリントされた構文でハイライト表示された要素階層を表示します。

要素インスペクタでは、HTML をプリティ プリントできます。
Elements Inspector で HTML をプリティ プリントする

[要素] タブでは、ページ上の任意の要素について、ブラウジングや操作も可能で、スタイル、指標、プロパティ、イベント リスナーを変更することもできます。

スタイルの閲覧

CSS のカスケード特性により、[要素] タブの [スタイル] ブラウザは便利です。スタイルが崩れ落ち、意図しない画像が表示されることがあります。ブラウザが要素に適用しているスタイリング ルールを把握しておくと、問題をデバッグするのに役立ちます。

[要素] タブで任意の要素をクリックすると、その要素に適用されているすべてのスタイルが表示されます。

インスペクタの CSS スタイル設定
Inspector の CSS スタイル設定

上のスクリーンショットを見ると、適用されているすべてのスタイル属性がわかることがわかります。たとえば、パディングは <img> 要素のスタイル属性から直接取得されます。幅と高さは、それぞれのネイティブ属性から取得されます。興味深いことに、<center> タグや <body> タグなどから継承されたスタイルがあることがわかります。

個々のスタイルとその出所を確認できるのは便利ですが、計算されて要素に適用された後に、最終的なスタイルセットを確認することも非常に有益です。以下のスクリーンショットのように、[計算済みスタイル] メニューを選択すると、最終的な成果物が表示されます。

ブラウザで計算されたスタイルも表示されます。
ブラウザで計算されたスタイルも表示されます。

次に、[要素] タブのその他の機能を簡単に見ていきましょう。これについては、今後の記事で詳しく説明します。

ボックスモデル

[指標] メニューを選択すると、選択した要素に適用されたボックスモデルを確認できます。

要素のボックスモデルの表示。
要素のボックスモデルの表示

要素のプロパティ

[プロパティ] メニューを選択すると、JavaScript や DOM で認識されるとおり、要素のすべてのプロパティを確認できます。

DOM 要素のプロパティの表示
DOM 要素のプロパティの表示。

イベント リスナー

さらに、[イベント リスナー] メニューから、要素にアタッチされているイベント リスナーや、バブルで表示するイベント リスナーも確認できます。

DOM 要素のイベント リスナーの表示
DOM 要素のイベント リスナーの表示。

まとめ

[要素] タブにはさまざまな機能があります。個々のメニューについては今後の記事で詳しく説明します。

[要素] タブは、ブラウザでページがどのように表示されるかを確認する場合に使用します。「このスタイルはどのように計算されますか？」や「このコンポーネントを生成した HTML タグ」など、よくある問題には、[要素] タブですばやく簡単に回答できます。

[要素] タブは「ソースの表示」のようなもので、ページを明確に把握できます。

ページについて調べた後は、そもそも HTML、CSS、画像がどのようにそこにたどり着いたのか疑問に思うかもしれません。次に説明する [Resources] タブでは、クライアント ブラウザとウェブサーバーがこれらのリソースを送信するためにどのように通信しているかを示します。

リソース

アプリケーションが機能したら、次のステップはネットワークと帯域幅のパフォーマンスの最適化です。サーバーからクライアントへのアプリケーションの転送は、できるだけ迅速かつ効率的に行うことを目指してください。ユーザーは、ページ読み込みの速さに感謝します。帯域幅やサーバー リソースの節約にもつながり、Google の検索結果のランキングで上位を獲得することもできます（サイトの速度が考慮されるようになりました）。

デベロッパー ツールの [Resources] タブは、ウェブサーバーとクライアント ブラウザ間の通信を示すウィンドウです。ブラウザからリクエストされているすべてのリソース（これはいつも驚きです）、サーバーからリソースを受信するのにかかる時間、転送中に使用されている帯域幅を確認できます。

皮肉なことに、[リソース] タブを実行するとページ読み込みのパフォーマンスに影響するため、デフォルトでは無効になっています。この機能に初めてアクセスするときに、表示しているページで機能を有効にする必要があります。

リソース トラッキングを有効にする。
リソース トラッキングを有効にする。

わずかなパフォーマンスの低下を不必要に発生させたくないため、デフォルトの [このセッションでのみ有効にする] を選択したままにすることをおすすめします。[リソースのトラッキングを有効にする] をクリックすると、ページが再読み込みされ、サーバーから送信されたリソースがデベロッパー ツールによってモニタリングされて表示されます。

次のスクリーンショットは、Google ホームページに必要なリソースと読み込まれたリソースを示しています。

Google.com のリソース トラッキング。
Google.com のリソース トラッキング。

この画面には多くの情報が表示されます。1 つずつ見ていきましょう。

デフォルトの動作では、ページのすべてのリソースをリクエストして読み込むのにかかった時間が表示されます。クライアントが行っている個別のリクエストの数がわからない場合、[リソース] リストを下にスクロールすると驚かれるかもしれません。クライアントからのリクエスト数が多いと、パフォーマンスに重大な影響を与える可能性があります。何が要求されているかを可視化することが、最適化と最終的なリソース削減への第一歩です。

画像やスタイルシートのみが必要な場合は、メインタブ ウィンドウのすぐ下にあるメニューを使用してリソースタイプをフィルタできます。

イメージ リソースのみを表示しています。
画像リソースのみを表示する。

また、リソースがリクエストされる順序についても説明します。タイムライン表示を使用すると、ページ上の特定の要素が他の要素よりも遅れて表示される理由を理解しやすくなります。

リクエストされたすべてのリソースの概要と、それらがリクエストのタイムライン全体を構成する仕組みを確認したら、個々のリソースをドリルダウンします。

ページにアクセスするたびに一部のリソースがリクエストされている場合は、キャッシュ ヘッダーが正しく構成されていないことを示しています。左側のリストでリソースをクリックすると、そのリソースのヘッダーをすべて表示できます。

リクエスト ヘッダーの表示
リクエスト ヘッダーの表示

ヘッダー表示を使用して、想定する HTTP レスポンス コードが設定され、適切なヘッダーが指定されていることを確認します。たとえば、リソースがほとんどまたはまったく変更されない場合、サーバーでは、はるかに先の日付に対して 有効期限ヘッダーを設定する必要があります。これにより、この日まではリソースを再度リクエストしないことがブラウザに通知されます。これにより、ページに必要な HTTP 接続数が少なくなるため、サイトの速度が向上します。

まとめ

[リソース] タブには他にも多くの機能がありますが、これについては今後の記事で説明します。

[Resources] タブを使用して、クライアント ブラウザとウェブサーバーの通信状況を確認できます。リクエスト時間、リクエスト サイズ、リクエストの順序などの情報を使用すると、スマートな最適化を行い、サーバーの負荷と費用を削減し、速度を向上させ、ユーザー エクスペリエンスを向上させることができます。

速度は、ウェブサイト、ユーザー、検索エンジンにとって非常に重要です。リソースの数とサイズを減らし、適切な HTTP 会話が発生したら、次のステップは、ページで実行されているスクリプトを調査して最適化することです。幸いなことに、次に説明する [Scripts] タブでこれを行います。

参考情報

デベロッパー ツールについて詳しくは、以下をご覧になることをおすすめします。

そしてもちろん、この記事の第 2 部では html5rocks.com と、その他の多数の HTML5 および Chrome に関するコンテンツをお見逃しなく。