デベロッパーツール練習用ページ
デベロッパーツールの起動方法
Macの場合、Command + Option + I
Windowsの場合、 F12もしくはCtrl + Shift + I
要素の検査と編集
Elements パネル
Elements パネルは、HTML構造とCSSスタイルを確認・編集するために最もよく使用される機能です。
要素の選択
左上の矢印アイコンをクリックし、ページ上の要素を直接クリックして選択できます。
HTML編集
選択した要素を右クリックし、「Edit as HTML」を選択すると、HTMLを直接編集できます。
CSSスタイルの確認・編集
右側のStylesパネルで、適用されているCSSを確認し、プロパティの追加・変更・無効化ができます。
JavaScriptのデバッグ
Console パネル
Console パネルは、JavaScriptのエラーを確認し、コードを実行するために使用します。
エラーの確認
赤字で表示されるエラーメッセージを確認し、どの行でエラーが発生しているかを特定できます。
コードの実行
コンソールに直接JavaScriptコードを入力して実行できます。
Sources パネル
Sources パネルは、JavaScriptのデバッグに使用します。
ブレークポイントの設定
コード行の左側をクリックしてブレークポイントを設定し、コードの実行を一時停止できます。
変数の監視
Watch式を追加して、特定の変数の値も監視できます。
デバッグ機能
ブレークポイントで一時停止した状態で「step over」を使用すると、処理を一行ぶん進めることができます。
デバッグの終了
「Resume script execution」と押下すると、一時停止モードを解除できます。
また、ブレークポイントを再度クリックすることで、ブレークポイントの解除ができます。
ネットワーク通信の確認
Network パネル
Network パネルは、ページの読み込み時に発生するすべてのネットワークリクエストを確認できます。
各リクエストの詳細（ステータス、サイズ、時間など）を確認できます。また、どのリソースの読み込みに時間がかかっているかを特定できます。
モバイルデバイスのエミュレート
Device Toolbar
Device Toolbarを使用して、異なるモバイルデバイスでのページの表示をエミュレートできます。
- デバイスの選択: 様々なモバイルデバイスの画面サイズやピクセル密度をエミュレートできます。
- レスポンシブデザインのテスト: 画面サイズを自由に変更して、レスポンシブデザインをテストできます。
よくある対処例
- CSSが適用されない場合:
- Elements パネルで要素を選択し、Styles パネルで適用されているCSSを確認します。
- CSSセレクタの優先順位や特異性を確認します。
- JavaScriptエラーの特定:
- Console パネルでエラーメッセージを確認し、エラーの発生箇所を特定します。
- ネットワークの遅延:
- Network パネルで、どのリソースの読み込みに時間がかかっているかを確認します。
- モバイル表示の確認:
- Device Toolbarを使用して、異なるモバイルデバイスでの表示を確認します。