はじめに
Google Chrome は高機能かつ高機能なウェブブラウザです。ウェブ アプリケーションの可能性を先導します。Google は、エンドユーザーに、高速で安定した、多機能なブラウジング体験を提供するために尽力してきました。また、Google は、デベロッパーの皆様に Chrome を快適にご利用いただけるようにしています。Chrome と Safari にバンドルされて利用可能なデベロッパー ツールにより、ウェブ デベロッパーやプログラマーはブラウザやウェブ アプリケーションの内部構造を詳しく調べることができます。
デベロッパー ツールは、オープンソースの Webkit プロジェクトの一部です。この記事の内容のほとんどは、Google Chrome と Safari の両方に当てはまります。ただし、これらのスクリーンショットは Google Chrome 6 を使用して撮影されたものですので、ご使用のブラウザが若干異なる場合があります。
この記事では、デベロッパー ツールの概要を紹介し、特に人気のある便利な機能を紹介します。ターゲット ユーザーは、デベロッパー ツールについて知らない、またはまだ調査していないウェブ デベロッパーです。ただし、経験豊富なウェブ デベロッパーの方にも、いくつかヒントは得られるはずです。
ご使用のデベロッパー ツールのインスタンスが、この記事で紹介しているスクリーンショットと完全に一致しない場合は、5 にアップグレードすることをおすすめします。そうすれば、ここで説明するすべての機能を利用できるようになります。
概要
全体的に見ると、デベロッパー ツールには主に 8 つのグループがありますが、この機能はリリースごとに拡張されています。Chrome 5 では、要素、リソース、スクリプト、タイムライン、プロファイル、ストレージ、監査、コンソールが利用できるようになります。
要素
![[要素] タブ。](https://developer.chrome.com/static/blog/devtools-introduction-part-1/image/elements-tab-98f60be511aa.png?hl=ja)
要素ツールを使用すると、ブラウザが認識しているウェブページを表示できます。つまり、要素ツールを使用すると、未加工の HTML、未加工 CSS スタイル、ドキュメント オブジェクト モデルを表示し、そのいずれかをリアルタイムで操作できます。
関連情報
![[リソース] タブ。](https://developer.chrome.com/static/blog/devtools-introduction-part-1/image/resources-tab-ad1eae2013ffd.png?hl=ja)
リソース ツールを使用すると、ウェブページやアプリケーションがウェブサーバーにリクエストしているコンポーネントや、こうしたリクエストに要する時間、必要な帯域幅を確認できます。各リソースの HTTP リクエスト ヘッダーと HTTP レスポンス ヘッダーを表示することもできます。ページの読み込み時間を短縮するには、リソースツールが便利です。
スクリプト
![[スクリプト] タブ。](https://developer.chrome.com/static/blog/devtools-introduction-part-1/image/scripts-tab-73b45d68d3a2b.png?hl=ja)
ページの JavaScript の内部を確認するには、Scripts ツールを使用します。このページには、そのページで必要なスクリプトの一覧のほか、多機能なスクリプト デバッガが表示されています。JavaScript をその場で変更することもできます。
タイムライン
![[タイムライン] タブ。](https://developer.chrome.com/static/blog/devtools-introduction-part-1/image/timeline-tab-4aee0534564f1.png?hl=ja)
タイミングと速度の高度な分析には、タイムライン ツールで Chrome のさまざまなバックグラウンド アクティビティを詳細に可視化できます。ブラウザでの DOM イベントの処理、ページ レイアウトのレンダリング、ウィンドウの描画にかかる時間を確認できます。
プロフィール
![[パフォーマンス] タブ。](https://developer.chrome.com/static/blog/devtools-introduction-part-1/image/performance-tab-ce7e3d7489121.png?hl=ja)
プロファイル ツールを使用すると、JavaScript スクリプトのパフォーマンスを取得して分析できます。たとえば、実行に最も時間がかかっている関数を把握して、最適化すべき箇所を正確に特定できます。
ストレージ
![[ストレージ] タブ。](https://developer.chrome.com/static/blog/devtools-introduction-part-1/image/storage-tab-6e04e2b41393.png?hl=ja)
最新のウェブ アプリケーションには、単なる Cookie よりも永続性が求められるため、Storage ツールを使用すると、ローカルのブラウザ ストレージの追跡、クエリ、デバッグを行うことができます。このツールは、ローカル データベース、ローカル ストレージ、セッション ストレージ、Cookie に保存されているデータの表示やクエリを行うことができます。
監査
![[Audits] タブ。](https://developer.chrome.com/static/blog/devtools-introduction-part-1/image/audit-tab-2eea90bdbdfbd.png?hl=ja)
監査ツールは、専任のウェブ最適化コンサルタントの隣に座るようなものです。このツールは、ページの読み込み時にページを分析して、ページの読み込み時間を短縮し、認識されている（そして実際の）応答性を向上させるための提案と最適化を提供します。
コンソール
最後に、デベロッパー ツールには多機能なコンソールが備わっています。コンソールから任意の JavaScript を入力して、プログラムでページを操作できます。
起動中
Chrome 内でデベロッパー ツールを簡単に起動できます。
どのオペレーティング システムでも、ページ内の任意の要素を右クリックして、コンテキスト メニューから [要素を検証] を選択するだけです。デベロッパー ツールが開き、クリックした要素に直接移動します。
実際の動作は、Chrome ブラウザで http://www.google.com にアクセスして確認できます。Google ロゴを右クリックすると、次のオプションが表示されます。
[要素を検証] を選択すると、次のようなデベロッパー ツールが表示されます。
[要素] タブ内でデベロッパー ツールが開き、Google ロゴの <img> タグに自動的にドリルダウンされ、ハイライト表示されます。これは、特定のページ要素を生成した HTML を確認したいときに非常に便利です。
簡単なキーボード ショートカットを使ってデベロッパー ツールを開くこともできます。オペレーティング システムによっては、次の手順をお試しください。
- Windows と Linux の場合は、
Control-Shift-Jキーを選択します。 - Mac の場合は、
Command-Option-Jキーを選択します。
最後に、メインのブラウザ メニューからツールを開くよう選択します。
Mac の場合、メインのアプリケーション メニュー バーで、[表示]、[デベロッパー]、[デベロッパー ツール] の順に選択します。
Windows PC では、右上の [ページ] メニューから [デベロッパー]、[デベロッパー ツール] の順に選択します。
デベロッパー ツールを開いたら、Google のホームページで各要素を見てみましょう。
要素
![[要素]タブを選択します](https://developer.chrome.com/static/blog/devtools-introduction-part-1/image/selecting-elements-tab-7ab82e713ea93.png?hl=ja)
デベロッパー ツールの最初のタブは [Elements] です。このウィンドウで、ブラウザに表示されるウェブページの構造を確認できます。
DOM ブラウジング
ページの一部の要素の HTML スニペットを特定する必要がある場合は、多くの場合、[要素] タブにアクセスします。たとえば、画像に HTML id 属性があるかどうかや、その属性の値が知りたい場合があります。
ページの「ソースを表示」するには、[要素] タブが適している場合があります。[要素] タブ内では、ページの DOM が整然と書式設定され、HTML 要素とその祖先と子孫を簡単に確認できます。アクセス先のページは圧縮された HTML や見づらい HTML であるため、ページがどのように構成されるかがわかりにくくなることがよくあります。[要素] タブは、ページの実際の基礎構造を確認するためのソリューションです。
たとえば、Google ホームページの「ソースを表示」からの出力は次のようになります。
上記のソースは最適化および圧縮されているため、読むのは困難です。この形式は、クライアントとサーバーには適していますが、デベロッパーには困難です。
代わりに、ページのソースを読み取る場合は、[要素] タブを使用して、整然とした構文で要素階層をハイライト表示します。
[要素] タブでは、閲覧や操作もでき、ページ上の要素のスタイル、指標、プロパティ、イベント リスナーを変更できる場合もあります。
スタイル ブラウジング
CSS のカスケードという特性によって、[要素] タブの [スタイル] ブラウザはとても便利です。場合によっては、スタイルが折りたたまれて意図しないビジュアルが表示されることもあります。ブラウザがどのスタイルルールを要素に適用しているかを把握することで、そのような問題をデバッグできます。
[要素] タブで要素をクリックすると、その要素に適用されているすべてのスタイルが表示されます。
上のスクリーンショットでは、適用されているスタイル属性すべてを確認できます。たとえば、パディングは <img> 要素の style 属性から直接指定します。ただし、幅と高さはそれぞれネイティブ属性から取得されます。興味深いことに、<center> タグや <body> タグなどから継承されるスタイルもあります。
個々のスタイルとその適用元を確認するのは良いことですが、計算されて要素に適用された後に、最終的なスタイル セットを確認することも非常に役立ちます。以下のスクリーンショットに示すように、[Computed Style] メニューを選択すると最終的なプロダクトが表示されます。
次に、[要素] タブのその他の機能を簡単に説明します。以下の点については、今後の記事で詳しく説明します。
ボックスモデル
[指標] メニューを選択すると、選択した要素に適用されたボックスモデルが表示されます。
要素のプロパティ
JavaScript および DOM で認識されるように、要素のすべてのプロパティを表示するには [Properties] メニューを選択します。
イベント リスナー
そして最後に、[イベント リスナー] メニューから、要素にアタッチされている、または要素内をバブルで通っているイベント リスナーを確認できます。
概要
[要素] タブでは多くの機能を利用できます。個別のメニューについては、今後の記事で詳しく取り上げます。
ブラウザ自体に対してページがどのように表示されるかを確認するには、[要素] タブを使用します。「このスタイルはどのように計算されますか」や「このコンポーネントを生成した HTML タグはありますか」などの一般的な問題は、[要素] タブですばやく簡単に解決できます。
[要素] タブは、より優れた「ソースを表示」のようなものとして、ページを詳細に把握できます。
ページを調べると、そもそも HTML、CSS、画像がどのように到達したのか気になるかもしれません。次に説明する [リソース] タブでは、クライアント ブラウザとウェブサーバーがこれらのリソースを介してどのように通信を行うかを確認できます。
関連情報
アプリケーションが機能したら、次のステップはネットワークと帯域幅のパフォーマンスを最適化することです。サーバーからクライアントへのアプリケーションの転送は、可能な限り迅速かつ効率的に行う必要があります。ページが高速で読み込めることに感謝し、帯域幅とサーバー リソースを節約できます。また、Google の検索結果のランキング（サイトの速度が考慮されるようになりました）のスコアも向上します。
デベロッパー ツールの [Resources] タブは、ウェブサーバーとクライアント ブラウザ間の通信を行うウィンドウです。ブラウザが要求したすべてのリソース（これも驚くべきことに驚くべきことです）、サーバーからリソースを受信するまでの時間、転送中に使用される帯域幅を確認できます。
皮肉なことに、[リソース] タブを実行するとページ読み込みのパフォーマンスに影響するため、デフォルトでは無効になっています。初めてこの機能にアクセスするときは、表示しているページで機能を有効にする必要があります。
多少のパフォーマンスの低下は必要とされないため、デフォルトの [このセッションでのみ有効にする] を選択したままにすることをおすすめします。[リソース トラッキングを有効にする] をクリックすると、ページが再読み込みされ、サーバーから送信されたリソースがデベロッパー ツールによりモニタリングされて表示されます。
次のスクリーンショットは、Google ホームページに必要なリソースと、読み込まれたリソースを示しています。
この画面には多くの情報が表示されているため、1 つずつ見ていきましょう。
デフォルトの動作では、そのページのすべてのリソースをリクエストして読み込むのにかかった時間が表示されます。クライアントから個別のリクエストがいくつ行われているかわからないため、[リソース] リストを下にスクロールすると驚くかもしれません。クライアントから大量のリクエストが送信されると、パフォーマンスに重大な影響が及ぶ可能性があります。何が要求されているかを可視化することが、最適化を行い、最終的にリソースを削減するための最初のステップです。
画像やスタイル シートのみが必要な場合は、メインのタブ ウィンドウの直下にあるメニューを使用してリソースタイプをフィルタできます。
また、リソースがリクエストされる順序についても説明します。タイムライン表示を使用すると、ページ上の特定の要素が他の要素よりも表示が遅れている理由をよりよく理解することができます。
リクエストされたすべてのリソースの概要と、それらのリソースによってリクエストのタイムライン全体がどのように構成されているかがわかったら、個々のリソースの詳細を確認してみましょう。
ページにアクセスするたびに一部のリソースがリクエストされている場合は、キャッシュ ヘッダーが正しく構成されていないことを示しています。左側のリストでリソースをクリックすると、リソースのすべてのヘッダーを表示できます。
[Headers] 表示を使用して、期待される HTTP レスポンス コードが設定され、適切なヘッダーが提供されていることを確認します。たとえば、リソースが変更されることがほとんどないか、一度も変更されない場合、サーバーは 有効期限 ヘッダを設定する必要があります。これにより、その日までリソースを再度リクエストすべきでないことがブラウザに通知されます。これにより、ページに必要な HTTP 接続の量が減少し、サイトの速度が向上します。
概要
[リソース] タブには他にも多くの機能があり、これについては今後の記事で取り上げます。
[Resources] タブを使用すると、クライアント ブラウザとウェブサーバーとの通信状況を確認できます。リクエスト時間、リクエスト サイズ、リクエスト順序などのこの情報を使用して、スマートな最適化を行い、サーバーの負荷と費用を削減し、速度を向上させ、ユーザー エクスペリエンスを向上できます。
速度は、ウェブサイト、ユーザー、検索エンジンにとって非常に重要です。リソースの数とサイズを減らし、適切な HTTP の会話が発生したら、ページで実行されているスクリプトを調査して最適化します。幸いなことに、次に説明する [スクリプト] タブはまさにそれです。
参考情報
デベロッパー ツールについて詳しくは、以下をご参照ください。
本記事のパート 2 では html5rocks.com にご注目ください。他にもさまざまな HTML5 や Chrome の優れたコンテンツをお届けします。