Google Chromeデベロッパーツールの基本的な使い方をわかりやすく解説

　デベロッパーツールとは、Google Chromeに標準搭載されている開発者用の検証ツール（デバッグツール）で、Webサイトのパフォーマンスを向上させるための多くの機能が搭載されています。

　この記事では、デベロッパーツールの中でも特に利用頻度の高い、HTMLとCSSの検証をするための「Elementsパネル」と、スマートフォン表示を検証するための「デバイスモード」に的を絞って解説していきます。

　今まで、デベロッパーツールを使ったことが無い方でも分かりやすい、初心者向けの内容になっています。この記事の内容を習得すると、ページ修正前の表示検証や、表示崩れの原因特定などができるようになると思います。ぜひ実務で活用してみてください。

※本記事の公開／更新時のGoogle Chromeのバージョンは107。

起動方法

　まずは、デベロッパーツールで検証したいWebページ、またはローカル環境で制作中のHTMLファイルをGoogle Chromeで開きましょう。ページが開いたら以下の手順で、デベロッパーツールを起動させます。

Windows版の起動方法

　Google Chromeの右上の3点リーダーアイコン（⋮）から、[その他のツール] > [デベロッパーツール]をクリックします。

[起動方法のショートカットキー]

Ctrl + Shift + i

macOS版の起動方法

　Google Chromeの右上の3点リーダーアイコン（⋮）から、[その他のツール] > [デベロッパーツール]をクリックします。

[起動方法のショートカットキー]

command　+　option + i

表示位置の変更

　デベロッパーツールを初めて起動した場合、デフォルトの表示位置はブラウザ内の画面下側に分割表示されます。

　表示位置は、画面下側の他に、画面の左側／右側／別ウィンドウ表示の4つのパターンに変更することが可能です。自分が作業しやすい表示位置に変更しましょう。

　表示位置の変更方法は、デベロッパーツールの右上にある3点リーダーアイコン（⋮）をクリックし、表示位置の変更アイコンをクリックします。

画面下側表示

画面左側表示

画面右側表示

別ウィンドウ表示

セレクトモードの使い方

　デベロッパーツールでHTMLやCSSの検証テストをするには、まずページ内の検証したい要素（テキストや画像など）を選択する方法を覚えましょう。

　要素の選択に使用するのが「セレクトモード」です。セレクトモードに切り替えるには、デベロッパーツールの左上にあるセレクトアイコンをクリックします。アイコンが青色になっている状態がセレクトモード起動中です。

　セレクトモードの状態で、ブラウザ側を一度クリックしてアクティブにし、ページ上でマウスカーソルを動かしてみましょう。カーソルが合わさった要素に色が付き、デベロッパーツール側のHTMLソースもハイライト表示されます。

　詳しく調べたい要素をクリックして選択することで、その要素のHTMLとCSSがデベロッパーツール側に表示されます。

セレクトモードのショートカット操作

　セレクトモードは、要素を一度クリックすると解除されてしまいます。実際にテスト検証を行う際は、要素選択を多用する場合が多いので、セレクトモードのショートカット操作を覚えておくと便利です。

　ショートカット操作は、調べたい要素の上にマウスカーソルを合わせて、[右クリック] – [検証]をクリックしてみましょう。セレクトモードと同様に要素の選択が可能です。

※このショートカット操作は、デベロッパーツールが起動してない状態でも使用可能です。自動的にデベロッパーツールも起動してくれます。

　要素の選択は、デベロッパーツールの基本になりますので、しっかり覚えておきましょう。次章からは、デベロッパーツールを使って、HTMLやCSSに変更を加えて検証を行うための方法を解説していきます。

Elementsパネルの使い方

Elementsパネルとは？

　Elementsパネルは、主にHTMLとCSSの検証に使われるパネルで、新しいデザインを実装する前のテストや、ページ表示に問題がある場合の原因調査などによく利用されます。

