Chrome DevTools は、Google Chrome ブラウザに直接組み込まれたウェブ デベロッパー ツールのセットです。DevTools を使用すると、ページをすばやく編集して問題をすばやく診断できるため、より優れたウェブサイトをより迅速に構築できます。
始める 最新情報をチェック
DevTools は、一般的なウェブ開発タスクの幅広い範囲をサポートしています。このページでは、DevTools の主な機能について説明します。何から始めればよいかわからない、または DevTools を初めて使用する場合は、DevTools の概要を視聴する。
コンソールの分析情報と AI アシスタンスにより、JavaScript のエラー、パフォーマンス、スタイルをより効率的にデバッグして修正できます。
ページのパフォーマンスを包括的に把握し、アクションにつなげることができます。
ページによって読み込まれたリソースを検査し、ブラウザから編集する方法を学びます。
ネットワーク リクエストとレスポンスをオンザフライで分析して上書きします。

AI アシスタントとコンソール分析情報

DevTools の AI イノベーションで、より多くの作業をより迅速に行う方法をご確認ください。
Gemini は、ウェブサイトのスタイル、ネットワーク、ソース、パフォーマンスを分析して改善するのに役立ちます。
Chrome DevTools の AI アシスタンスのユースケースを確認し、スタイル設定やパフォーマンスなど、さまざまなデバッグ ワークフローをサポートする方法を確認します。
DevTools のコンソール メッセージとエラーを理解し、コピー＆ペーストなしでエラーを修正する方法を学びます。

DevTools のヒント

DevTools を使用して一般的なウェブ開発の問題を解決する方法について説明する、毎月公開される動画シリーズをご覧ください。
DevTools でパフォーマンス トレースを記録し、分析してパフォーマンスの問題を特定して修正する方法を学びます。
LCP の問題をデバッグし、CrUX データを使用して、ユーザーに提供しているエクスペリエンスと類似したエクスペリエンスをデバッグしているかどうかを確認します。

キャッシュの仕組み

さまざまな種類のブラウザ キャッシュと、Chrome DevTools でキャッシュを検査して管理する方法について学びましょう。
要素を検査しようとしたら、要素が消えてしまったことはありませんか？コードがかくれんぼをしているようなものです。

パフォーマンス分析情報を取得する

パフォーマンス パネルや Lighthouse など、ランタイム パフォーマンスのさまざまな側面を測定して最適化するための幅広いツール。
[パフォーマンス] パネルのすべての機能（パフォーマンス トレースの記録方法、トレースの表示と分析方法など）について学びます。
パフォーマンス パネルは、15 年近くにわたり、デベロッパーがランタイム パフォーマンスを測定して最適化するのに役立ってきました。今後の進化について学びましょう。
トレースにアノテーションを付け、トレース ファイル内に直接保存して簡単に共有できます。

ニュースと最新情報

リソースを検査して編集する

[ソース] パネルのすべての機能（ファイルの表示と編集、JavaScript のデバッグ、ワークスペースの設定など）について学びます。
始める
ワークスペースを使用すると、DevTools 内で行った変更を、パソコンに保存されているソースコードに保存できます。独自のプロジェクトでワークスペースを設定する方法を学習します。
チュートリアルを読む

ネットワーク アクティビティを分析する

ネットワーク パネルのすべての機能（レスポンスとリクエストの本文の検査、ヘッダーの上書きなど）について学びます。
始める
ネットワーク パネル内の一般的なタスクを説明するハンズオン チュートリアルです。
チュートリアルを読む

その他のツール

DevTools のその他の機能については、こちらをご覧ください。
ページの DOM を表示および変更する方法を学習します。
ページの CSS を表示、変更する方法を説明します。
HTML、CSS、JavaScript の変更をトラッキングします。
メッセージを記録し、JavaScript を実行します。
ウェブサイトのパフォーマンスを評価します。
メモリリークなど、ページ パフォーマンスに影響するメモリの問題を見つけます。
ウェブアプリの検査、変更、デバッグ、キャッシュのテスト、ストレージの表示などを行います。
アニメーションを検査して変更します。
ユーザーフローの記録、再生、測定、ステップの編集を行います。
ウェブ コンテンツのレンダリングに影響する一連のオプションを紹介します。
保存した住所の検査とデバッグを行います。
ウェブサイトに関する問題を見つけて修正します。
ページが HTTPS で完全に保護されていることを確認します。
ブラウザタブごとに情報を表示し、メディア プレーヤーをデバッグします。
デバイス センサーをエミュレートします。
認証システムをエミュレートします。