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 によって生産性が大幅に向上することがわかるかもしれません。