最新コラム
-
-
-
Webサイト制作
【2023年版】国内・海外のおすすめVPS10選
-
Webサイト制作
初心者でも5分で分かる!SSL/TLSとは何か?
-
SEO外部対策SEO対策
Googleが推奨するnofollowの正しい使い方とは?
Google Chromeデベロッパーツールを使いこなせていますか?経験豊富なプロのエンジニアやWebデザイナーに限らず、初心者ブロガーにとっても役立つ機能が満載。そこで今回は、Web開発に携わっている全ての方へ向けて、基本機能・タブの役割・便利な使い方などをご紹介します。
目次
デベロッパーツール(Developer Tools /DevTools)とは、ブラウザのみで手軽に利用できるデバッグツールの一種で、「Safari」や「Microsoft Edge」、「Firefox」といったモダンブラウザであれば基本的に標準で付属しています。
つまり、Chromeデベロッパーツール(DevTools)とは、Googleが提供しているWebブラウザ、「Chrome」に標準搭載されている「開発者向け検証ツール」なのです。
デベロッパーモードとも呼ばれており、Webサイト構成やデザインの調査・編集、通信速度などのページパフォーマンスやエラーチェックなどに役立ちます。
Chromeデベロッパーツールの機能は、自サイトのデザイン変更テストから他サイトのコードチェックまで広範囲にわたり、特に下記のような場面で活用されています。
▼Chromeデベロッパーツールの利用例
コンテンツの構成・デザイン・パフォーマンスに対して調査・編集・テストが手軽にできる便利ツール、と言った方が適切かもしれません。
だからこそ、プログラマーをはじめWebデザイナーやコーダーなど、「サイト開発に関わる全てのエンジニアにとっての必須ツール」として認知されているのです。
では早速、Chromeデベロッパーツールの基本的な使い方から見ていきましょう。
Chromeデベロッパーツールの起動方法は、OSの種類によって異なります。
▼Windowsで起動する方法
▼Macで起動する方法
見たい箇所を素早くチェックするには、ページ上での右クリックがおすすめです。
マウスカーソルをチェックしたい任意の箇所に配置してクリックすると、見たいコードがピンポイントで表示されます。
Chromeデベロッパーツールが表示される位置は、任意で変更することができます。
例題として、当サイトのTOPページをWindowsで起動してみましょう。
デフォルトでは画面右側にChromeデベロッパーツールが表示されます。
表示位置を変更したい場合は、赤枠のメニューをクリックし、緑色の枠で囲ったアイコンから選択しましょう。
下記画像の通りHTMLとCSSは分かれて表示されます。
▼Chromeデベロッパーツールの区分
しかし、実際には画面左側のコンテンツ・HTML・CSSの3区分は連動しており、HTMLの一部をクリックすると水色のマーカーで装飾され、関連するコンテンツとCSSが表示される仕組みになっているのです。
なお、CSSの右側に表示されているイラストは要素のサイズや余白を表しており、画面中央の黄色い枠で囲った矢印によって、表示・非表示の切り替えが可能です。
HTMLとCSSの上部には、それぞれ機能を使い分けるための「タブ」が設けられています。
このタブは「パネル」とも呼ばれており、使用頻度の高さによって表示される順番が変更するのが特徴です。
HTMLの主要パネルであるElementsタブでは、「DOM」と「CSS」を操作してレイアウトやデザインの調査・編集を行うことが可能です。
変更したいコードをダブルクリックするだけでインタラクティブに編集でき、リアルタイムでページに反映されます。
Consoleタブでは、JavaScriptのエラーチェックやログ表示だけでなく、任意のJSを実行することも可能です。
▼Consoleタブのメリット
ちなみに下記のショートカットキーを実行すると、Chromeデベロッパーツールを起動していなくてもConsoleタブが表示されます。
▼Consoleタブを表示するショートカットキー
Sourcesタブは、ブレークポイントを使用してJSを検証する際に便利なパネルです。
あらかじめ「整形ボタン」が備わっており、クリックするだけでコードがミニファイされて読みやすくなります。
Networkタブは、レンダリングをブロックしている要因を特定したい時に便利な機能です。
各データが読み込まれる順番を検証することで、通信パフォーマンスの最適化に役立てることができます。
▼Networkタブのメリット
なお、デベロッパーツールを使用して表示速度を調査する方法については下記の記事でも詳しく解説しております。
「読み込み」調査に特化しているNetworkタブに対して、Performanceタブは下記3点について一連でパフォーマンス調査ができるという強みがあります。
▼Performanceタブの一連処理
具体的な使い方については、下記で後述いたします。
Performanceタブよりも詳しくメモリリークを追跡したい時は、Memoryタブを使用します。
プロファイリングタイプは下記の3種類です。
▼プロファイリングタイプの選択肢
Applicationタブは、読み込まれた全リソースの調査、および編集を行う時に使用します。
▼対象リソースの一例
Securityタブは、主に下記3点の安全性を検証する際に便利な機能です。
▼デバッグできる安全性の種類
ページの安全性が確保されている場合は、下記のように表示されます。
Lighthouseタブは、主に下記5点についてモバイル・PCに分けて検証できます。
▼Lighthouseタブの主な検証対象
ちなみに、Chrome82ではLighthouseタブとして搭載されています、バージョンによっては「Auditsタブ」という名称が使われています。
CSS関連のタブはElementsタブを選択した時に表示され、下記の6種類に分かれています。
▼CSS関連タブの種類と特徴
ここからは、Chromeデベロッパーツールの具体的な利用例について解説します。
Chromeデベロッパーツールに手を加えても、実際のソースコードには影響しません。
つまり、あくまで自分のブラウザ上で一時的に変更するだけなので、何度でも試すことができます。
今回は、当サイトTOPページの「Service」を「サービス」に変更してみましょう。
HTMLのテスト編集は、下記の手順で行います。
▼HTMLを編集する手順
すると、下記のようにリアルタイムでコンテンツに反映されます。
続いて、最もニーズの高いCSSを編集してみましょう。
例題として、上記で解説した「Service」の背景をグレーからピンクに変更してみます。
▼CSSを編集する手順
すると、下記のようにリアルタイムでコンテンツに反映されます。
同様に、CSSでは画像サイズやマージンなどの変更も手軽にできるので、見栄えを確認しながら試してみましょう。
「リンク切れ」やJavaScriptなどの「プログラムエラー」を検証する際は、Consoleタブを使います。
例題として、当サイトTOPページの「リンク切れ」について検証してみましょう。
▼リンク切れの検証手順
ここで、何かのエラーが検出された場合、下記の3色でリスク度が把握できる仕組みになっています。
▼リスク度の見分け方
当サイトのロゴはリンクが有効になっていますので、何も表示されないはずです。
仮に、リンクが切れている場合はどのように表示されるのか、確認してみましょう。
▼実在しない画像ファイル名への変更方法
画像ファイルが実在しないためリンク切れとなり、右上にあったロゴが非表示になるのはもちろん、Consoleタブでも下記のようにエラーが表示されます。
表示される状態を異なる端末ごとにシミュレーションできるのも、Chromeデベロッパーツールならではのメリットです。
ここでは、スマホの表示状況を確認してみましょう。
▼スマホ表示を確認する手順
ちなみに、iPhone6 などバージョンを含む特定のデバイスで確認したい時は、下記の手順で行います。
▼特定のデバイスを指定する手順
パフォーマンスの検証は下記の手順で簡単に実行できますが、ページによってはかなり時間がかかる可能性もあります。
▼パフォーマンスを確認する手順
読み込みが完了すると、下記の画面へ自動的に切り替わります。
パフォーますは大きく下記の3種類で構成されています。
▼概要ペイン(概要ペイン)
アクセスしてから、表示完了までの時系列を表しており、「FPS」で1秒あたりのフレーム数を、「CPU」でCPU リソースの消費量を、「NET」では各処理にかかった時間を個別に表しています。
▼フレームチャートペイン(緑枠)
イベントやアクティビティに対し、内訳などが詳細に表示されます。
▼Summaryタブの円グラフ(青枠)
ページ表示にかかった時間の内訳を、6種類の項目に分けて視覚的に表しており、最後に
トータル時間が表示されます。
最後に、よく使うショートカットキーをいくつかご紹介します。
Windows | Mac | |
---|---|---|
デベロッパーツールの起動 | 「Ctrl」+「Shift」+「I」 | 「Cmd」+「Opt」+「I」 |
Consoleを直接開く | 「Ctrl」+「Shift」+「J」 | 「Cmd」+「Alt」+「J 」 |
検証ツールの位置切替 | 「Ctr」+「Shift」+「D」 | 「Cmd」+「Alt」+「D」 |
モバイルプレビュー表示 | 「Ctr」+「Shift」+「M」 | 「Cmd」+「Shift」+「M」 |
HTMLやテキストの編集 | 「F2」 | 「F2」+「Fn」 |
要素検索 | 「Ctr」+「F」 | 「Cmd」+「F」 |
検証ツールは各プラウザに標準搭載されていますが、とりわけ優秀と言われているがGoogle Chromeデベロッパーツールです。
特に下記の3点は、他ブラウザの検証ツールよりも高く評価されています。
世界的に最も多くのWeb開発者が使用している検証ツールだからこそ、早めにマスターしておきましょう。