Dale St. Marthe
Chrome DevTools には、ウェブ アプリケーションの詳細な検査と改善に役立つ多くの強力なツールが用意されています。
次の動画では、[Inspect] ボタンと [Device Mode] のほか、[Elements]、[Console]、[Sources]、[Network] パネルを含む 6 つの基本的なツールの概要を説明します。さらに、[Styles] タブと DevTools のカスタマイズ方法について説明します。
この動画で以下の方法をご確認ください。
- DOM 要素の調査と編集
- Box Model を使用して要素の寸法を可視化し、変更する。
- ページがモバイル デバイスでどのように表示されるかを確認します。
- [Console] パネルで JavaScript エラーを特定します。
- [Sources] パネルでブレークポイントを使用して JavaScript をデバッグします。
- [ネットワーク] パネルでネットワーク アクティビティを分析してフィルタリングします。
- 低速な接続速度をシミュレートする。
- DevTools をカスタマイズする。
詳細については、DevTools の概要をご覧ください。