　「ブラウザ表示中のページ」「HTMLソース」「CSSスタイル」の3つで構成され、HTMLソースはわかりやすいツリー構造、CSSは適用スタイルが優先度順に一覧表示されるなど、簡単にページ検証が行えるような仕組みになっています。

　Elementsパネルでは、ページのHTMLやCSSの仮編集を行うことが可能です。仮編集した内容はブラウザ側のページ表示にリアルタイムで反映されます。

　仮編集とは、実際のファイル（サーバーにアップロードされている本番ファイルや、ローカル環境で制作中のファイル）を編集しているわけではなく、ブラウザ上に読み込んだソースをブラウザ上で仮想的に編集している状態です。

　本番ファイルに手を加える前に、修正後のページをブラウザで確認することができるため、制作者にとっては非常に便利な機能です。

Elementsパネルの起動方法

　Elementsパネルは、デベロッパーツールを起動した際のデフォルト表示パネルです。もし、他のパネルが開いている場合は、デベロッパーツールの上部にあるパネルタブの中から、[Elements]を選択してください。

HTMLを仮編集する方法

　Elementsパネルを使って、HTMLソースを仮編集する方法について解説していきます。まずはセレクトモード、または[右クリック] – [検証]で編集したい要素を選択し、Elementsパネルに要素のHTMLソースを表示しましょう。

セレクトモードの使い方をもう一度確認したい方はこちら »

HTMLソースの編集方法

　テキスト部分や、タグ（idやclass名）を編集したい場合は、編集したいテキストかタグにマウスカーソルを合わせて、ダブルクリックをしてみましょう。編集モードに切り替わりますので、テキストやタグを任意の内容に変更し、キーボードの「Enterキー」を押します。

　この方法は、テキスト原稿を変更する前に、「このテキストを入れたらどんな感じかかな？」などを検証をする際によく利用します。

　親要素以下の複数行にまたがるHTMLソースをまとめて編集することも可能です。親要素のHTMLソースを選択した状態で、右クリック – [Edit as HTML]を選択しましょう。選択した親要素の子要素、孫要素を含めたテキストボックス型の編集モードに切り替わります。

　この方法は、選択要素の中に編集したい箇所が複数箇所ある場合や、選択要素の下（子要素・孫要素）に、新しいソースをまとめて追加したい場合によく利用します。

HTMLソースの削除方法

　削除したい要素を選択した状態で、右クリック – [delete element]を選択します。HTMLソースが削除され、ブラウザ側の表示からも要素が削除されます。

編集内容を元に戻す方法

　デベロッパーツールで仮編集したHTMLとCSSは、ブラウザの更新ボタンをクリックすることで元の状態に戻すことができます。

　また、デベロッパーツール内で、キーボードの「Ctrl + Z」を押すことで、1つ前の編集内容に戻ることもできます。（macOSは、command + Z）

HTMLソースを検索する方法

　デベロッパーツール内で、HTMLソースを検索したい場合は、デベロッパーツールの右上にある3点リーダーアイコン（⋮）から、[Search]をクリックします。

　[Search]パネルが開きますので、検索したい文字列を入力して、[Enter]キーをクリックします。[Source]パネルが開き検索結果が該当行数ごとに一覧表示されます。

　検索結果をクリックすると、[Source]パネル内の該当箇所にジャンプしハイライト表示されます。

CSSを仮編集する方法

　次に、Elementsパネルで、CSSを仮編集する方法について解説していきます。HTMLの編集と同様に、CSSを編集したい要素をセレクトモード、または[右クリック] – [検証]で選択しましょう。

　まだ、CSSの基本をマスターしていない方は、以下の記事も参考にしていただくと理解が深まります。

　要素を選択すると、デベロッパーツールの[styles]パネル内に、要素に適用されているCSSプロパティと値が一覧表示されます。

　[styles]パネルには、上から優先度の高い順（CSSの読込順やセレクタ詳細度が高い順）に、スタイルが一覧表示されます。スタイルが上書きされているCSSプロパティと値には、打ち消し線（例：font-size:24px;）が表示されます。無効なスタイルには、黄色い△の警告マークが表示されます。

