【保存版】Chrome DevToolsの使い方を初心者向けに徹底解説

はじめに

Google Chromeデベロッパーツールは、Google Chromeに標準搭載されている開発者向けの機能です。Webページの構造を確認したり、JavaScriptのデバッグを行ったり、パフォーマンスを測定したりできます。

フロントエンド開発者にとっては必須のツールですが、デザイナーやマーケターの方でも、ページの表示確認やエラーチェックなどで活用できる便利な機能が揃っています。

主な用途としては以下のようなものがあります。

• HTMLやCSSの確認と編集
• JavaScriptのデバッグ
• ネットワーク通信の監視
• パフォーマンスの測定と改善
• レスポンシブデザインの確認

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

起動方法

デベロッパーツールを起動する方法は複数あります。

キーボードショートカット

• Windows/Linux: F12 または Ctrl + Shift + I
• Mac: Command + Option + I

右クリックメニューから

1. Webページ上で右クリック
2. 「検証」または「要素を検証」を選択

メニューバーから

1. Chromeの右上のメニューアイコン（縦3点）をクリック
2. 「その他のツール」→「デベロッパーツール」を選択

日本語化する方法

デベロッパーツールは初期状態では英語表示になっている場合があります。日本語化する手順は以下の通りです。

1. デベロッパーツールを開く
2. 右上の歯車アイコン（Settings）をクリック
3. 左メニューの「Preferences」を選択
4. 「Language」セクションで「Browser UI language」を選択
5. Chromeを再起動

なお、Chrome本体の言語設定が日本語になっていれば、デベロッパーツールも自動的に日本語になります。

画面配置を変更する方法

デベロッパーツールの表示位置は、作業内容に応じて変更できます。

配置の種類

• 右側ドック: ブラウザウィンドウの右側に表示
• 下部ドック: ブラウザウィンドウの下部に表示
• 左側ドック: ブラウザウィンドウの左側に表示
• 別ウィンドウ: 独立したウィンドウとして表示

変更方法

デベロッパーツール右上の縦3点メニューから、表示位置を選択できます。または、以下のショートカットキーで切り替えられます。

• Windows/Linux: Ctrl + Shift + D
• Mac: Command + Shift + D

基本機能

デベロッパーツールには複数のパネルがあり、それぞれ異なる機能を提供しています。

Elements（要素）

Elementsパネルでは、Webページを構成するHTMLとCSSを確認・編集できます。

主な機能

• DOM構造の確認と編集
• CSSスタイルの確認と編集
• 要素のサイズや配置の確認
• イベントリスナーの確認

ページ上で右クリックして「検証」を選択すると、その要素が自動的にElementsパネルで選択された状態で開きます。

左側のHTMLツリーで要素を選択すると、右側のパネルにその要素に適用されているCSSが表示されます。ここで直接スタイルを編集すると、リアルタイムでページに反映されるため、デザインの微調整に便利です。

Console（コンソール）

Consoleパネルは、JavaScriptの実行結果やエラーメッセージを表示する場所です。

主な機能

• JavaScriptコードの実行
• エラーメッセージの確認
• console.logなどのログ出力の確認
• 警告メッセージの確認

開発中は、このConsoleパネルを開いてエラーが出ていないか確認することが基本です。赤いエラーメッセージが表示されている場合は、JavaScriptが正しく動作していない可能性があります。

また、Consoleに直接JavaScriptのコードを入力して実行できるため、動作確認や実験的なコード実行にも活用できます。

Sources（ソース）

Sourcesパネルでは、Webページを構成するファイルの確認とJavaScriptのデバッグができます。

主な機能

• ソースコードの表示
• ブレークポイントの設定
• ステップ実行によるデバッグ
• ローカルファイルの上書き保存

JavaScriptの動作を詳しく調べたいときは、Sourcesパネルでブレークポイントを設定します。ブレークポイントを設定すると、その行でコードの実行が一時停止し、変数の値などを確認できます。

Network（ネットワーク）

Networkパネルでは、ブラウザとサーバー間の通信を監視できます。

主な機能

• HTTPリクエストとレスポンスの確認
• 読み込み時間の測定
• リソースサイズの確認
• APIの動作確認

ページの読み込みが遅い原因を調べたり、APIが正しくデータを返しているか確認したりするときに使います。

Networkパネルを開いた状態でページをリロードすると、すべての通信が記録されます。各リクエストをクリックすると、詳細な情報を確認できます。

Performance（パフォーマンス）

Performanceパネルでは、Webページのパフォーマンスを詳細に分析できます。

主な機能

• ページ読み込みの記録と分析
• JavaScriptの実行時間の測定
• レンダリング処理の確認
• ボトルネックの特定

パフォーマンス改善を行う際は、まずこのパネルで記録を取り、どの処理に時間がかかっているのかを特定します。

Memory（メモリ）

Memoryパネルでは、JavaScriptのメモリ使用状況を確認できます。

主な機能

• ヒープスナップショットの取得
• メモリリークの検出
• メモリ使用量の推移確認
• オブジェクトの保持状況の分析

シングルページアプリケーション（SPA）などで、長時間使用していると動作が重くなる場合は、メモリリークが疑われます。Memoryパネルを使って原因を特定できます。

Application（アプリケーション）

Applicationパネルでは、ブラウザのストレージやキャッシュを管理できます。

主な機能

• LocalStorageの確認と編集
• SessionStorageの確認と編集
• Cookieの確認と削除
• Service Workerの管理
• キャッシュの確認とクリア

ログイン状態の確認や、保存されているデータの確認などに使います。開発中にキャッシュをクリアしたいときにも便利です。

Security（セキュリティ）

Securityパネルでは、Webページのセキュリティ状態を確認できます。

主な機能

• HTTPS接続の確認
• 証明書の詳細確認
• 混在コンテンツの検出
• セキュリティの問題の表示

HTTPSで配信しているページに、HTTPの画像やスクリプトが含まれている場合（混在コンテンツ）、このパネルで警告が表示されます。

Lighthouse（ライトハウス）

Lighthouseは、Webページの品質を総合的に評価するツールです。

評価項目

• パフォーマンス
• アクセシビリティ
• ベストプラクティス
• SEO
• PWA（Progressive Web App）

「レポートを生成」ボタンをクリックすると、自動的にページを分析し、スコアと改善提案を表示してくれます。

各項目は0から100のスコアで評価され、改善が必要な箇所については具体的なアドバイスが提示されます。

まとめ

本記事で紹介した機能は基本的なものですが、これらを使いこなすだけでも開発効率は大きく向上します。まずはElementsパネルでの要素確認とConsoleパネルでのエラー確認から始めてみましょう。

公式ドキュメントには、より詳細な使い方やTipsが掲載されているので、さらに深く学びたい方は参照してみてください。