Google Chromeデベロッパーツールを初心者が使いこなす方法

Web開発者は、日々Google Chromeデベロッパーツールを積極的に活用し、HTMLやCSS、さまざまなデバイス上での表示を検証しています。

Webに関わる方にとってはデベロッパーツールの存在を知っているものの、具体的な使用方法に精通している人は少ないでしょう。この記事では、Google Chromeデベロッパーツールの起動方法から基本機能までを解説し、Web開発現場でよく使われる方法を解説します。

Web開発の経験がないデジタルマーケターの方にも役立つ内容となっていますので、この記事を通じて、デベロッパーツールへの苦手意識を克服しましょう。

監修者

石田 哲也

Twitter：@te2319
株式会社ニュートラルワークス 取締役CMO。1984年生まれ。高校卒業後にISD株式会社を起業。その後、株式会社オプトでWebマーケティングを学び、株式会社メタップスなど複数のベンチャー企業にて事業立ち上げを経験。前職はワンダープラネット株式会社でゲームプロデューサーとしてスマホゲームアプリの制作に従事。2018年に地元の神奈川へ戻り、ニュートラルワークスに入社。SEO/Web広告運用/サイト分析・改善など、Webサイトの運用改善～ゲームアプリ制作や数十万フォロワーのSNSアカウントの運用経験などWebビジネス全般を守備範囲とする。

■経歴
2003年　ISD株式会社/起業
2009年　株式会社オプト/SEMコンサルタント
2011年　株式会社メタップス/シニアディレクター
2013年　ライブエイド株式会社/執行役
2016年　ワンダープラネット株式会社/プロデューサー・BizDev
2018年　株式会社ニュートラルワークス/取締役CMO

■得意領域
Webサイト改善
SEO対策
コンテンツマーケティング
リスティング広告

■保有資格
Google アナリティクス認定資格（GAIQ）
Google 広告検索認定資格
Google 広告ディスプレイ認定資格
Google 広告モバイル認定資格

執筆者

株式会社ニュートラルワークス

QUERYY(クエリー)編集部

QUERYY(クエリー)は、株式会社ニュートラルワークスが運営するデジタルマーケティング情報メディアです。

Google Chromeデベロッパーツールとは

Google Chromeデベロッパーツールは、Google Chromeに組み込まれたデバッグツールであり、Webサイトのバグや他の不具合をチェックするために使用されます。このツールを使うことで、開発者は問題の原因を特定できます。そのため、Web開発者は日常的にこのツールを利用しています。

Google Chromeには、HTML/CSSの表示や操作、読み込まれたソースコードや画像の表示、通信状況の確認など、Web開発者にとって必要な機能が多数組み込まれています。（それぞれの機能については後述します）
WEBデザイナーやWEB開発者が押さえておきたい「25」のChrome拡張サービス

Google Chromeデベロッパーツールの基本操作

Google Chromeデベロッパーツールの基本機能を解説する前に、機能操作について解説します。基本操作は以下の通りです。

• 起動方法
• 日本語化する方法
• 画面配置を変更する方法

特に日本語化の手順を覚えておくと、Web開発者でなくても利用しやすくなるでしょう。

起動方法

Google Chromeデベロッパーツールの起動方法は、Google Chromeで対象のWebサイトを開いた状態で右クリックをして「検証」をクリックするだけです。

実際に開いてみると以下のような表示が現れます。

この状態になれば、起動完了です。

ショートカットキーは以下の通りです。

Google Chrome上で利用すれば、メニューを出さずに起動できます。

日本語化する方法

Google Chromeデベロッパーツールは、表示を日本語化できます。Web開発者の中には、英語に慣れてしまっている方も多いでしょう。しかし、初心者の場合は日本語表示に切り替えることで、少しでも使いやすくなるかもしれません。

設定画面で言語を日本語に変更して、閉じるマークをクリックします。

新たに表示された【Reload DevTools】をクリックして完了です。

日本語になった画面がこちらです。

画面配置を変更する方法

Google Chromeデベロッパーツールでは、画面の配置を変更できます。作業環境に応じて、デベロッパーツールの表示位置を調整したい場合に活用してください。

画面配置を変更するには、以下の場所をクリックします。

「固定サイド」の部分を変更することで画面表示を変更することが可能です。

