ブログ

Google Chromeデベロッパーツールとは?使い方や簡易的な解析テクニックについてご紹介します!

本記事ではGoogle Chromeデベロッパーツールの概要と、それを使ったWebサイトの簡易的な解析テクニックをご紹介します。

エンジニアである私が、よく使っているテクニックや機能の中から「エンジニアでない方でも業務に活かせる」と思うものを厳選しましたので、ぜひご確認ください。

なお本記事は、業界経験の浅いWeb担当者の方を対象に、特別なツールを使わずブラウザのみで状況をサクッと確認できるようまとめています。

<本記事について>
* Google Chromeデベロッパーツールを「デベロッパーツール」と記載します。
* WebサイトやWebサービスを併せて「Webサイト」と記載します。
* ElementsやConsoleなどデベロッパーツール内のタブと、実際にHTMLが表示されるブラウザ部分について、表記上切り分けるため、実際にページが表示される部分を「ブラウザ」と記載します。
* デベロッパーツールおよび本記事で参照しているWebサイトのページ内容は、記事執筆時点(2020年2月現在)のものです。お読みいただいている時点で変更されている可能性があります。

この記事を読むとこんなことがわかります
– デベロッパーツールの概要と簡単な使い方
– HTMLやCSSの変更をシミュレーションする方法
– ページ上のエラーチェックの方法
– Webサイトが表示される仕組み(http通信)とその確認方法
– ページの表示スピードの測り方

デベロッパーツールとは

デベロッパーツールの概要

デベロッパーツールはGoogle Chromeに標準で搭載されているデバッグツールで、WebサイトのHTML構成や表示スピード、通信状況などを確認できます。
特別なツールやプログラムを使わずブラウザのみで手軽に利用でき、エンジニアの私もWebサービスの開発やテスト、デザインのチェックを行うときに頻繁に使っています。

なお、Google Chromeに限らず、FirefoxやMicrosoft Edge、Safariなどのモダンブラウザであれば似たような機能をもったツールが搭載されています。

Google Chromeデベロッパーツール

デベロッパーツールを起動する

Mac:の場合
Google Chromeのメニューから「表示」->「開発/管理」->「デベロッパーツール」を選択して起動します。

Windowsの場合
Google Chromeの右上のメニューから「Google Chromeの設定」->「その他のツール」->「デベロッパーツール」を選択して起動します。
デベロッパーツール(Macの場合)
(Macの場合)

また、ショートカットキーも用意されています。
Mac: Cmd+Opt+I
Windows: Ctrl+Shift+I

また、ページ上の任意の場所で「右クリック」->「検証」を選択すると、右クリックした際にマウスカーソルがあった箇所のHTMLタグにフォーカスした状態で起動します。
確認したいHTMLタグを素早くチェックできて便利なので、私はほぼこのやり方で起動しています。
検証
デベロッパーツールの起動方法はお分りいただけたと思いますので、ここからは私がよく使っている機能やテクニックをご紹介します。

HTMLやCSSの変更をシミュレーションする

今開いているページのHTML、CSSを変更してみる

デベロッパーツールのElementsタブでは、実際のソースコードに変更を加えず、自分のブラウザ上だけでHTMLやCSSを一時的に変更することができます。
実際にGoogleのトップページで試してみましょう。

「Google 検索」ボタンの上で「右クリック」->「検証」を選択すると、デベロッパーツールが起動してElementsタブ内で「Google 検索」ボタンのHTMLタグにフォーカスが
当たっていることがわかります。(背景色が薄い青色になっています)
検証画面その1

「value=”Google 検索”」の”Google 検索”の上でダブルクリックして適当に変更してみましょう。

検証画面その2

デベロッパーツール上の変更が、実際のページ上でも反映されることを確認してください。

続いて、このボタンのCSSを変更してみましょう。
デベロッパーツールのElementsタブ内で右側のエリアのStylesタブを選択すると、一番上にelement.styleという項目があると思います。
これは現在選択しているHTMLタグ(この場合「Google 検索」ボタン)のstyle属性を指しています。試しにダブルクリックして以下のように設定してみてください。
Elements

