SNSでシェア
Google Chrome Developer Tools入門
はじめに
こんにちは。この春からSSTに入社しました小野里です。これが2本目の記事になります。まだまだ書きなれないですが、何事も経験かなと考えチャレンジしていきたいと思います。
さて、今回はGoogle Chromeの開発者向け機能である「Google Chrome Developer Tools」について、初めて触れる人向けの入門記事を書いていきます。
対象とする読者層
- HTML・CSS・Javascriptについて簡単な知識はあるが、Google Chrome Developer Toolsは特に活用していない
- 簡単なWebアプリやWebサイトの製作経験はあるが、Google Chrome Developer Toolsは特に活用していない
- Google Chrome Developer Toolsに軽く触れたことはあるが、他にどんな機能があるのかはよく分かっていない
環境
この記事は以下の環境を前提としています。
Windows10 Pro 20H2
Google Chrome 91.0.4472.77Google Chrome Developer Toolsとは？
Google Chrome Developer Tools（以下、デベロッパーツール）とは、Google Chromeに搭載されたWeb開発者向けデバッグツールです。この機能を使うことで、Webサイトのファイル構成や通信状況の確認、Javascriptの実行テストなど様々な事が追加のソフトウェア無しで可能になります。
公式のドキュメントはこちらです。
https://developer.chrome.com/docs/devtools/
まずは起動してみる
まずはデベロッパーツールを起動してみましょう。適当なサイト（今回は例として http://example.com/ を利用）にアクセスして、F12キーを押します。画面右側に、何やら色々な情報が表示された画面が出てきたと思います。これがデベロッパーツールです。
デベロッパーツールには色々な機能がありますが、今回は「Elements」「Console」「Sources」「Network」「Device Mode」の5機能に絞って簡単な解説を行います。
デベロッパーツール起動時の画面例
表示位置を変更する
各機能の解説に入る前に、デベロッパーツールの表示位置を変更したいと思います。デフォルトでは画面右側に表示されますが、お使いのディスプレイによっては表示範囲が狭くなってしまい見辛くなる人もいると思います。まずはデベロッパーツールの画面右上、点が縦に3つ連なったアイコン（Customize and control DevTools）をクリックしてください。開いたメニューの最上段に「Dock side」という欄があると思います。ここで「別ウィンドウでの表示」「左側に表示」「下側に表示」「右側に表示」の4つからデベロッパーツールの表示位置を選ぶことができます。本記事では、別ウィンドウに表示させた状態で解説を進めていきます。
赤丸で示したメニューより、Dock sideでデベロッパーツール表示位置変更
Elements
まずは画面上部のタブより、Elementsタブを選択してみましょう。このタブでは、現在表示しているページのHTMLソース、及び適用されているスタイルが表示されます。
HTMLソースは、通常であれば階層ごとに折りたたまれています。左側の▶アイコンをクリックすると、各要素が表示されます。また、任意の行をクリックすることで、Stylesタブにその行に適用されているスタイルシートの記述が表示されます。例えば、example.com のh1要素を選択した時の表示は以下のようになります。画面左側にHTMLソース、画面右側にStylesタブが表示されています。
左側がHTMLソース、右側が選択した要素に対応するCSS宣言
StylesタブとComputedタブの使い方は以下で簡単に解説しますが、詳細については公式ドキュメントを参照してください。
https://developer.chrome.com/docs/devtools/#css
Stylesタブ
Stylesタブについて、より詳しく見ていきましょう。h1要素を選択した状態で「Inherited from body」という欄の各設定にマウスカーソルを合わせてみてください。左側にチェックボックスが表示されると思います。font-familyの行のチェックを外してみましょう。ブラウザに表示されている「Example Domain」のフォントが変わったと思います。このように、Styles欄ではCSSの各宣言を適用したり解除したりできます。CSS宣言の追加も可能です。
また、Stylesタブ下部に四角形の図が表示されていると思います。これは「ボックスモデル」というもので、指定した要素本体・padding・border・marginそれぞれの大きさを表しています。h1要素の例だと要素本体（一番内側の青）とmargin（一番外側のオレンジ）にマウスカーソルを合わせると、ブラウザ側の該当部分の色が変わることが分かると思います。ボックスモデルで寸法の数値を変更したい部分をダブルクリックすることで、直接数値を変更することも可能です。
チェックを外すことで、特定のCSS宣言を無効化できる
ボックスモデルの任意の値をダブルクリックで、自由に変更・追加ができる
他にも、Stylesタブには様々な機能があります。
Computedタブ
Stylesタブの隣にはComputedタブがあります。このタブでは、選択した要素に最終的に適用されている宣言のみが表示されます。Stylesタブとは異なり、オーバーライドされた宣言は表示されません。Show allにチェックを入れると、選択した要素に関係ないものも含めて全てのCSS宣言が表示されます。Groupにチェックを入れると、CSS宣言の内容ごとにグループ分けして表示されます。
Computedタブには、オーバーライドされたものを除く適用済みのCSS宣言が表示される
Console
Consoleタブでは、現在表示されているページのスクリプトによるコンソール出力（警告など）の表示、及びJavascriptの実行が行えます。表示する警告のレベルは左側のメニューから選択できます。Javascriptの書き方についてはここでは説明しませんが、コンソール画面に直接入力することですぐに結果が出力されるので、Javascriptの学習や簡単なテストに便利です。
この画面は、ElementsタブやSourcesタブなど、その他の画面の下部に表示されているConsoleタブと同じものです。画面を広く使うことができる、というだけです。
Consoleの使い方についての公式ドキュメントはこちらです。
https://developer.chrome.com/docs/devtools/#console
Consoleタブでは、コンソール出力の確認と簡単なJavascriptの実行が行える
Sources
Sourcesタブでは、HTMLファイルやCSSファイル、スクリプトファイルなど、現在表示しているページを構成するリソースファイルがツリー表示で確認できます。特にスクリプトのデバッグに有用な機能で、スクリプトを逐次実行しながらプログラムを修正することができます。この機能について詳細に解説しようとするとJavascriptの知識が必要になるためここでは割愛しますが、興味のある方はぜひ公式ドキュメントを参照してみてください。
https://developer.chrome.com/docs/devtools/#javascript
ソースにスクリプトが含まれている場合、画面右側の各欄にデバッグ用の情報が表示される
Network
Networkタブでは、デベロッパーツールを開いている間に発生したネットワークアクティビティが記録されます。試しに、Networkタブを開いた状態でページをリロードしてみてください。ダウンロードされたリソースファイル、HTTPリクエストの結果、ダウンロードにかかった時間などが表示されたと思います。今回例として使用した example.com のページではHTMLファイルが1つダウンロードされるだけですが、一般的なWebサイトでは複数のドメインに対して様々な通信を行っている様子が見られるはずです。
各リソースファイルの名前をクリックすると、その通信の詳細が確認できます。詳細画面の各タブは次のような内容です。
他にも、Networkタブでは3G回線などの遅い通信をシミュレートしたり、特定のリクエストだけをブロックしたりなど、様々な機能を使うことができます。詳細については、こちらも公式ドキュメントを参照していただくと早いです。
https://developer.chrome.com/docs/devtools/#network
Networkタブでは、HTTPリクエストの一覧が表示される
各リクエストの「Name」をクリックすることで、詳細情報を確認できる
Device Mode
Device Modeを使うと、スマートフォンなどモバイルデバイスを使用したときの表示をブラウザ上で疑似的に再現することができます。この機能をONにするには、デベロッパーツール左上にある、スマートフォンとタブレットが重なったようなアイコン（Toggle device toolbar）をクリックしてください。ブラウザ側の表示形式がモバイルデバイス向け表示になったと思います。画面上部にあるメニューからは、スマートフォン・タブレットの機種（画面サイズ）の変更、画面拡大設定、処理速度の制限、縦横表示の切り替えが行えます。色々弄ってみましょう。
この機能についての公式ドキュメントはこちらです。
https://developer.chrome.com/docs/devtools/#mobile-simulation
赤丸のアイコンをクリックでDevice modeを有効化
Device modeを有効化すると、画面表示がモバイルデバイス向けになる
まとめ
今回はGoogle Chrome Developer Tools入門として、以下の機能について簡単な解説を行いました。
これらの機能を活用することで、WebアプリやWebサイトの製作がスムーズに進みます。また、Device Modeはユーザーエージェントをモバイルデバイスに偽装できるため、弊社脆弱性診断におけるスマートフォン向けサイトの調査などにも利用しています。全ての機能を使いこなすのは難しいかもしれませんが、開発者にとって非常に有用なツールですのでこれを機会にデベロッパーツールを活用してみてはいかがでしょうか。
- SNSでシェア
