SSTエンジニアブログ

SSTのエンジニアによるWebセキュリティの技術を中心としたエンジニアブログです。

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.77

Google Chrome Developer Toolsとは?

Google Chrome Developer Tools(以下、デベロッパーツール)とは、Google Chromeに搭載されたWeb開発者向けデバッグツールです。この機能を使うことで、Webサイトのファイル構成や通信状況の確認、Javascriptの実行テストなど様々な事が追加のソフトウェア無しで可能になります。
公式のドキュメントはこちらです。

developer.chrome.com

まずは起動してみる

まずはデベロッパーツールを起動してみましょう。適当なサイト(今回は例として http://example.com/ を利用)にアクセスして、F12キーを押します。画面右側に、何やら色々な情報が表示された画面が出てきたと思います。これがデベロッパーツールです。
デベロッパーツールには色々な機能がありますが、今回は「Elements」「Console」「Sources」「Network」「Device Mode」の5機能に絞って簡単な解説を行います。

f:id:cococig:20210608185812j:plain
デベロッパーツール起動時の画面例

表示位置を変更する

各機能の解説に入る前に、デベロッパーツールの表示位置を変更したいと思います。デフォルトでは画面右側に表示されますが、お使いのディスプレイによっては表示範囲が狭くなってしまい見辛くなる人もいると思います。まずはデベロッパーツールの画面右上、点が縦に3つ連なったアイコン(Customize and control DevTools)をクリックしてください。開いたメニューの最上段に「Dock side」という欄があると思います。ここで「別ウィンドウでの表示」「左側に表示」「下側に表示」「右側に表示」の4つからデベロッパーツールの表示位置を選ぶことができます。本記事では、別ウィンドウに表示させた状態で解説を進めていきます。

f:id:cococig:20210608185920j:plain
赤丸で示したメニューより、Dock sideでデベロッパーツール表示位置変更

Elements

まずは画面上部のタブより、Elementsタブを選択してみましょう。このタブでは、現在表示しているページのHTMLソース、及び適用されているスタイルが表示されます。
HTMLソースは、通常であれば階層ごとに折りたたまれています。左側の▶アイコンをクリックすると、各要素が表示されます。また、任意の行をクリックすることで、Stylesタブにその行に適用されているスタイルシートの記述が表示されます。例えば、example.com のh1要素を選択した時の表示は以下のようになります。画面左側にHTMLソース、画面右側にStylesタブが表示されています。

f:id:cococig:20210609151705j:plain
左側がHTMLソース、右側が選択した要素に対応するCSS宣言

StylesタブとComputedタブの使い方は以下で簡単に解説しますが、詳細については公式ドキュメントを参照してください。

developer.chrome.com

Stylesタブ

Stylesタブについて、より詳しく見ていきましょう。h1要素を選択した状態で「Inherited from body」という欄の各設定にマウスカーソルを合わせてみてください。左側にチェックボックスが表示されると思います。font-familyの行のチェックを外してみましょう。ブラウザに表示されている「Example Domain」のフォントが変わったと思います。このように、Styles欄ではCSSの各宣言を適用したり解除したりできます。CSS宣言の追加も可能です。
また、Stylesタブ下部に四角形の図が表示されていると思います。これは「ボックスモデル」というもので、指定した要素本体・padding・border・marginそれぞれの大きさを表しています。h1要素の例だと要素本体(一番内側の青)とmargin(一番外側のオレンジ)にマウスカーソルを合わせると、ブラウザ側の該当部分の色が変わることが分かると思います。ボックスモデルで寸法の数値を変更したい部分をダブルクリックすることで、直接数値を変更することも可能です。

f:id:cococig:20210609152238j:plain
チェックを外すことで、特定のCSS宣言を無効化できる

f:id:cococig:20210609152459j:plain
ボックスモデルの任意の値をダブルクリックで、自由に変更・追加ができる

他にも、Stylesタブには様々な機能があります。

機能名 主な用途
Filter Stylesタブに現在表示されているCSS宣言から、指定文言の検索が行えます。
:hov クリックするとチェックボックスが表示されます。このチェックボックスでは疑似クラスの状態変更が行えます。例えば:hoverにチェックを入れると、選択した要素にマウスカーソルをホバーさせた状態を疑似的に再現できます。
.cls 新たなクラスの追加が行えます。
+ (New Style Rule) 現在選択されているHTML要素について、新たなCSS宣言を追加することができます。

Computedタブ

Stylesタブの隣にはComputedタブがあります。このタブでは、選択した要素に最終的に適用されている宣言のみが表示されます。Stylesタブとは異なり、オーバーライドされた宣言は表示されません。Show allにチェックを入れると、選択した要素に関係ないものも含めて全てのCSS宣言が表示されます。Groupにチェックを入れると、CSS宣言の内容ごとにグループ分けして表示されます。

f:id:cococig:20210609152740j:plain
Computedタブには、オーバーライドされたものを除く適用済みのCSS宣言が表示される

Console

Consoleタブでは、現在表示されているページのスクリプトによるコンソール出力(警告など)の表示、及びJavascriptの実行が行えます。表示する警告のレベルは左側のメニューから選択できます。Javascriptの書き方についてはここでは説明しませんが、コンソール画面に直接入力することですぐに結果が出力されるので、Javascriptの学習や簡単なテストに便利です。
この画面は、ElementsタブやSourcesタブなど、その他の画面の下部に表示されているConsoleタブと同じものです。画面を広く使うことができる、というだけです。
Consoleの使い方についての公式ドキュメントはこちらです。

developer.chrome.com

f:id:cococig:20210609152950j:plain
Consoleタブでは、コンソール出力の確認と簡単なJavascriptの実行が行える

Sources

Sourcesタブでは、HTMLファイルやCSSファイル、スクリプトファイルなど、現在表示しているページを構成するリソースファイルがツリー表示で確認できます。特にスクリプトのデバッグに有用な機能で、スクリプトを逐次実行しながらプログラムを修正することができます。この機能について詳細に解説しようとするとJavascriptの知識が必要になるためここでは割愛しますが、興味のある方はぜひ公式ドキュメントを参照してみてください。

developer.chrome.com

f:id:cococig:20210609153312j:plain
ソースにスクリプトが含まれている場合、画面右側の各欄にデバッグ用の情報が表示される

Network

Networkタブでは、デベロッパーツールを開いている間に発生したネットワークアクティビティが記録されます。試しに、Networkタブを開いた状態でページをリロードしてみてください。ダウンロードされたリソースファイル、HTTPリクエストの結果、ダウンロードにかかった時間などが表示されたと思います。今回例として使用した example.com のページではHTMLファイルが1つダウンロードされるだけですが、一般的なWebサイトでは複数のドメインに対して様々な通信を行っている様子が見られるはずです。
各リソースファイルの名前をクリックすると、その通信の詳細が確認できます。詳細画面の各タブは次のような内容です。

タブ名 機能
Headers HTTPヘッダの内容が確認できます。
Preview HTMLファイルからレンダリングされた画面が表示されます。
Response HTMLソースが表示されます。
Initiator リソースが別のファイルから要求された場合、どこから要求されてリクエストを行ったのかが表示されます。
Timing 通信のどの段階でどれぐらいの時間がかかったのかが表示されます。

他にも、Networkタブでは3G回線などの遅い通信をシミュレートしたり、特定のリクエストだけをブロックしたりなど、様々な機能を使うことができます。詳細については、こちらも公式ドキュメントを参照していただくと早いです。

developer.chrome.com

f:id:cococig:20210609153634j:plain
Networkタブでは、HTTPリクエストの一覧が表示される

f:id:cococig:20210609153755j:plain
各リクエストの「Name」をクリックすることで、詳細情報を確認できる

Device Mode

Device Modeを使うと、スマートフォンなどモバイルデバイスを使用したときの表示をブラウザ上で疑似的に再現することができます。この機能をONにするには、デベロッパーツール左上にある、スマートフォンとタブレットが重なったようなアイコン(Toggle device toolbar)をクリックしてください。ブラウザ側の表示形式がモバイルデバイス向け表示になったと思います。画面上部にあるメニューからは、スマートフォン・タブレットの機種(画面サイズ)の変更、画面拡大設定、処理速度の制限、縦横表示の切り替えが行えます。色々弄ってみましょう。
この機能についての公式ドキュメントはこちらです。

developer.chrome.com

f:id:cococig:20210609154002j:plain
赤丸のアイコンをクリックでDevice modeを有効化

f:id:cococig:20210609154218j:plain
Device modeを有効化すると、画面表示がモバイルデバイス向けになる

まとめ

今回はGoogle Chrome Developer Tools入門として、以下の機能について簡単な解説を行いました。

機能名 主な用途
Elements 主にCSSのテストに使用
Console 警告の確認や簡単なJavascriptの実行に使用
Sources 主にJavascriptのデバッグに使用
Network HTTP通信の監視・テストに使用
Device Mode モバイルデバイス表示のテストに使用

これらの機能を活用することで、WebアプリやWebサイトの製作がスムーズに進みます。また、Device Modeはユーザーエージェントをモバイルデバイスに偽装できるため、弊社脆弱性診断におけるスマートフォン向けサイトの調査などにも利用しています。全ての機能を使いこなすのは難しいかもしれませんが、開発者にとって非常に有用なツールですのでこれを機会にデベロッパーツールを活用してみてはいかがでしょうか。