CSSプロパティの値を編集する方法

　CSSプロパティの値を変更したい場合は、値にマウスカーソルを合わせて、1回だけクリックしましょう。編集モードに切り替わりますので、任意の値に変更し、キーボード「Enterキー」、または「Tabキー」を押します。

CSSプロパティを無効化する方法

　適用されているCSSプロパティを無効化したい場合は、プロパティ名の右側のチェックを外します。プロパティと値に打ち消し線が付き、CSSプロパティが無効になります。

新しいCSSプロパティを追加する方法

　既存のCSSセレクタに対して、新しいプロパティと値を追加したい場合は、セレクタ内のプロパティの一番下あたりの空白スペースを1回クリックします。新しいCSSプロパティの入力欄が追加されます。

　追加したいCSSプロパティ名を入力したら、キーボードの「Enterキー」、または「Tabキー」を押しましょう。値の入力欄にカーソルが移動しますので、任意の値を追加し、再度「Enterキー」、または「Tabキー」を押します。新しいCSSプロパティが追加され、ブラウザ側の表示にも反映されます。

　[styles]パネルで、CSSのプロパティや値を編集しようとすると、自動的に入力候補の一覧が表示されます。色指定の値に関しては、値の左側にある色付き四角アイコンをクリックするとカラーピッカーが表示されます。

インライン形式のCSSを追加する方法

　既存のHTMLのタグに対して、インライン形式のCSSプロパティを追加することもできます。CSSを追加したいHTMLタグを選択した状態で、[styles]パネルの一番上にある「element.style」をクリックすると編集モードに切り替わります。任意のCSSプロパティと値を記述します。

　選択していたHTMLタグ内に、インライン形式のCSSが追加されます。

新しいclassを追加する方法

　選択したHTMLのタグに対して、新しいclassを追加することもできます。classを追加したいHTMLタグを選択した状態で[styles]パネルの右上にある「.cls」アイコンをクリックしましょう。

　新しいclassの追加入力欄（add new class）と、現在指定されているclassがチェックボックス付きで表示されます。追加したいclass名を入力して、キーボードの「Enterキー」を押しましょう。

　選択していたHTMLタグ内に、新しいclassが追加されます。

※スペース区切りで複数のclass名を指定することも可能です。

新しいCSSセレクタを追加する方法

　新しいCSSセレクタを追加するには、CSSセレクタに指定したいHTMLタグを選択した状態で、[styles]パネルの右上にある「+」アイコンをクリックしましょう。

　選択したHTMLタグに「id」もしくは「class」が指定されている場合は、その「id」「class」のセレクタが新規追加されます。（idとclassが両方指定されている場合はidセレクタが追加されます。）

　idもclassも指定されていない場合は、選択した「h1、p、img」などの要素タグがセレクタとして新規追加されます。必要に応じてセレクタを書き換え、任意のCSSプロパティと値を設定します。

　[styles]パネルの「+」アイコンから新しく追加したCSSのソースは、「inspector-stylesheet」に追加されます。

ボックスモデルの確認と検証

　デベロッパーツールで、HTMLタグを選択すると、[styles]パネル内に選択したHTMLタグに設定されている、margin（要素の外側の余白）、border（要素の外枠）、padding（要素の内側の余白）、content（要素自体のサイズ）を図式化したボックスモデルが表示されます。

　このボックスモデルを確認しながら、最適な余白の設定がされているかを検証すると良いでしょう。それぞれの数値は、ダブルクリックして直接仮編集することが可能です。仮編集した数値は、inspector-stylesheetに新しいCSSスタイルとして追加されます。

擬似クラスの適用スタイルを確認する方法

　要素にマウスカーソルを合わせたり、クリックした際のスタイルを擬似クラス（:hover や :activeなど）で指定している場合、デフォルトでは[styles]パネルに擬似クラスの適用スタイルは表示されていません。

