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

Google Chromeデベロッパーツールを知っておくことで、HTML/CSSの編集やデバッグ、スマートフォンでの表示チェックが容易にできるようになります。
今回は、Google Chromeデベロッパーツールの基本的な機能と使い方をまとめました。

目次

  1. ​​起動方法
  2. 虫眼鏡のアイコンでホームページ上の要素を選択」の導入事例
  3. スマートフォンやタブレットなどのモバイル表示切り替え
  4. Elementsパネル
  5. ディベロッパーツールの拡張機能の表示/非表示
  6. ディベロッパーツールの詳細設定
  7. デベロッパーツールの表示箇所の切り替え

▼エンジニア不要でサイト更新できるCMS

圧倒的に使いやすい国産CMS｜ferret One

圧倒的に使いやすい国産CMS｜ferret One

ノーコードでWebサイトやLPの作成・更新ができます

詳細・資料請求はこちら

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

1.起動方法

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

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

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

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

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

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

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

4.Elementsパネル

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

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

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

デバッグ時に活用する以外にも、他の人と変更したイメージをすぐに共有もできるでしょう。

Metrics機能
その他、Stylesの隣「Compted」には、選択している要素のmargin、border、paddingの値を視覚的に確認することもできます。
どの要素にどれくらいの値が入っているかなど、レイアウトの微調整を行う際に活用できます。

5.ディベロッパーツールの拡張機能の表示/非表示

クリックすると、下部に拡張機能が表示されます。これは、タブで切り替えられて「Console」、「Search」、「Emulation」、「Rendering」のタブに分かれています。
エンジニアの方など開発者向けの機能となっています。

6.ディベロッパーツールの詳細設定ウィンドウの表示

詳細設定

ディベロッパーツールの詳細設定を行います。Google Chromeで動作環境を変更したり、機能を停止したりとディベロッパーツールの環境を変更することができます。また、Workspaceの設定やデバイスモードにおける各種デバイスのオンオフ、ショートカットキーの設定など細かい部分の設定ができます。

7.デベロッパーツールの表示箇所の切り替え

今回の画像では、ツールの表示は右側にしていました。こちらのボタンを使用することで下に表示させることができます。この機能は自分が使用しやすい位置に表示させるのが一番です。

まとめ

今回は、Google Chromeのデベロッパーツールについて、基本的な機能を取り上げました。
Web開発においてデバッグや調整など、使いこなすことができれば、よりスムーズな開発が行えます。

また、実際にお客様の前でヒアリングを行いながらプレビューでの修正を行うといった活用法もあるでしょう。

その他にも表示速度が確認できるなど、機能が多岐にわたります。
その中でも、今回紹介したElementsパネルは、基礎的な機能でありどなたでも利用できますので、ぜひ活用してみましょう。

▼エンジニア不要でサイト更新できるCMS

圧倒的に使いやすい国産CMS｜ferret One

圧倒的に使いやすい国産CMS｜ferret One

ノーコードでWebサイトやLPの作成・更新ができます

詳細・資料請求はこちら

この記事を読んだ方におすすめ

Google公式ブラウザ！Google Chromeの使い方

Google公式ブラウザ！Google Chromeの使い方

Google Chromeは、iOSやAndroidなどスマホアプリ版もあり、Googleアカウントでログインすると、PC・スマホ・タブレットなどの異なる端末間で、ブックマーク・閲覧履歴・パスワードなどのデータを同期できます。今回は、Google公式ブラウザである「Google Chrome」の基本的な使い方を紹介します。
Googlebotがアップデート！レンダリング機能が新しくなって起こりうる変化とは？

Googlebotがアップデート！レンダリング機能が新しくなって起こりうる変化とは？

2019年5月8日、Google本社にて開催されているGoogle I/O 2019にてGooglebotがアップデートされたことが発表されました。それによってどのような変化があるのか、これまでに起こっていたどのような問題が解決されるのかを紹介しています。