ボタンの文字色が赤くなったかと思います。

同様にStylesタブには適用されているCSSも表示されていて、これらも変更可能なのでいろいろ試してみてください。私はこの機能を使って、サーバー上にある実際のソースコードを変更する前にCSSなどのデザインのチェックを行っています。

このように、変更した内容がその場でブラウザに反映されるのが大きな利点です。デザイン修正の際など、実際にソースコードに修正を入れることなく、自分のブラウザで修正結果をシミュレーションできるため、非常に便利です。
Elementsタブ上でフォーカスされているタグは、ブラウザ上でも同様にフォーカスされるので、タグの位置関係を把握するのにも重宝します。
なお、変更したHTMLはページをリロードすると元に戻ります。

スマホモードで見てみる

昨今のスマホの台頭により、Webサイトの表示をスマホ用に最適化することはほぼ必須となっています。
PCでは正常に表示されていても、スマホでページを見ると一部のデザインが崩れるといったケースは多々あります。
このような場合、いちいちスマホの実機を使ってチェックするのは面倒ですが、デベロッパーツールのスマホモードを使えば、手軽にチェックできます。

やり方は非常に簡単で、デベロッパーツールのElementsタブの左側のアイコンをクリックするだけです。これでスマホで見たときのページビューに切り替わります。
デベロッパーツールのElementsタブ

デベロッパーツールのスマホモード
もう一度アイコンをクリックすると元に戻ります。

ページ上のエラーチェック

ページが表示された際、パッと見、正常に表示されているように見えても、実際にはリンク切れやJavaScriptなどのプログラムエラーが起こっている場合があります。

ここからは弊社HPにあるこちらのページを使い、エラーやリンク切れの確認方法についてご紹介します。

弊社HPを開き、左上のロゴをフォーカスした状態でデベロッパーツールを起動してください。
Consoleタブを見ると黒文字で何やら表示されています。
ページ上のエラーチェックその1
内容はさておき、これはこのページで読み込んでいる「jquery-migrate.min.js」というファイルで「JQMIGRATE: Migrate is installed, version 1.4.1」のメッセージが出力されたことを意味します。
後述のセクションで詳しく説明しますが、ファイル名(URL)の後ろについている「?ver=1.4.1」はリクエストパラメータといって、「?」以降の文字列を付加情報として渡しているだけなので今はスルーしてください。そのあとの「 :2」はメッセージが出力された行数になります。

重要なのは表示されるメッセージの文字色です。
Consoleタブに表示されるメッセージは、その色によって以下のように種類が分かれます。

赤:エラー系
黄色:警告系(セキュリティ的に怪しいものや修正の必要がありそうなもの)
黒:その他のログなど

特に赤で表示されているメッセージがある場合は、ソースコードに何らかの修正が必要となる場合がほとんどですので要注意です。

ここで、Elementsタブを選択してロゴのimgタグのsrcに記載されている画像ファイル名を適当に変更してみてください。
ページ上のエラーチェックその2

画像ファイル名を適当に変更したため、読み込む画像ファイルが存在しない状態となり、ブラウザ上でもロゴ画像が消えます。これは俗に言う「リンク切れ」の状態です。

デベロッパーツールの右上に赤色でバツ印がついていると思います。
これはページ上にエラーがあることを意味しており、横の数字はエラーの数です。
Consoleタブを選択するとエラーの内容を見ることができます。

Consoleタブ
変更した画像ファイル名のあとに赤字で404と書かれているのは、画像ファイル名が見つからなかったときに表示されるhttpのステータスコード(404 = Not Found)を意味します。

画像やCSS、JavaScriptファイルなどページを表示するために必要なファイルのリンク切れはエラーと判断されます。ですが、外部ページへのテキストリンクなどクリックしてみて初めてリンク切れに気がつくものは、ページの表示自体には影響せず、エラーとして表示されないことに注意してください。