　擬似クラスの適用スタイルを表示するには、[styles]パネル内の[:hov]をクリックします。

　代表的な擬似クラスのチェックボックスが表示されますので、確認・検証したい擬似クラスのチェックを入れます。擬似クラスの適用スタイルが[styles]パネルの一番上に表示されます。

最終的な適用スタイルを確認する方法

　最終的に適用されるスタイルは、[Computed]パネルで確認することができます。[Computed]パネルには、適用スタイルの優先度を踏まえて、最終的に要素に適用されるプロパティと値が一覧表示されています。

　[Styles]パネルで何度も編集を繰り返したり、複数のスタイルを重複指定していると、一体どのプロパティの値が適用されているのか見失ってしまうことが往々にしてあります。

　[Styles]パネルを何度見返しても分からないような迷子状態になってしまった場合には、[Computed]から捜索するのが近道です。

　[Computed]パネル内の値の上にマウスカーソルを合わせると（→）アイコンが表示されます。アイコンをクリックすると、[styles]パネルの該当箇所にジャンプします。

　とても簡単で正確な方法ですので、覚えておくと便利です。

CSSの変更履歴の確認方法

　CSSの変更履歴の確認方法をご紹介しておきます。覚えておくととても便利な機能です。

　デベロッパーツールでCSSの変更・検証を繰り返していると、どのプロパティを編集・追加したのか、自分でも分からなってしまうことがあります。そんな時に役に立つのが、CSSファイルの変更履歴の閲覧機能です。

　赤色にハイライト表示されている部分が「変更前のソース」、緑色にハイライト表示されている部分が「編集・追加したいソース」になります。この変更履歴を参照しながら、実際のCSSファイルを変更すれば、変更箇所の間違いを防ぐことができます。

デバイスモードの使い方

デバイスモードとは？

　デバイスモードとは、PCブラウザ上で、スマートフォンやタブレットでのページの見え方をシミュレーションすることができる、デベロッパーツールの機能です。

　スマートフォンやタブレットなどの実機を使うことなく、PCブラウザ上で様々な画面サイズの表示をチェックしながら、HTMLやCSSの調整を行うことができます。レスポンシブデザインや、モバイル向けのページ制作を行う際に非常に便利です。

　最終的には、実機を使った表示チェックが推奨されていますが、数多く存在する実機を何台も用意するのは、時間的にも費用的にも現実的ではありません。デバイスモードでおおよその表示チェックを行い、最後に主要な数台の実機を使って、表示上の問題やタッチデバイス特有の挙動などをチェックすると良いでしょう。

デバイスモードの起動方法

　デバイスモードは、デベロッパーツールの左上にあるデバイスモードアイコン（スマートフォンとタブレットのようなアイコン）をクリックすることで起動します。

　デバイスモードが起動すると、ブラウザ側の表示幅が、スマートフォンで見た時のように狭くなります。もう一度、デバイスモードアイコンを押すと、通常のPC表示に戻ります。

固有のデバイス表示に切り替える

　デバイスモードのデバイス選択メニューから、Galaxy S5やiPhone Xなどの固有デバイス名を選択することができます。固有デバイス名を選択することで、それぞれのデバイスの画面サイズとピクセル比で、画面表示をシミュレーションすることができます。

新しい端末の追加方法

　デバイス選択メニューの中に無いデバイスも追加で登録することができます。デバイス選択メニューの中の[Edit…]をクリックします。

　デバイスの追加画面が開きます。デバイス一覧の中に該当デバイス名がある場合はチェックを入れましょう。デバイス選択メニューから選択可能になります。逆に不要なデバイスは、チェックを外しておきましょう。

　もし、デバイス一覧の中に該当デバイスが無い場合は、[Add custom device…]ボタンをクリックして、画面サイズやピクセル比などを指定してカスタムデバイスとして登録することができます。

画面の表示向きの変更方法

　デバイスの画面の向きを縦向き（ポートレート）と、横向き（ランドスケープ）で切り替えて、ページを表示することもできます。デバイスモードのメニューにある回転アイコンをクリックすることで、画面の向きが切り替わります。

