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