もし、ページを表示した際にテキストリンクなどのリンク切れをチェックしたい場合は、デベロッパーツールではできないのでアドオンの利用をおすすめします。

Check My Links

Consoleタブで発見したエラーや警告に関しては、自身で修正できるかどうかは別としてエンジニアや管理者に対してアラートを挙げられるようになると望ましいです。

通信の回数やステータスを見てみる

Webサイトを表示する際には様々な通信が行われています。

ここではWebサイトが表示される際の通信の仕組みをざっくりと説明した上で、デベロッパーツール上で通信内容を確認する方法をご紹介します。

なお、通信の仕組みについては本記事の本筋から外れるためかなり簡素化しています。

http通信

Webサイトがブラウザに表示される際にはhttp通信が用いられています。
httpはデータの送受信などの通信に関する取り決め(プロトコルという)で、各ブラウザはhttp通信の仕様に基づいて作られています。

現在主流になっているhttpsは、httpの通信内容を暗号化してセキュリティを強化したものになります。

あるWebサイトを見るとき、以下のようなやりとりが行われます。

(1)まずブラウザがWebサイトのHTMLが置かれているWebサーバーに対して「このWebサイトが見たい」という内容の依頼を送る
(2)Webサーバーはブラウザに対して依頼されたWebサイトのHTMLを渡す。

このやりとりがhttp通信になります。(1)はhttpの「リクエスト」、(2)は「レスポンス」と呼ばれています。

レスポンスには種類・状態を表す「ステータスコード」が付与され、ブラウザはステータスコードによって処理を分けます。

例えば、リダイレクトを表すステータスコード「301」が付与された場合、ブラウザはレスポンスで指定されたリダイレクト先のURLに対してリクエストを送ります。

ステータスコードとは?今さら聞けないステータスコードの基礎知識

http通信を図で表すとこんな感じです。
http通信図解

もし取得したHTML上で画像やJavaScript、CSSなどのファイルが指定されている場合、WebサイトのHTMLを取得した時点ではこれらのファイルはまだ取得されていません。

ブラウザはこれらを1つずつリストアップして「画像をください」->「画像を渡します」といった形で追加のhttp通信を行います。

最近の洗練されたWebサイトにおいては多数の画像やCSS、JavaScriptファイルが使われることが一般的なので、1つのWebサイトを表示するために複数のhttp通信が行われています。

Webサイトに必要なファイルが揃ったら表示完了です。

デベロッパーツールでhttp通信を見てみる

それでは実際にhttp通信の内容を見てみましょう。
こちらのページを開き、デベロッパーツールのNetworkタブを選択してください。

ここで検証の邪魔にならないようキャッシュを無効にしておきましょう。
キャッシュは一度http通信で取得した画像やCSSなどのファイルをPC上に保存しておき、再度同じWebサイトを訪れた際に、このファイルを読み込むことで表示の高速化や通信回数の節約を実現する仕組みです。
PC上のファイルを読み込むため、http通信でWebサーバーから取得は行う必要がないのです。

「Disable cache」にチェックを入れるとデベロッパーツールを開いている間のみキャッシュが無効化されます。
Disable cache

Networkタブを開いた状態で、ページをリロードしてみてください。

Networkタブ

表示された1行がhttp通信1回分になります。

一番上の「corporate/」はこのページのHTMLの取得のための通信で、
以降の行にはこのページを表示するために必要な画像やCSS、JavaScriptファイルを取得するための通信になります。
(厳密にはGoogle Analyticのトラッキングなどページに含まれるJavaScriptから発生する通信なども含まれています。)

「corporate/」をクリックして通信の詳細を見てみましょう。

HeadersタブのGeneralの欄にあるRequest URLというのはブラウザがWebサーバーに対して依頼したWebサイトのURLです。

lStatus Codeという項目があり、これが先ほどお話ししたステータスコードになります。

今回は「200 OK」となっているので正常に取得できたということです。

Headersタブ

