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

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

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

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

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

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

DevTools の一般的なデバッグ シナリオを楽しく解説する月刊動画シリーズをご覧ください。
更新された [パフォーマンス] パネルのツアーで、Core Web Vitals（LCP、CLS、INP）の測定方法と Gemini からカスタマイズされたアドバイスを取得する方法を確認できます。
DevTools を使って、デバッグの海賊になろう！フォーカス スタイルをエミュレートする手法、自動入力でフォームをテストする手法、ネットワーク オーバーライドでバックエンド エラーを解決する手法について説明します。
Chrome DevTools の AI アシスタンスによるデバッグの威力を体験しましょう。Console Insights、スタイリング、パフォーマンス、ネットワーク、ソースの AI アシスタントがワークフローをどのように強化するかをご覧ください。
パフォーマンスのボトルネックの特定、ポップアップのデバッグ、ネットワーク条件の構成、ショートカットを使用したネットワーク リクエストのイニシエータの特定など、[ネットワーク] パネルの高度なテクニックについて説明します。

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

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

ニュースと最新情報

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

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

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

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

その他のツール

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