本記事ではGoogle Chromeデベロッパーツールの概要と、それを使ったWebサイトの簡易的な解析テクニックをご紹介します。
デベロッパーツールとは、Google Chromeにデフォルトで搭載されている開発者向けの検証ツールです。普通にサイトを閲覧する際に使うことはありませんが、開発者がHTMLやCSSなどからレイアウト崩れの原因の特定や、ページ改修前後の検証など、様々な面で活用ができます。
今回はエンジニアである私が、よく使っているテクニックや機能の中から「エンジニアでない方でも業務に活かせる」と思うものを厳選しましたので、ぜひご確認ください。
なお本記事は、業界経験の浅い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などのモダンブラウザであれば似たような機能をもったツールが搭載されています。
デベロッパーツールでできること
デベロッパーツールでは様々なことができます。何ができるかすべてを網羅するのは難しいですが、レイアウトやデザインを変更する際のテストとして使えるHTMLやCSSの検証ができるElementsパネル、PCやスマホ、タブレット等での表示・見え方のシミュレーションができるデバイスモードなど、Webページの制作や検証などを行うために必要な要素を幅広く備えている事が大きな特徴です。
また、SEO視点で重要なCWV（コアウェブバイタルズ）を改善する際ボトルネックを発見し、改善に結びつけるといった、システムやWeb制作以外でも活用できる機能も豊富です。
CWVについてはこちらを参照ください。
Googleランキング要因になるコアウェブバイタル (Core Web Vitals) とは？概要から改善方法まで徹底解説！
デベロッパーツールを起動する
Mac:の場合
Google Chromeのメニューから「表示」->「開発/管理」->「デベロッパーツール」を選択して起動します。
Windowsの場合
Google Chromeの右上のメニューから「Google Chromeの設定」->「その他のツール」->「デベロッパーツール」を選択して起動します。
（Macの場合）
また、ショートカットキーも用意されています。
Mac: Cmd+Opt+I
Windows: Ctrl+Shift+I
また、ページ上の任意の場所で「右クリック」->「検証」を選択すると、右クリックした際にマウスカーソルがあった箇所のHTMLタグにフォーカスした状態で起動します。
確認したいHTMLタグを素早くチェックできて便利なので、私はほぼこのやり方で起動しています。
デベロッパーツールの起動方法はお分りいただけたと思いますので、ここからは私がよく使っている機能やテクニックをご紹介します。
HTMLやCSSの変更をシミュレーションする
今開いているページのHTML、CSSを変更してみる
デベロッパーツールのElementsタブでは、実際のソースコードに変更を加えず、自分のブラウザ上だけでHTMLやCSSを一時的に変更することができます。
実際にGoogleのトップページで試してみましょう。
「Google 検索」ボタンの上で「右クリック」->「検証」を選択すると、デベロッパーツールが起動してElementsタブ内で「Google 検索」ボタンのHTMLタグにフォーカスが
当たっていることがわかります。(背景色が薄い青色になっています)
「value=”Google 検索”」の”Google 検索”の上でダブルクリックして適当に変更してみましょう。
デベロッパーツール上の変更が、実際のページ上でも反映されることを確認してください。
続いて、このボタンのCSSを変更してみましょう。
デベロッパーツールのElementsタブ内で右側のエリアのStylesタブを選択すると、一番上にelement.styleという項目があると思います。
これは現在選択しているHTMLタグ(この場合「Google 検索」ボタン)のstyle属性を指しています。試しにダブルクリックして以下のように設定してみてください。
ボタンの文字色が赤くなったかと思います。
同様にStylesタブには適用されているCSSも表示されていて、これらも変更可能なのでいろいろ試してみてください。私はこの機能を使って、サーバー上にある実際のソースコードを変更する前にCSSなどのデザインのチェックを行っています。
このように、変更した内容がその場でブラウザに反映されるのが大きな利点です。デザイン修正の際など、実際にソースコードに修正を入れることなく、自分のブラウザで修正結果をシミュレーションできるため、非常に便利です。
Elementsタブ上でフォーカスされているタグは、ブラウザ上でも同様にフォーカスされるので、タグの位置関係を把握するのにも重宝します。
なお、変更したHTMLはページをリロードすると元に戻ります。
スマホモードで見てみる
昨今のスマホの台頭により、Webサイトの表示をスマホ用に最適化することはほぼ必須となっています。
PCでは正常に表示されていても、スマホでページを見ると一部のデザインが崩れるといったケースは多々あります。
このような場合、いちいちスマホの実機を使ってチェックするのは面倒ですが、デベロッパーツールのスマホモードを使えば、手軽にチェックできます。
やり方は非常に簡単で、デベロッパーツールのElementsタブの左側のアイコンをクリックするだけです。これでスマホで見たときのページビューに切り替わります。
もう一度アイコンをクリックすると元に戻ります。
ページ上のエラーチェック
ページが表示された際、パッと見、正常に表示されているように見えても、実際にはリンク切れやJavaScriptなどのプログラムエラーが起こっている場合があります。
ここからは弊社HPにあるこちらのページを使い、エラーやリンク切れの確認方法についてご紹介します。
弊社HPを開き、左上のロゴをフォーカスした状態でデベロッパーツールを起動してください。
Consoleタブを見ると黒文字で何やら表示されています。
内容はさておき、これはこのページで読み込んでいる「jquery-migrate.min.js」というファイルで「JQMIGRATE: Migrate is installed, version 1.4.1」のメッセージが出力されたことを意味します。
後述のセクションで詳しく説明しますが、ファイル名（URL）の後ろについている「?ver=1.4.1」はリクエストパラメータといって、「?」以降の文字列を付加情報として渡しているだけなので今はスルーしてください。そのあとの「 :2」はメッセージが出力された行数になります。
重要なのは表示されるメッセージの文字色です。
Consoleタブに表示されるメッセージは、その色によって以下のように種類が分かれます。
赤：エラー系
黄色：警告系（セキュリティ的に怪しいものや修正の必要がありそうなもの）
黒：その他のログなど
特に赤で表示されているメッセージがある場合は、ソースコードに何らかの修正が必要となる場合がほとんどですので要注意です。
ここで、Elementsタブを選択してロゴのimgタグのsrcに記載されている画像ファイル名を適当に変更してみてください。
画像ファイル名を適当に変更したため、読み込む画像ファイルが存在しない状態となり、ブラウザ上でもロゴ画像が消えます。これは俗に言う「リンク切れ」の状態です。
デベロッパーツールの右上に赤色でバツ印がついていると思います。
これはページ上にエラーがあることを意味しており、横の数字はエラーの数です。
Consoleタブを選択するとエラーの内容を見ることができます。
変更した画像ファイル名のあとに赤字で404と書かれているのは、画像ファイル名が見つからなかったときに表示されるhttpのステータスコード（404 = Not Found）を意味します。
画像やCSS、JavaScriptファイルなどページを表示するために必要なファイルのリンク切れはエラーと判断されます。ですが、外部ページへのテキストリンクなどクリックしてみて初めてリンク切れに気がつくものは、ページの表示自体には影響せず、エラーとして表示されないことに注意してください。
もし、ページを表示した際にテキストリンクなどのリンク切れをチェックしたい場合は、デベロッパーツールではできないのでアドオンの利用をおすすめします。
Consoleタブで発見したエラーや警告に関しては、自身で修正できるかどうかは別としてエンジニアや管理者に対してアラートを挙げられるようになると望ましいです。
通信の回数やステータスを見てみる
Webサイトを表示する際には様々な通信が行われています。
ここではWebサイトが表示される際の通信の仕組みをざっくりと説明した上で、デベロッパーツール上で通信内容を確認する方法をご紹介します。
なお、通信の仕組みについては本記事の本筋から外れるためかなり簡素化しています。
http通信
Webサイトがブラウザに表示される際にはhttp通信が用いられています。
httpはデータの送受信などの通信に関する取り決め（プロトコルという）で、各ブラウザはhttp通信の仕様に基づいて作られています。
現在主流になっているhttpsは、httpの通信内容を暗号化してセキュリティを強化したものになります。
あるWebサイトを見るとき、以下のようなやりとりが行われます。
（１）まずブラウザがWebサイトのHTMLが置かれているWebサーバーに対して「このWebサイトが見たい」という内容の依頼を送る
（２）Webサーバーはブラウザに対して依頼されたWebサイトのHTMLを渡す。
このやりとりがhttp通信になります。（１）はhttpの「リクエスト」、（２）は「レスポンス」と呼ばれています。
レスポンスには種類・状態を表す「ステータスコード」が付与され、ブラウザはステータスコードによって処理を分けます。
例えば、リダイレクトを表すステータスコード「301」が付与された場合、ブラウザはレスポンスで指定されたリダイレクト先のURLに対してリクエストを送ります。
ステータスコードとは？今さら聞けないステータスコードの基礎知識
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」にチェックを入れるとデベロッパーツールを開いている間のみキャッシュが無効化されます。
Networkタブを開いた状態で、ページをリロードしてみてください。
表示された1行がhttp通信1回分になります。
一番上の「corporate/」はこのページのHTMLの取得のための通信で、
以降の行にはこのページを表示するために必要な画像やCSS、JavaScriptファイルを取得するための通信になります。
（厳密にはGoogle Analyticのトラッキングなどページに含まれるJavaScriptから発生する通信なども含まれています。）
「corporate/」をクリックして通信の詳細を見てみましょう。
HeadersタブのGeneralの欄にあるRequest URLというのはブラウザがWebサーバーに対して依頼したWebサイトのURLです。
lStatus Codeという項目があり、これが先ほどお話ししたステータスコードになります。
今回は「200 OK」となっているので正常に取得できたということです。
Responseタブを選択すると、実際にHTMLが取得できていることがわかります。
今アクセスしているページの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の正規化などと呼ばれています。
URL正規化とは？正規化が必要なケースとcanonicalの設定方法
Networkタブの各行の「Waterfall」という列では、その通信の一連の流れをオレンジや緑の棒グラフで表しています。
中でも緑の棒は「Waiting (TTFB)」という項目で、WebサーバーがHTMLなどのレスポンスを返すための処理にかかった時間を表しています。
通信全体を俯瞰して緑の棒が長い箇所はWebサーバーの処理に時間がかかっているということなので、Webサーバー側で処理を高速化するようなチューニングが必要となる場合があります。
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」の一番左を選択すると、デベロッパーツールがウインドウとして独立します。
この状態でフルスクリーンにすると見やすくなります。
Performanceタブの一番上グラフはWebサイトにアクセスしてから表示完了となるまでを時系列で表しています。
グラフは範囲指定可能で、指定した範囲のパフォーマンスを確認することもできます。
試しに範囲を左端から右端までの全範囲にしてみてください。
全範囲にした状態で一番下のSummaryタブを選択してください。
表示される円グラフはページ表示にかかった時間の内訳を表しており、Totalはページ表示にかかったトータルの時間を表しています。
今回は6259msとなっており、ms = 1/1000秒なので、このWebサイトのページを表示するのに6秒程度かかっていることがわかります。なお、デベロッパーツールによる簡易的なパフォーマンスチェックとしては、Totalが把握できれば十分です。
まとめ
以上、今回はデベロッパーツールの機能やそれを使ったWebサイトの解析テクニックを紹介しました。デベロッパーツールという名前からWebサイトの開発者やデザイナーなどのエンジニア向けのツールと思われがちですが、実はWeb担当者やSEOコンサルタントなど非エンジニアの方にとっても有用な機能が多数あります。
非エンジニアの方がクライアントとのミーティング中にデベロッパーツールを使ってサクッと分析できると、「この人なんかすごいぞ」といった印象を与えることができるかもしれません。本記事をきっかけにデベロッパーツールの有用性が伝われば幸いです。
SEOの最新情報を手に入れることで、SEO施策を強化しましょう
Google Chromeデベロッパーツールは無料かつ手軽に使えるツールである一方、サイトを様々な要素で確認することができます。
現状を把握した後は最新の情報を手に入れて、常に現状に最適化したサイト運営をしていきましょう。
サクラサクラボではSEOの最新情報を無料のメルマガで発信中！
どなたでもお名前とメールアドレスのみで簡単に登録がいただけます！
↓↓↓メルマガ登録はコチラ↓↓↓