Responseタブを選択すると、実際にHTMLが取得できていることがわかります。

Responseタブ

今アクセスしているページのURLは「http://www.sakurasaku-marketing.jp/corporate/」となっていますが、今度はドメインの先頭にある「www.」を削除した「http://sakurasaku-marketing.jp/corporate/」で通信内容を見てみてください。

先頭に「corporate/」という行が2つ並んでいるかと思います。
一番上の「corporate/」をクリックすると、ステータスコードが301 Moved Permanentlyとなっており、リダイレクトが必要であることを意味しています。

Response HeadersのLocationに「www.」ありのURLが指定されており、ブラウザはこれをもとに2行目の「http://www.sakurasaku-marketing.jp/corporate/」にリクエストを送っています。

この挙動は「www.」なしでアクセスした際には「www.」ありのURLにリダイレクトさせるように設定されているため発生しており、URLの正規化などと呼ばれています。

Response Headers

URL正規化とは?正規化が必要なケースとcanonicalの設定方法

Networkタブの各行の「Waterfall」という列では、その通信の一連の流れをオレンジや緑の棒グラフで表しています。

中でも緑の棒は「Waiting (TTFB)」という項目で、WebサーバーがHTMLなどのレスポンスを返すための処理にかかった時間を表しています。

通信全体を俯瞰して緑の棒が長い箇所はWebサーバーの処理に時間がかかっているということなので、Webサーバー側で処理を高速化するようなチューニングが必要となる場合があります。

Waiting (TTFB)

Waiting (TTFB)に関しては、Googleはページ表示スピード改善における1つの指標として取り上げておりSEO観点でも重要とされています。
PageSpeed InsightsというGoogle公式のツールでも確認でき、別の記事で使い方をご紹介しているので、参考にしてみてください。

【検証!】ページスピードインサイト(PageSpeed Insights)のスコア改善施策と結果を公開!使い方とまずやるべき施策を徹底解説!

ここまでの説明でWebサイト上のたった1ページを表示するために、これだけの通信が行われていることがおわかりいただけたかと思います。

Webサイトの表示スピードを改善したい場合などは、まずNetworkタブでどの程度の通信が行われているのかをチェックすると良いでしょう。

また、Webサイトがハッキングされていたり、プラグインに見せかけた悪意のあるJavaScriptファイルを読み込んでしまっているなど、意図せず見知らぬRequest URLに対してリクエストを送ってしまっている可能性もあります。そのような観点から見てみるのも良いと思います。

ページのパフォーマンスを見てみる

最後にページのパフォーマンスを見てみましょう。パフォーマンスという言葉はあまり聞き慣れないかもしれませんが、Webサイトに対して使う場合は主にページの表示スピードを指します。

先ほどご紹介したPageSpeed Insightsを使うと、Webサイトのパフォーマンスに関してより高度な解析が可能です。ただし、Basic認証などのアクセス制限をかけているページでは利用できないため、そのような場合は以下の手順でデベロッパーツールによる簡易チェックをすることをおすすめします。

先ほどのページでデベロッパーツールのPerformanceタブを開き、左側にある更新アイコンをクリックしてください。

更新アイコン

何やらごちゃごちゃ表示されていますが、見にくいのでデベロッパーツールをフルスクリーンモードにします。

デベロッパーツール右側の「設定アイコン」-> 「Dock side」の一番左を選択すると、デベロッパーツールがウインドウとして独立します。
この状態でフルスクリーンにすると見やすくなります。

Dock side

Performanceタブの一番上グラフはWebサイトにアクセスしてから表示完了となるまでを時系列で表しています。

Performanceタブその1

グラフは範囲指定可能で、指定した範囲のパフォーマンスを確認することもできます。
試しに範囲を左端から右端までの全範囲にしてみてください。

Performanceタブその2

全範囲にした状態で一番下のSummaryタブを選択してください。
表示される円グラフはページ表示にかかった時間の内訳を表しており、Totalはページ表示にかかったトータルの時間を表しています。

