Chromeデベロッパーツール（検証モード）の基本的な使い方を解説

更新日: 2019年01月31日

Webブラウザ

2015年9月1日の記事を再編集しています

Google Chromeのデベロッパーツール（別名：検証モード）は、Web開発者にとって非常に便利なツールです。
特に便利なのが、スマートフォン向けの開発を行っている時の表示エミュレーション機能で、PC画面にも関わらず擬似的にスマホ画面にして表示してくれます。

Google Chromeデベロッパーツールを知っておくことで、HTML/CSSの編集やデバッグ、スマートフォンでの表示チェックが容易にできるようになります。

今回は、Google Chromeデベロッパーツールの基本的な機能と使い方をまとめました。

Chromeデベロッパーツールの使い方

起動方法

デベロッパーツールは、Google Chromeブラウザを使っている方であれば、誰でも無料で利用することができます。
利用方法は、調べたいページを右クリックし、「検証」の項目がありますので、それをクリックします。
ショートカットキーでは、【Ctrl+Shift+I（MacではCommand + Option + I）】もしくは【F12】キーで起動できます。

「検証」を起動するとページを構成するソースコードなどが表示されますので、以下ではナンバー順で各項目の機能を解説します。

1.虫眼鏡のアイコンでホームページ上の要素を選択

虫眼鏡のアイコンをクリックし、ホームページ上の各要素を選択することができます。
カーソルを合わさった箇所は色が変わり、一つ一つの要素がどのようソースーコードで構成されているのかが分かります。

2.スマートフォンやタブレットなどのモバイルエミュレーション表示切り替え

モバイルデバイスエミュレーション表示
虫眼鏡アイコンの隣、スマートフォンの形をしているアイコンをクリックすると表示が切り替わります。
スマートフォンやモバイルPC、タブレットなどのデバイスごとにエミュレーション表示が行えますので、デバイスチェックを擬似的に行うことができます。

デバイス選択
左上にある「Device」のプルダウンメニューからデバイスを選択することができます。
選択できるデバイスもiPhone4～6、iPad、iPad mini、Amazon Kindle Fire、Samsung Galaxy noteやGalaxy S4など多岐にわたります。
ちなみにスクリーンショット画像は、iPhone6のエミュレーションウィンドウです。

3.Elementsパネル

Elementsパネルは、ページのソースコードを表示することができ、各要素を詳細に調べたい場合は、虫眼鏡のアイコンをクリックし、表示されているページの調べたい箇所をクリック（ショートカットキー：Ctrl+Shift+C Mac：Control + Option + C ）するとページを構成するソースコードと右側「Styles」に対応するCSSが表示されます。

Stylesに記載されているCSSにコードを書き加えると擬似的に表示が変更されます。

要素と検証を使用した修正
例えば、ferretのトップページの文字「Webマーケティングに強くなる」の文字色を擬似的に変更する場合、文字を虫眼鏡で選択し、Stylesの文字色を#000000に変更してみると、「Webマーケティングに強くなる」の文字が黒に変更されました。
もちろん、この変更は擬似的なものですので、実際には変更されてません。