この機能が必要なのは、さまざまなデバイスで検証を行うときに、PC表示なら下部、スマホ表示なら左右に表示させるときに利用します。

Google Chromeデベロッパーツールの基本機能

デベロッパーツールの上部に設置されたタブが基本機能です。

基本機能は以下の通りです。

• Elements（要素）
• Console（コンソール）
• Sources（ソース）
• Network（ネットワーク）
• Performance（パフォーマンス）
• Memory（メモリ）
• Application（アプリケーション）
• Security（セキュリティ）
• Lighthousu（ライトハウス）

これはWeb開発者向けのツールですが、どのようなことができるのかを理解することから始めてみましょう。各項目にはGoogle Chromeデベロッパーツールの公式ドキュメントへのリンクが掲載されています。英語ですが、Chromeの翻訳機能を使えば翻訳して確認できます。

Elements（要素）

Elementsでは、HTMLの構造やCSSの確認、書き換え、ページ上の要素に対応したHTMLやCSSの検索などが可能です。書き換えたHTMLやCSSは、ブラウザ上でリアルタイムに反映され、確認できます。ただし、変更内容は保存されず、自身のブラウザ表示のみに反映されることに留意しましょう。

HTMLはツリー構造で表示され、CSSは適用されているスタイルが優先度順に表示されるため、検証がしやすくなっています。

ElementsはGoogle Chromeデベロッパーツールでよく利用される基本的な機能です。詳しい利用方法については後述します。
CSSとは？よく使うセレクタやルールを初心者向けに解説

Console（コンソール）

Consoleには以下の2つの機能があります。

1.ログに記録されたメッセージの表示
2.JavaScriptの実行

1つ目の「ログに記録したメッセージの表示」とは、コードが正しい順序で実行されているかの確認や変数の値の検査をするために行われます。

特にエラーコードの解析では欠かせないもので、Elements同様にデバッグやテストなどが行えます。

ログに記録されたメッセージの確認やJavaScriptの実行についてはChrome DevToolsの公式ドキュメントを参考にしてください。

Log messages in the Console – Chrome Developers

Run JavaScript in the Console – Chrome Developers

Sources（ソース）

Sourcesでは、主に以下のような機能があります。

• ファイルの表示
• CSSとJavaScriptの編集
• JacvaScriptのスニペットを作成と保存
• JavaScriptのデバッグ

特にどのようなファイルが読み込まれているのか確認することと、CSSとJavaScriptの編集を行うために使用します。

CSSとJavaScriptの編集やスニペットの作成と保存、JavaScriptの保存は以下の公式ドキュメントを参考にしてください。

Sources panel overview – Chrome Developers

Run snippets of JavaScript – Chrome Developers

Debug JavaScript – Chrome Developers

Network（ネットワーク）

Networkは、ブラウザが実行した通信ログを確認する機能です。URLをクリックした時のリクエストや画像の読み込み、JavaScriptやCSSの持ち込み、使用した時間、各通信のレスポンなどを確認します。

具体的には、ブラウザキャッシュのない初回訪問やモバイルのネットワーク状況をシミュレートできます。他にもどのファイルが一番重かったり遅かったりするかや表示状況を確認するのに利用することもあるでしょう。

このようにさまざまな通信ログを確認ができます。活用したい方は以下の公式ドキュメントを参考にしてください。

Inspect network activity – Chrome Developers

Network features reference – Chrome Developers

View page resources – Chrome Developers
ページ表示速度の計測方法/改善策を解説！SEOに重要な理由とは

Performance（パフォーマンス）

Performanceは、計測を行いその結果が閲覧できる機能です。Webサイトにもよりますが計測にはかなり時間がかかります。

計測が完了すると、以下の数値を確認できます。

• Loading
• Scripting
• Rendering
• Painting
• Other
• Idle
• Total

Performanceは、後述するLighthouseでも確認が可能です。

Memory（メモリ）

Memoryはメモリリークの調査をするときに利用します。メモリリークとは、メモリ領域を解放する処理がないのが原因でメモリを確保しているにも関わらず、メモリの空き領域が減っていくことを指します。

Google Chromeデベロッパーツールでは、以下の3つの方法でメモリリークの調査が行えます。

• ヒープスナップショット
• タイムラインの計測手法割り当て
• 割り当てサンプリング

