Chrome DevTools は、Google Chrome ブラウザに直接組み込まれたウェブ デベロッパー ツールのセットです。DevTools を使用すると、ページをすばやく編集して問題をすばやく診断できるため、より優れたウェブサイトをより迅速に構築できます。
使ってみる リリースノート

AI を使用してデバッグする

DevTools の AI イノベーションで、より多くのことをより迅速に行える方法をご確認ください。エージェント用の DevTools を使用して、DevTools の機能を使い慣れたコーディング エージェントに接続します。
Gemini を活用して、ウェブサイトのスタイル設定、ネットワーク、ソース、パフォーマンスを分析し、改善しましょう。[コンソール] パネルと [ソース] パネルで、コンソール エラーの解決とコードの候補の取得をサポートします。
AI イノベーションの詳細
AI ワークフロー内で、ネットワーク アクティビティの検査、トレースの記録、ウェブ アプリケーションのトラブルシューティングに使用する信頼できるツールをコーディング エージェントに提供します。

Chrome DevTools MCP（Model Context Protocol）サーバーを、Antigravity、Claude Code、Cline、Copilot などの任意のツー��に接続します。

詳細
ページのパフォーマンスを包括的に把握し、アクションにつなげることができます。
ページによって読み込まれたリソースを検査し、ブラウザから編集する方法を学びます。
ネットワーク リクエストとレ��ポンスをオンザフライで分析して上書きします。

デベロッパー ツールのヒント

DevTools の一般的なデバッグ シナリオを楽しく解説する月刊動画シリーズをご覧ください。
エージェント向け Chrome DevTools を使用すると、レスポンシブ レイアウトの検証、位置情報認識 API のテスト、さまざまな CPU 速度やネットワーク速度のシミュレートを行うことができます。
エージェント向け Chrome DevTools の Lighthouse を使用すると、コーディング エージェントはアクセシビリティ、SEO、ベスト プラクティス、エージェント型ブラウジングのライブ健全性チェックを実行して、ウェブサイトの品質を評価できます。
更新された [パフォーマンス] パネルのツアーで、Core Web Vitals（LCP、CLS、INP）の測定方法と Gemini からカスタマイズされたアドバイスを取得する方法を確認できます。
DevTools を使って、デバッグの海賊になろう！フォーカス スタイルをエミュレートする手法、自動入力でフォームをテストする手法、ネットワーク オーバーライドでバックエンド エラーを解決する手法について説明します。

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

パフォーマンス パネルや Lighthouse など、ラン��イム パフォーマンスのさまざまな側面を測定して最適化するための幅広いツール。
[パフォーマンス] パネルのすべての機能（パフォーマンス トレースの記録方法、トレースの表示と分析方法など）について学びます。
CPU スロットリング キャリブレーションなどの新しい DevTools 機能について学び、パフォーマンスのデバッグに関する意思決定を実際のデータに基づいて行えるようにしましょう。
新しいパフォーマンス分析情報と Lighthouse の強力な機能については、DevTools の [パフォーマンス] パネルで直接ご確認ください。

ニュースと最新情報

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

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

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

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

その他のツール

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