今回はGoogle chromeの検証機能（デベロッパーツール）の使い方について説明していきます。
Web制作者は知っている方も多いと思います。サイトやブログを運営している方であれば、chromeの検証機能（デベロッパーツール）を使いこなすことで自分でサイトの修正を行うことができるようになるので、本記事を参考に試してみてください。
目次
Chromeの検証機能（デベロッパーツール）とは
Chromeの検証機能（デベロッパーツール）とは、Google chromeブラウザに備わっている開発者用のツールになります。
主にWebサイト制作者がWebサイトを作成する際に、プログラムの誤りをチェックする時などに使います。
特によく利用されているのが、HTML・CSSなどの記述の確認になります。サイトを制作する時に表示が崩れるなど、不具合が起きることはよくあることだと思います。
そんな時に原因の箇所を特定し、実際のファイルを変更せずに、ブラウザ上で修正後のプレビューを確認することができます。
しかしchromeデベロッパーツールは日本語化されておらず、全て英語表記になっています。
そのため取っつきにくい部分もありますが、それ以上に活用することの方がメリットが大きいので興味を持ってもらえたらと思います。
Chromeの検証機能（デベロッパーツール）でできること
Chromeの検証機能（デベロッパーツール）を使って、主にはHTML・CSSの記述の確認したり、スマホやタブレットデバイスで表示崩れが起きていないかのチェックのために使うことが多いです。
Chromeの検証機能（デベロッパーツール）の起動方法
ディベロッパーツールの起動方法を説明していきます。
Macであれば2本指で画面をクリックして、「検証」を選択することで起動します。（上部画面はMacの場合）
簡単に起動できるキーボードショートカットがあるので、是非使ってみてください。
【Windows】
・起動方法
Google Chromeの右上のメニューから「Google Chromeの設定」→「その他のツール」→「デベロッパーツール」を選択して起動します。
・ショートカット
「Ctrl」+「Shift」+「I」
【Mac】
・起動方法
Google Chromeのメニューから「表示」→「開発・管理」→「デベロッパーツール」を選択して起動します。※もしくは2本指で画面をクリックして「検証」を選択します。
・ショートカット
「Cmd」+「Opt」+「I」
Chromeの検証機能（デベロッパーツール）の各機能
デベロッパーツールを起動すると、複数のタブが表示されます。タブ毎に機能が異なるので、ここからはデベロッパーツールの各タブの機能について説明していきます。
Elements
Elementsタブは主にHTML、CSSのプログラムの検証を行います。特にこのElementsタブはよく利用する機能になります。
文字を変更してみて表示崩れが起きないか、CSSで背景色を付けてみたり、余白を調整してデザイン的にどうかなどサイトを制作・修正する時に大変心強い機能です。
画像右側のCSSの検証では、さらに以下のタブを選択することができます。
・Styles
選択したHTMLに設定されているCSSを確認できます。
・Computed
今適応されているCSSのみが一覧で表示されます。設定はされているが適応されていなければ表示されません。
・Event Listeners
設定されているイベントを確認できます。
・DOM Breakpoints
要素が変更・削除されたタイミングでブレークポイントを設定することができます。
・Properties
JavaScriptコードからアクセスできる、要素やオブジェクトなどのプロパティを確認できます。
・Accessbility
テキスト・背景色とのコントラスト比などアクセシビリティ上の問題を確認できます。
Console
Consoleタブでは、開発中に情報を閲覧・記録したり、コマンドライン入力でJavaScriptオブジェクトを操作したりします。
表示しているページの状態確認やデバッグ、DOMを操作してページ内のエレメントを変更など、色んなことがコマンド入力で可能です。
Sources
SourcesではCSSやJavaScriptの記述を変更することができます。特に最近のJavaScriptライブラリは、通信速度を高速化するため、コード内のインデントや改行を削った最小化されたコードが返されることが多いです。
しかしこのような最小化されたコードは人間には読みづらい文字列のコードになっています。デベロッパーツールを使うことで、このようなコードを読みやすく整形してくれる機能があります。
Network
Networkはchromeデベロッパーツールを開いたページで、サーバーにページをリクエストしてからどのファイルが読み込まれているのかなど通信内容を確認できます。
よく使う用途としては、特定のページの読み込み速度が遅くなった時に、どのファイルを読み込む際にどれぐらいの時間がかかっているのかを確認して、改善の一手を打つ事ができます。
・Name
読み込まれたファイル名
・Status
HTTPステータス
・Type
ファイルの種別
・Initiator
該当ファイルが読み込まれた起点
・Size
ファイルのサイズ
・Time
ダウンロード時間
※上部がリクエストから受信完了までの時間、下部がリクエストから受信開始までの時間。
・Waterfall
リクエストから受信完了までの時間を拡大したものを表示
Performance
Performanceでは、任意の計測した時間の中でページのパフォーマンスを計測する機能になります。初期状態では何も表示されず、画像左側の記録（Record）ボタンを押してから、停止（Stop）ボタンを押すまでのページの情報が記録されます。
リソースが色分けされて表示されていますが、以下の定義で色付けされています。
・青色（Loading）：HTMLファイル
・黄色（Scripting）：JavaScriptファイル
・紫色（Rendering）：CSSファイル
・緑色（Painting）：画像、フォント
Memory
Memoryタブでは、該当ページで消費しているメモリの使用量を確認できます。メモリの使用量の増減グラフが表示されます。
アプリケーションを長時間稼働させる可能性がある場合は、グラフからメモリの使用量が増加し続けていないかを確認しましょう。さらに詳細を確認したい場合はProfilesからできます。
Profilesの表の項目は以下になります。
・Constructor
クラス名
・Distance
DOMツリールートからの距離
・Objects Count
オブジェクト数
・Shallow Size
オブジェクト単体のメモリ使用量
・Retained Size
オブジェクトと参照しているオブジェクトも含めたメモリ使用量
Application
Applicationでは、chromeブラウザで保存したアプリケーション、ストレージ、キャッシュ、バックグラウンドサービスの4つのデータを一覧にして確認することができます。
Cookieやセッションストレージなどのデータを削除や書き換えができます。
Security
Securityタブでは、「証明書」「TLS接続」「リソース」の3項目の安全性を確認することができます。近年Webサイトに対して、セキュリティの意識が高くなっており、いかにユーザーに安心してサイトの閲覧、商品の購入、お問い合わせをしてもらえるかというのが重要になってきています。
・証明書
有効なTLS/SSL証明書が使用されているかどうか
・TLS接続
安全なTLS/SSL接続が確立されているかどうか
・リソース
画像やJavaScriptなどのリソースもTLS/SSLで配信されているかどうか
Lighthouse
Lighthouseとはウェブサイトの品質改善について「パフォーマンス」「PWA」「アクセシビリティ」「ベストプラクティス」「SEO」の5つの観点からサイトをチェックしてくれる機能になります。またパソコン用とスマホ用で調べることができます。
元々はChrome拡張やコマンドラインで提供されていましたが、Google Chrome 60でデベロッパーツールに統合されました。
ChromeデベロッパーツールでHTML・CSSを変更する
利用頻度の高いElementsタブからHTML・CSSを変更する方法を解説していきます。
要素選択アイコンをクリックする
Chromeデベロッパーツールの左側にある要素選択アイコンをクリックします。アイコンが青くなれば、アクティブになっています。
変更したいHTMLを選択する
アクティブな状態で、変更したい箇所のHTMLを選択します。次にソースコード上の左側に「•••」が表示されるのでクリックします。
開いたメニューから「Edit as HTML」を選択します。
任意の箇所を変更してください。今回は「ニュース」→「新着記事」に変更します。
変更すると、上記の画像ように変更が適応されています。
CSSを変更する
変更したいHTMLを選択すると、右側に適用されているCSSが表示されます。
HTMLと同じ要領で、任意で変更します。今回は文字サイズを「1.2rem」→「1.5rem」に変更しました。変更した時点で、適応されていることが分かります。
新しいCSSを追加する場合は、上記画像の赤枠のプラスのアイコンをクリックすることで選択しているHTMLに新しいスタイルを追加することができます。