Summaryタブ

今回は6259msとなっており、ms = 1/1000秒なので、このWebサイトのページを表示するのに6秒程度かかっていることがわかります。なお、デベロッパーツールによる簡易的なパフォーマンスチェックとしては、Totalが把握できれば十分です。

まとめ

以上、今回はデベロッパーツールの機能やそれを使ったWebサイトの解析テクニックを紹介しました。デベロッパーツールという名前からWebサイトの開発者やデザイナーなどのエンジニア向けのツールと思われがちですが、実はWeb担当者やSEOコンサルタントなど非エンジニアの方にとっても有用な機能が多数あります。

非エンジニアの方がクライアントとのミーティング中にデベロッパーツールを使ってサクッと分析できると、「この人なんかすごいぞ」といった印象を与えることができるかもしれません。本記事をきっかけにデベロッパーツールの有用性が伝われば幸いです。

SEOの最新情報を手に入れることで、SEO施策を強化しましょう

Google Chromeデベロッパーツールは無料かつ手軽に使えるツールである一方、サイトを様々な要素で確認することができます。
現状を把握した後は最新の情報を手に入れて、常に現状に最適化したサイト運営をしていきましょう。

サクラサクラボではSEOの最新情報を無料のメルマガで発信中!

どなたでもお名前とメールアドレスのみで簡単に登録がいただけます!

↓↓↓メルマガ登録はコチラ↓↓↓





無料メルマガのご登録(無料)

SEOの最新情報を無料でお届けします!





プライバシーポリシー

投稿者:安次冨 健太郎

記事一覧

SIerを経て2015年にサクラサクマーケティング株式会社に入社。
社内業務システムやメディア、クラウドソーシングサービスの開発に携わる。
フロントエンド〜サーバーサイド、インフラまで全部担当。好きな言語はGolang。



無料資料ダウンロード

サービス資料ダウンロード

用語集

ソースコード集

お役立ちリンク集

無料メルマガのご登録(無料)

SEOの最新情報を無料でお届けします!





プライバシーポリシー

お役立ちツール

カテゴリ一覧

タグクラウド

新着記事一覧

    1. 強調スニペットとは?表示させる方法と必要な対策

      目次 強調スニペットとは強調スニペットが表示される場所強調スニペットの種類と表示例強調スニペットに表示させる方法上位表示させる短く簡潔な回答を用意するGoogleが理解しやすいよう、適切なHTMLマークアップを用いるGo […]...

      1. 中小企業が勝つ為のWebマーケティング戦略セミナー(無料オンライン)

        目次 Webマーケティング戦略セミナー概要このような課題をお持ちの方は特におすすめですセミナーカリキュラム1章:戦略なき失敗から学ぶ戦略の重要性2章:マーケティングファネル戦略の理解3章:中小企業が勝つための戦略yout […]...

おすすめコンテンツ

  1. SEO対策(検索エンジン最適化)とは?初心者にもわかりやすく解説します

    SEO対策とは「検索エンジン最適化」のことで、数あるWeb集客手法の中でも、検索エンジンからの成果を最大化することです。基本的にはユーザーや検索エンジンからより評価されるように、WebサイトやWebページの変更・改修を続 […]...

    1. コンテンツマーケティングとは?特徴と事例、社内でできる方法を解説します

      ここ数年で急激にコンテンツマーケティングという言葉を聞くようになりました。しかし、「興味があるがまだ着手できていない」という人や、「そもそもどんなコンテンツを作ればいいのかわからない」、「社内で運用しているが成果がでない […]...

      1. SEOに強いコンテンツは回答性×網羅性×文字数×ユーザー体験

        目次 SEOに強いコンテンツとは回答性網羅性文字数ユーザー体験[回答性×網羅性×文字数×ユーザー体験]を考慮したSEOに強いコンテンツ制作お問い合わせフォーム SEOに強いコンテンツとは 検索エンジンで上位表示をさせるた […]...

最新情報を取得する

PAGE TOP