※回転アイコンが表示されていない場合は、ブラウザの横幅を広げてください。隠れてい非表示になっていたアイコンが表示されます。

デバイスフレームの表示方法

　これはおまけ的な機能ですが、デバイスのフレームを表示することもできます。デバイスモード内の右上にある縦の3点リーダーアイコン（⋮）から、「Show Device Frame」を選択すると、デバイスのフレームが表示されます。

※フレームが表示されない場合は、そのデバイスのフレーム素材が用意されていないということになります。

レスポンシブモード

　固有デバイスの表示モードとは別に、画面の縦横サイズなどを自由に変更することができるレスポンシブモードが存在します。レスポンシブモードに切り替えるには、固有デバイス選択メニューの中の「Responsive」を選択します。

画面サイズの変更方法

　画面サイズを変更するには、レスポンシブモード選択時に、ページの「右側」「右下角」「下側」に表示されるハンドルをドラッグします。または、入力ボックスにの縦横サイズを入力します。

　この機能を使うと、CSSメディアクエリーで設定したブレイクポイントで、どのように画面レイアウトが変化するのかを簡単にチェックすることができます。

デバイスピクセル比（DPR）の変更

　デバイス画面のピクセル比を変更した表示チェックを行うこともできます。メディアクエリーのメディア特性にデバイスピクセル比を指定して表示を切り替えている場合は、こちらの機能を使ってチェックをすると良いでしょう。

メディアクエリーにデバイスピクセル比を2に設定した例

@media screen and (-webkit-device-pixel-ratio: 2) {・・・}
@media screen and (resolution: 2dppx) {・・・}

デバイスタイプの変更

　PCやスマートフォンなど、デバイスのタイプも選択することができます。この機能は、主にスマートフォンやタブレットなどのタッチスクリーン操作をシミュレーションする目的で使用されます。

　「Mobile」と「Desktop（touch）」を選択している時は、マウスポインタが矢印から、タッチポインタ（●）に変わり、スワイプやフリック、ピンチズーム（shift押しながら）のタッチ操作が可能になります。タッチ操作を無効にしたい場合は、「Mobile（no touch）」、「Desktop」を選択します。

回線速度のシミュレーション

　回線速度を変更してページ読み込みのシミュレーションをすることもできます。デフォルトは[No throttling]で速度制限なし、[Mid-tier mobile] は高速3G回線、[Low-end mobile] は低速3G回線をシミュレーションします。

　あくまでも擬似的な回線速度を、データ転送速度（キロバイト毎秒）とCPU処理速度を低速に設定してシミュレーションしているものになります。どの部分の読み込みに時間が掛かっているかなどをチェックして、必要に応じてページ読み込み速度の改善を行うと良いでしょう。

※本記事では解説しませんが、[Network]パネルや、[Performance]パネルで、より詳細なネットワーク回線やページ読み込み速度を検証することが可能です。

ルーラーの表示・非表示

　ピクセル単位のルーラーを表示することもできます。デバイスモード内の右上にある縦の3点リーダーアイコン（⋮）から、[Show rulers]を選択すると、ページの上側と左側にルーラーが表示されます。

　ルーラーを表示しておくと、レスポンシブモードで画面サイズを変更する際の目安になって便利です。ルーラーを非表示にしたい場合は、 3点リーダーアイコン（⋮）から、[Hide rulers]を選択します。

適用中のメディアクエリーを表示する

　画面上部に表示されている、青、緑、オレンジのバーは、メディアクエリーの指定方法の違いを示しています。

　バーの上で右クリック ＞「Reveal in Source Code」＞　アドレス名の順にクリックすることで、メディアクエリーが書かれているCSSファイル内容を[Sources]パネルに表示することができます。

デベロッパーツールをテキストエディターとして使用する方法

　最後におまけとして、HTMLとCSSを仮編集した内容をそのままファイル保存する方法をご紹介します。

