Chrome DevTools は、Google Chrome ブラウザに直接組み込まれたウェブ デベロッパー ツールのセットです。 DevTools を使用すると、その場でページを編集し、問題をすばやく診断できます。これにより、最終的には、より優れたウェブサイトをより迅速に構築できます。
この動画では、CSS のデバッグ、CSS のプロトタイピング、JavaScript のデバッグ、読み込みパフォーマンスの分析など、主要な DevTools ワークフローのライブデモをご覧ください。
DevTools を開く
DevTools UI のさまざまな部分にすばやくアクセスしたいユーザーは異なるため、DevTools を開く方法は多数あります。
- DOM または CSS を操作するには、ページ上の要素を右クリックして [検証] を選択し、[要素] パネルを表示します。または、command+option+C キー(Mac)または Ctrl+Shift+C キー(Windows、Linux、ChromeOS)を押します。
- ログに記録されたメッセージを表示したり、JavaScript を実行したりするには、Command+Option+J キー(Mac)または Ctrl+Shift+J キー(Windows、Linux、ChromeOS)キーを押して、[Console] パネルに直接移動します。
詳細とワークフローについては、Chrome DevTools を開くをご覧ください。
始める
経験豊富なウェブ デベロッパーの方は、DevTools を使用して生産性を向上させる方法を学習するためにおすすめの出発点として、以下をご確認ください。
- DOM の表示と変更
- CSS の表示と変更
- JavaScript をデバッグする
- コンソールでメッセージを表示して JavaScript を実行する
- ウェブサイトの速度を最適化する
- ネットワーク アクティビティを検査する
DevTools のご紹介
DevTools の UI は少しわかりにくいかもしれませんが、タブがたくさんあります。しかし、時間をかけて各タブに慣れて、何ができるかを理解すると、DevTools によって生産性が大幅に向上することがわかるかもしれません。
デバイスモード
モバイル デバイスをシミュレートします。
[要素] パネル
DOM と CSS を表示、変更する。
- DOM の表示と変更のスタートガイド
- CSS の表示と変更を始める
- CSS を編集する
- DOM の編集
- 無効、オーバーライド済み、無効などの CSS を見つける
- CSS の改善点を特定する
- ライトモード/ダークモード、コントラスト、その他の CSS メディア機能をエミュレートする
- 未使用の CSS を見つける
- アニメーションを検査する
コンソールパネル
コンソールからメッセージを表示し、JavaScript を実行します。
ソースパネル
JavaScript をデバッグし、ページの再読み込み後も DevTools で行った変更を保持します。また、JavaScript のスニペットを保存して実行し、DevTools で行った変更をローカルソースに保存します。
- JavaScript のデバッグを開始する
- ブレークポイントを使用してコードを一時停止する
- ワークスペースでファイルを編集、保存する
- JavaScript のスニペットを実行する
- JavaScript デバッグ リファレンス
- ウェブ コンテンツと HTTP レスポンス ヘッダーをローカルでオーバーライドする
ネットワーク パネル
ネットワーク アクティビティを表示してデバッグする。
レコーダー パネル
ユーザーフローを記録、再生、測定します。
パフォーマンス パネル
読み込みと実行時のパフォーマンスを改善する方法を見つける。
メモリパネル
ページ パフォーマンスに影響するメモリの問題(メモリリークなど)を見つけて修正します。
アプリケーション パネル
IndexedDB または Web SQL データベース、ローカル ストレージとセッション ストレージ、Cookie、アプリケーション キャッシュ、画像、フォント、スタイルシートなど、読み込まれたすべてのリソースを検査します。
セキュリティ パネル
混合コンテンツの問題、証明書の問題などをデバッグする。
コミュニティ
エンジニアリング チームのバグ トラッカーである Crbug でバグレポートと機能リクエストを提出します。
バグや機能リクエストをお知らせしたいが時間がない場合は、@ChromeDevTools にツイートを送信してください。アカウントからのお知らせには定期的に返信し、お知らせしています。
DevTools の使用についてサポートが必要な場合は、Stack Overflow が最適です。
DevTools のドキュメントでバグや機能リクエストを提出するには、GitHub の問題を開きます。
DevTools にも Slack チャンネルがありますが、チームはこれを一貫してモニタリングしていません。