Chromeの検証機能（デベロッパーツール）の使い方

今回はGoogle chromeの検証機能（デベロッパーツール）の使い方について説明していきます。

Web制作者は知っている方も多いと思います。サイトやブログを運営している方であれば、chromeの検証機能（デベロッパーツール）を使いこなすことで自分でサイトの修正を行うことができるようになるので、本記事を参考に試してみてください。

Chromeの検証機能（デベロッパーツール）とは

Chromeの検証機能（デベロッパーツール）とは、Google chromeブラウザに備わっている開発者用のツールになります。

主にWebサイト制作者がWebサイトを作成する際に、プログラムの誤りをチェックする時などに使います。

特によく利用されているのが、HTML・CSSなどの記述の確認になります。サイトを制作する時に表示が崩れるなど、不具合が起きることはよくあることだと思います。

そんな時に原因の箇所を特定し、実際のファイルを変更せずに、ブラウザ上で修正後のプレビューを確認することができます。

しかしchromeデベロッパーツールは日本語化されておらず、全て英語表記になっています。

そのため取っつきにくい部分もありますが、それ以上に活用することの方がメリットが大きいので興味を持ってもらえたらと思います。

Chromeの検証機能（デベロッパーツール）でできること

Chromeの検証機能（デベロッパーツール）を使って、主にはHTML・CSSの記述の確認したり、スマホやタブレットデバイスで表示崩れが起きていないかのチェックのために使うことが多いです。

Chromeの検証機能（デベロッパーツール）の起動方法

ディベロッパーツールの起動方法を説明していきます。

Macであれば2本指で画面をクリックして、「検証」を選択することで起動します。（上部画面はMacの場合）

簡単に起動できるキーボードショートカットがあるので、是非使ってみてください。

Chromeの検証機能（デベロッパーツール）の各機能

デベロッパーツールを起動すると、複数のタブが表示されます。タブ毎に機能が異なるので、ここからはデベロッパーツールの各タブの機能について説明していきます。

Elements

Elementsタブは主にHTML、CSSのプログラムの検証を行います。特にこのElementsタブはよく利用する機能になります。

文字を変更してみて表示崩れが起きないか、CSSで背景色を付けてみたり、余白を調整してデザイン的にどうかなどサイトを制作・修正する時に大変心強い機能です。

画像右側のCSSの検証では、さらに以下のタブを選択することができます。

Console

Consoleタブでは、開発中に情報を閲覧・記録したり、コマンドライン入力でJavaScriptオブジェクトを操作したりします。

表示しているページの状態確認やデバッグ、DOMを操作してページ内のエレメントを変更など、色んなことがコマンド入力で可能です。

Sources

SourcesではCSSやJavaScriptの記述を変更することができます。特に最近のJavaScriptライブラリは、通信速度を高速化するため、コード内のインデントや改行を削った最小化されたコードが返されることが多いです。

しかしこのような最小化されたコードは人間には読みづらい文字列のコードになっています。デベロッパーツールを使うことで、このようなコードを読みやすく整形してくれる機能があります。

Network

Networkはchromeデベロッパーツールを開いたページで、サーバーにページをリクエストしてからどのファイルが読み込まれているのかなど通信内容を確認できます。

よく使う用途としては、特定のページの読み込み速度が遅くなった時に、どのファイルを読み込む際にどれぐらいの時間がかかっているのかを確認して、改善の一手を打つ事ができます。

Performance

Performanceでは、任意の計測した時間の中でページのパフォーマンスを計測する機能になります。初期状態では何も表示されず、画像左側の記録（Record）ボタンを押してから、停止（Stop）ボタンを押すまでのページの情報が記録されます。

リソースが色分けされて表示されていますが、以下の定義で色付けされています。

Memory

Memoryタブでは、該当ページで消費しているメモリの使用量を確認できます。メモリの使用量の増減グラフが表示されます。

アプリケーションを長時間稼働させる可能性がある場合は、グラフからメモリの使用量が増加し続けていないかを確認しましょう。さらに詳細を確認したい場合はProfilesからできます。

Profilesの表の項目は以下になります。

Application

Applicationでは、chromeブラウザで保存したアプリケーション、ストレージ、キャッシュ、バックグラウンドサービスの4つのデータを一覧にして確認することができます。

Cookieやセッションストレージなどのデータを削除や書き換えができます。

Security

Securityタブでは、「証明書」「TLS接続」「リソース」の3項目の安全性を確認することができます。近年Webサイトに対して、セキュリティの意識が高くなっており、いかにユーザーに安心してサイトの閲覧、商品の購入、お問い合わせをしてもらえるかというのが重要になってきています。

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に新しいスタイルを追加することができます。