　ローカル環境で作成中のファイルに限りますが、デベロッパーツールをリアルタイムのブラウザープレビュー付きのテキストエディターとして利用することができます。

　デベロッパーツールで編集したHTMLやCSSの内容をそのまま保存したいと思っている方には、とても効率的な方法だと思います。設定は簡単ですので、興味のある方は、ぜひ一度試してみてください。

初期設定

　まずは、ローカル環境に作業用のフォルダを用意し、デベロッパーツールで編集したいHTMLやCSSファイルを入れておきます。ファイルは白紙の状態でも、ある程度作成済みのものでも、どちらでも構いません。

　次にワークスペースの設定を行います。ローカル環境に用意したHTMLファイルをGoogle Cromeで開き、デベロッパーツールを起動させます。

　[Sources]パネルを開き、画面左側にある[Filesystems]パネル > [+ Add folder to Workspace]の順にクリックしてください。

　ローカル環境に用意したフォルダを選択します。

　デベロッパーツールが選択したフォルダへアクセスするための許可がお求められます。「許可」をクリックします。

　[Filesystems]パネルに以下のように表示されれば、ワークスペースの設定は完了です。ワークスペースは複数設定可能です。また、一度設定したワークスペースは、削除しない限りブラウザに保存されています。

HTMLの編集・保存方法

　まず、[Filesystems]パネルから、編集したいHTMLファイルをクリックします。[Sources]パネルにHTMLファイルの中身が表示されます。

　[Sources]パネルに表示されたHTMLソースは、テキストエディターと同じ感覚で自由に編集が可能です。「Tabキー」によるインデントや、「Ctrl + Z」の取り消し操作（macOS：command + Z）なども利用できます。

　編集内容を保存する場合は、右クリックから「Save as…」をクリックするか、キーボードから「Ctrl + S」（macOSは、command + S）で保存します。

　編集・保存したHTMLをブラウザで確認したい場合は、右クリックから「One in new tab」をクリックすると、ブラウザ側の新しいタブでページが開きます。

注意事項

　[Elements]パネルで編集したHTMLについては保存はできません。HTMLの編集・保存は必ず[Sources]パネルで行なってください。

CSSの編集・保存方法

　HTMLとは違い、CSSの編集・保存は、[Elements]パネルを使って行うことが可能です。[Elements]パネルで編集したCSSの内容は、自動的に[Sources]パネル上のCSSファイルにも反映されます。

注意事項

　[Elements]パネルでCSSを編集した場合、その都度CSSファイルが自動保存されていることを覚えておきましょう。テスト的に追加したプロパティなどもすべて保存されてしまいますので注意が必要です。

　HTMLと同様の手順で、[Sources]パネルでCSSファイルの編集・保存を行うことが可能ですので、必要に応じて[Elements]パネルと、[Sources]パネルを行き来しながら、CSSファイルの中身を整えて行くと良いでしょう。

まとめ

　いかがでしたでしょうか。今回は[Elements]パネルを使ったHTMLとCSSの編集方法と、スマートフォンでの表示検証方法を中心にまとめました。

　今回ご紹介した内容を習得することで、以下のようなことができるようになると思います。

・本番ファイル修正前に、あらかじめ修正イメージを確認できる。
・PC、スマートフォン、タブレットでの見え方を簡単に確認できる。
・他のWEBサイトがどんなHTML＆CSSで作られているのか研究できる。

　実際にWeb制作の実務に関わる方はもちろん、誰かに制作依頼を出すWebサイトの担当者の方などにも、デベロッパーツールはとても役に立つツールです。ぜひ活用してみてください。

★HTMLメールの検証にデベロッパーツールを使用する場合は、HTMLメール特有のルールを考慮する必要があります。Webサイトと同じ感覚でデベロッパーツールで仮編集・本番反映を行なってしまうと、配信したHTMLメールで予期せぬ表示崩れが起こる場合があります。詳しくは、以下の記事を参考にしてください。