概要

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 を使用して生産性を向上させる方法を学習するためにおすすめの出発点として、以下をご確認ください。

DevTools のご紹介

DevTools の UI は少しわかりにくいかもしれませんが、タブがたくさんあります。しかし、時間をかけて各タブに慣れて、何ができるかを理解すると、DevTools によって生産性が大幅に向上することがわかるかもしれません。

デバイスモード

ビューポートでデバイスモードをオンにしました。

モバイル デバイスをシミュレートします。

[要素] パネル

[要素] パネル。

DOM と CSS を表示、変更する。

コンソールパネル

コンソールパネル。

コンソールからメッセージを表示し、JavaScript を実行します。

ソースパネル

ソースパネル。

JavaScript をデバッグし、ページの再読み込み後も DevTools で行った変更を保持します。また、JavaScript のスニペットを保存して実行し、DevTools で行った変更をローカルソースに保存します。

ネットワーク パネル

[Network] パネル。

ネットワーク アクティビティを表示してデバッグする。

レコーダー パネル

レコーダー パネル。

ユーザーフローを記録、再生、測定します。

パフォーマンス パネル

パフォーマンス パネル。

読み込みと実行時のパフォーマンスを改善する方法を見つける。

メモリパネル

メモリパネル。

ページ パフォーマンスに影響するメモリの問題（メモリリークなど）を見つけて修正します。

アプリケーション パネル

[Service Worker] セクションが開いている [Application] パネル。

IndexedDB または Web SQL データベース、ローカル ストレージとセッション ストレージ、Cookie、アプリケーション キャッシュ、画像、フォント、スタイルシートなど、読み込まれたすべてのリソースを検査します。

セキュリティ パネル

セキュリティ パネル。

混合コンテンツの問題、証明書の問題などをデバッグする。

コミュニティ

エンジニアリング チームのバグ トラッカーである Crbug でバグレポートと機能リクエストを提出します。

バグ

バグや機能リクエストをお知らせしたいが時間がない場合は、@ChromeDevTools にツイートを送信してください。アカウントからのお知らせには定期的に返信し、お知らせしています。

Twitter

DevTools の使用についてサポートが必要な場合は、Stack Overflow が最適です。

スタック オーバーフロー

DevTools のドキュメントでバグや機能リクエストを提出するには、GitHub の問題を開きます。

ドキュメントに関する問題

DevTools にも Slack チャンネルがありますが、チームはこれを一貫してモニタリングしていません。

Slack