Chrome DevTools は、Google Chrome ブラウザに直接組み込まれたウェブ デベロッパー ツールのセットです。DevTools を使用すると、ページをすばやく編集して問題をすばやく診���できるため、より優れたウェブサイトをより迅速に構築できます。
使ってみる
Chrome DevTools を開くすべての方法。
DevTools の最新の変更内容を確認します。
DevTools の機能を学ぶのに役立つ短い動画シリーズ。

コマンドとショートカット

タスクをすばやく完了できます。
コマンド メニューを開く、コマンドを実行する、ファイルを開く、その他のアクションを表示するなどの操作ができます。
ドキュメントを読む
キーボード ショートカットの包括的なリファレンス。
ドキュメントを読む
JavaScript が無効になっている場合のウェブページの外観と動作を確認します。
ドキュメントを読む
デバイスをシミュレートして、モバイルファースト ウェブサイトを構築します。
検索パネルを使用して、読み込まれたすべてのリソースからテキストを検索できます。

パネル

DevTools の各パネルの機能を確認しましょう。

要素 - DOM

ページの DOM を表示���よび変更する方法を学習します。
ドキュメントを読む

要素 - CSS

ページの CSS を表示、変更する方法を説明します。
ドキュメントを読む
メッセージを記録し、JavaScript を実行します。
ドキュメントを読む
ファイルの表示と編集、スニペットの作成、JavaScript のデバッグ、ワークスペースの設定を行います。
ドキュメントを読む
ネットワーク リクエストをログに記録します。
ドキュメントを読む
ウェブサイトのパフォーマンスを評価します。
ドキュメントを読む
メモリリークなど、ページ パフォーマンスに影響するメモリの問題を見つけます。
ドキュメントを読む
ウェブアプリの検査、変更、デバッグ、キャッシュのテスト、ストレージの表示などを行います。
ドキュメントを読む
ユーザーフローの記録、再生、測定、ステップの編集を行います。
ドキュメントを読む
ウェブ コンテンツのレンダリングに影響する一連のオプションを紹介します。
ドキュメントを読む
保存した住所の検査とデバッグを行います。
ウェブサイトに関する問題を見つけて修正します。
ページが HTTPS で完全に保護されていることを確認します。
JavaScript の ArrayBuffer、TypedArray、DataView、および C++ Wasm アプリの WebAssembly およびメモリを検査します。
ユーザー エージェント文字列をオーバーライドします。
ネットワーク リクエストをブロックしてサイトをテストします。
ブラウザタブごとに情報を表示し、メディア プレーヤーをデバッグします。
アニメーションを検査して変更します。
HTML、CSS、JavaScript の変更をトラッキングします。
未使用の JavaScript と CSS コードを見つけて分析します。
ソースマップが正常に読み込まれることを確認し、手動で読み込みます。
CSS で改善の余地がある要素を特定します。
Lighthouse パネルでウェブサイトの速度を最適化しましょう。
ウェブサイトのパフォーマンスに関する行動につながるインサイトを入手できます。
負荷とランタイムのパフォーマンスをモニタリングする。
他のパネルにアクセスしながら、ソースファイルを表示、編集できます。
デバイス センサーをエミュレートします。
WebAudio API の指標を表示します。
認証システムをエミュレートします。

設定リファレンス