Chrome DevTools (original) (raw)

DevTools

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

DevTools は、一般的なウェブ開発タスクの幅広い範囲をサポートしています。このページでは、DevTools の主な機能について説明します。何から始めればよいかわからない、または DevTools を初めて使用する場合は、DevTools の概要を視聴する。

AI アシスタントを利用する

コンソールの分析情報と AI アシスタンスにより、JavaScript のエラー、パフォーマンス、スタイルをより効率的にデバッグして修正できます。

パフォーマンスを把握する

ページのパフォーマンスを包括的に把握し、アクションにつなげることができます。

リソースを検査する

ページによって読み込まれたリソースを検査し、ブラウザから編集する方法を学びます。

ネットワークを分析する

ネットワーク リクエストとレスポンスをオンザフライで分析して上書きします。

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

DevTools の AI イノベーションで、より多くの作業をより迅速に行う方法をご確認ください。

使ってみる

Gemini は、ウェブサイトのスタイル、ネットワーク、ソース、パフォーマンスを分析して改善するのに役立ちます。

ヒントを得る

Chrome DevTools の AI アシスタンスのユースケースを確認し、スタイル設定やパフォーマンスなど、さまざまなデバッグ ワークフローをサポートする方法を確認します。

DevTools を使用して一般的なウェブ開発の問題を解決する方法について説明する、毎月公開される動画シリーズをご覧ください。

パフォーマンス トレースを記録して分析する

DevTools でパフォーマンス トレースを記録し、分析してパフォーマンスの問題を特定して修正する方法を学びます。

ウェブに関する主な指標をリアルタイムでモニタリングする

LCP の問題をデバッグし、CrUX データを使用して、ユーザーに提供しているエクスペリエンスと類似したエクスペリエンスをデバッグしているかどうかを確認します。

キャッシュの仕組み

さまざまな種類のブラウザ キャッシュと、Chrome DevTools でキャッシュを検査して管理する方法について学びましょう。

画面をフリーズして消える要素を検査する

要素を検査しようとしたら、要素が消えてしまったことはありませんか？コードがかくれんぼをしているようなものです。

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

パフォーマンス パネルや Lighthouse など、ランタイム パフォーマンスのさまざまな側面を測定して最適化するための幅広いツール。

パフォーマンス ツールの概要

[パフォーマンス] パネルのすべての機能（パフォーマンス トレースの記録方法、トレースの表示と分析方法など）について学びます。

ニュースと最新情報

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

機能リファレンス

[ソース] パネルのすべての機能（ファイルの表示と編集、JavaScript のデバッグ、ワークスペースの設定など）について学びます。

ワークスペースを設定する

ワークスペースを使用すると、DevTools 内で行った変更を、パソコンに保存されているソースコードに保存できます。独自のプロジェクトでワークスペースを設定する方法を学習します。

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

ネットワーク パネル

ネットワーク パネルのすべての機能（レスポンスとリクエストの本文の検査、ヘッダーの上書きなど）について学びます。

その他のツール

DevTools のその他の機能については、こちらをご覧ください。