今まで知らなかったのでメモ。
エレメンツパネル
- 要素をドラッグ＆ドロップで移動できる
- Deleteで消すことも可能
- 要素を選択して右クリック→「Edit as HTML」HTMLまるごと編集できる
- 数値は矢印キーの上下で変更できる
- 要素を選択し、右側のスタイルの右上の「＋」ボタンをクリックすると、そもそもスタイルが設定されていない要素のスタイルを追加できる
- 右側のスタイルの「＋」の右のアイコンをクリックすると、:activeや:hoverなどのスタイルも見ることができる
特に3つ目は、今までダブルクリックでちまちま一部分ずつ編集していたので目からウロコでした。
ネットワークパネル
どのファイルがどの時点で読み込まれたかがわかる。青い線が要素のツリーが完成した時点、赤い線がすべての読み込み完了の時点。
- 各項目をクリックすることでソートが可能
- 右上の赤丸アイコンは有効・無効切り替え
- その隣の停止マークのようなものは一覧のクリア
- その隣の漏斗マークはフィルターで、画像のみ、スクリプトのみといった表示ができる
- その隣は詳細表示切替え
ネットワークパネル
CSSやスクリプトファイルを編集できる。
- 変更したら「Ctrl」＋「S」で履歴を保存できる
- 左のリストから該当ファイルを右クリック→Local modifications…で履歴が見れ、その時点に戻すことも可能。一番上の「revert」ですべての変更をクリア
- 編集はリロードすると元に戻ってしまう
- 編集したファイルをダウンロードするには、左のリストから該当ファイルを右クリック→Save
- スクリプトは行番号をクリックすることでブレークポイントを設定できる
- スクリプトの記述上にマウスオーバーすると値を確認できる
その他
- コンソールの中にあるエミューションタブで、スマホやタブレットでの表示を確認することができる
- Auditsパネルでは、そのページの改善アドバイスをしてくれる
参考：Chrome Developer Tools入門（ドットインストール）
0 件のコメント:
コメントを投稿