ブログ

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

2020年8月16日

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

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

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

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

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

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

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

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

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

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

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

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

Chromeの検証機能(デベロッパーツール)でできること
  • HTML・CSSなど記述の確認
  • スマホやタブレットなど他デバイスでの表示確認
  • エラーやログの確認
  • 読み込み速度の確認
  • SSL証明書、TLS/SSL接続の確認

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

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

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

検証

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

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

【Windows】
・起動方法
Google Chromeの右上のメニューから「Google Chromeの設定」→「その他のツール」→「デベロッパーツール」を選択して起動します。
・ショートカット
「Ctrl」+「Shift」+「I」

【Mac】
・起動方法
Google Chromeのメニューから「表示」→「開発・管理」→「デベロッパーツール」を選択して起動します。※もしくは2本指で画面をクリックして「検証」を選択します。
・ショートカット
「Cmd」+「Opt」+「I」

Chromeの検証機能(デベロッパーツール)の各機能

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

Elements

Chromeの検証機能のElementsタブ

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

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

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

・Styles
選択したHTMLに設定されているCSSを確認できます。

・Computed
今適応されているCSSのみが一覧で表示されます。設定はされているが適応されていなければ表示されません。

・Event Listeners
設定されているイベントを確認できます。

・DOM Breakpoints
要素が変更・削除されたタイミングでブレークポイントを設定することができます。

・Properties
JavaScriptコードからアクセスできる、要素やオブジェクトなどのプロパティを確認できます。

・Accessbility
テキスト・背景色とのコントラスト比などアクセシビリティ上の問題を確認できます。

Console

Chromeの検証機能のConsoleタブ

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

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

Sources

Chromeの検証機能のSourcesタブ

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

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

Network

Chromeの検証機能のNetworkタブ

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

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

・Name
読み込まれたファイル名

・Status
HTTPステータス

・Type
ファイルの種別

・Initiator
該当ファイルが読み込まれた起点

・Size
ファイルのサイズ

・Time
ダウンロード時間
※上部がリクエストから受信完了までの時間、下部がリクエストから受信開始までの時間。

・Waterfall
リクエストから受信完了までの時間を拡大したものを表示

Performance

Chromeの検証機能のPerformanceタブ

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

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

・青色(Loading):HTMLファイル

・黄色(Scripting):JavaScriptファイル

・紫色(Rendering):CSSファイル

・緑色(Painting):画像、フォント

Memory

Chromeの検証機能のMemoryタブ

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

Chromeの検証機能のMemoryタブ

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

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

・Constructor
クラス名

・Distance
DOMツリールートからの距離

・Objects Count
オブジェクト数

・Shallow Size
オブジェクト単体のメモリ使用量

・Retained Size
オブジェクトと参照しているオブジェクトも含めたメモリ使用量

Application

Chromeの検証機能のApplicationタブ

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

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

Security

Chromeの検証機能のSecurityタブ

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

・証明書
有効なTLS/SSL証明書が使用されているかどうか

・TLS接続
安全なTLS/SSL接続が確立されているかどうか

・リソース
画像やJavaScriptなどのリソースもTLS/SSLで配信されているかどうか

Lighthouse

Chromeの検証機能のLighthouseタブ

Lighthouseとはウェブサイトの品質改善について「パフォーマンス」「PWA」「アクセシビリティ」「ベストプラクティス」「SEO」の5つの観点からサイトをチェックしてくれる機能になります。またパソコン用とスマホ用で調べることができます。

Chromeの検証機能のLighthouseタブ

元々はChrome拡張やコマンドラインで提供されていましたが、Google Chrome 60でデベロッパーツールに統合されました。

ChromeデベロッパーツールでHTML・CSSを変更する

利用頻度の高いElementsタブからHTML・CSSを変更する方法を解説していきます。

要素選択アイコンをクリックする
Chromeデベロッパーツールの要素選択アイコン

Chromeデベロッパーツールの左側にある要素選択アイコンをクリックします。アイコンが青くなれば、アクティブになっています。

変更したいHTMLを選択する
Yahooのニュースタブ

アクティブな状態で、変更したい箇所のHTMLを選択します。次にソースコード上の左側に「•••」が表示されるのでクリックします。

Edit as HTML

開いたメニューから「Edit as HTML」を選択します。

ChromeデベロッパーツールのEdit as HTML

任意の箇所を変更してください。今回は「ニュース」→「新着記事」に変更します。

Yahooのニュースタブ

変更すると、上記の画像ように変更が適応されています。

CSSを変更する
ChromeデベロッパーツールのStyles

変更したいHTMLを選択すると、右側に適用されているCSSが表示されます。

ChromeデベロッパーツールのStyles

HTMLと同じ要領で、任意で変更します。今回は文字サイズを「1.2rem」→「1.5rem」に変更しました。変更した時点で、適応されていることが分かります。

ChromeデベロッパーツールのStyles

新しいCSSを追加する場合は、上記画像の赤枠のプラスのアイコンをクリックすることで選択しているHTMLに新しいスタイルを追加することができます。

当サイトで申込みが多いプログラミングスクール・教室はこちら!

【1位】ポテパンキャンプ:Webエンジニア輩出率No1

【2位】CodeCamp:満足度96.6%のプログラミングレッスン

【3位】DMM WEBCAMP:プログラマー転職成功率98%

【4位】TechAcademy:プログラミングスクール受講者数No1

【5位】GEEK JOB:満足度・転職率が高い・20代社会人経験者向け

-ブログ

© 2021 nukoblog