パワフルで楽しい: Chrome DevTools の概要

Dale St. Marthe

Chrome DevTools には、ウェブ アプリケーションの詳細な検査と改善に役立つ多くの強力なツールが用意されています。

次の動画では、[Inspect] ボタンと [Device Mode] のほか、[Elements]、[Console]、[Sources]、[Network] パネルを含む 6 つの基本的なツールの概要を説明します。さらに、[Styles] タブと DevTools のカスタマイズ方法について説明します。

この動画で以下の方法をご確認ください。

• DOM 要素の調査と編集
• Box Model を使用して要素の寸法を可視化し、変更する。
• ページがモバイル デバイスでどのように表示されるかを確認します。
• [Console] パネルで JavaScript エラーを特定します。
• [Sources] パネルでブレークポイントを使用して JavaScript をデバッグします。
• [ネットワーク] パネルでネットワーク アクティビティを分析してフィルタリングします。
• 低速な接続速度をシミュレートする。
• DevTools をカスタマイズする。

詳細については、DevTools の概要をご覧ください。