Application（アプリケーション）

Applicationでは、Webサイトで読み込まれたリソースの調査と編集を行うときに利用します。リソースとはソフトウェアを動作させるために必要なメモリやハードウェア容量、CPUの処理速度のことです。

Applicationでは、以下のリソースを調査したり編集したりできます。

• Cookie
• 画像
• フォント
• スタイルシートアプリケーション キャッシュ
• IndexedDB
• Web SQLデータベース
• ローカルストレージ
• セッション ストレージ

詳細を確認したい方は、公式ドキュメントを参考にしてください。

Debug Progressive Web Apps

Security（セキュリティ）

Securityは安全性を検証する機能です。

検証できるものは以下の通りです。

• 証明書が使用されているか
• 安全な接続かどうか
• 安全なリソースかどうか

Lighthouse（ライトハウス）

Lighthouseは以下の検証が行えます。

• サイトパフォーマンス
• PWA
• ベストプラクティス
• アクセンシビリティ
• SEO

これらのチェック項目を改善することでSEO効果があるため、Web開発者だけではなく、Webマーケターなども確認する機能です。

Lighthouseは、Google Chromeの拡張機能を利用することでも検証が行えます。もしデベロッパーツールでの検証が時間がかかる場合は、利用してみましょう。

Chrome ウェブストアのLighthouseはこちらから
LCPとは？コアウェブバイタルの概要、改善時の注意点を解説

Google Chromeデベロッパーツールでよく行われること

Google Chromeデベロッパーツールでよく行われる作業は以下の通りです。

• ElementsでHTMLとCSSの編集
• さまざまなデバイスでの表示を確認する
• Consoleでエラーを確認する

一つずつ解説します。

ElementsでHTMLとCSSの編集

HTMLとCSSの編集は、前述した通りElementsを利用します。HTMLを選択してダブルクリックすることで編集が行えます。

以下の画像は、Elementsで弊社WebサイトのTOPページのh1です。

このHTMLとCSSを編集してみます。

h1の文字を変更しました。（ニュートラルワークス→◯◯◯◯）

続いてCSSを編集します。

フォントサイズを小さくしてみます。

【編集前】

【編集後】

簡易的ではありますがこのようにHTMLとCSSを編集することが可能です。Webサイトの表示を変更するときに利用してみてください。

さまざまなデバイスでの表示を確認する

Webサイトをさまざまなデバイスで確認をしたい場合は、デバイスツールバーを利用します。Google Chromeデベロッパーツールを開いたら以下のマークした部分をクリックして使えます。

続いて【サイズ】の部分をクリックすれば、さまざまなデバイスの表示が確認できるようになります。

デバイスツールバーを利用することで、さまざまなデバイスのレスポンシブ対応の表示を調べられます。ただし、完全に再現ができているわけではないため、実機での確認をする必要もあるでしょう。
レスポンシブデザインとは？今さら聞けない特徴やメリット・デメリットを解説 PCやスマホ、タブレットそれぞれのデバイスに最適なデザインでWebサイトを表示するレスポンシブデザインが今や当たり前になりました。レスポンシブデザインとは何か、何に注意して設計すべきかを基本的なところから解説します。

Consoleでエラーを確認する

Consoleでのエラーを確認する方法は、エラーがあれば「Console」と表示されます。JavaScriptのエラー内容を確認して修正しましょう。

エラー内容がわからない場合は、エラーメッセージをGoogle検索してみてください。エラー内容と対策について調べることができます。

例えば、以下のエラーが発生した場合は、このエラーメッセージをコピーして検索すると、Chrome拡張機能を使用しているPCで閲覧しているために発生しているエラーであることがわかりました。

シークレットウィンドウで確認してみると、このようなエラーは出ていませんでした。

このようにWeb開発者ではなくても、Consoleのエラーを確認することはできます。ぜひ試してみてください。

Google Chromeデベロッパーツールを活用しよう

Google Chromeデベロッパーツールの概要や基本操作方法、各機能の説明、よく利用される機能について解説しました。

Web開発経験がないと理解できない内容も一部含まれていると思いますが、まずは自身の知識で理解できる部分から使ってみましょう。また自社サイトだけではなく、競合他社のサイトがどのように作られているか確認できるなど、応用方法はたくさんあるので、ぜひ活用してみてください。