Open1

開発者ツール使いこなせてますか？

むのう.devむのう.dev
  • Element
    • 省略
  • Console
    • 省略
  • Source
    • ブレークポイント
      • クリックして指定
      • 指定された行が実行されずに止まる
      • step over
        • 1行ずつ実行する
      • step out
        • 現在の関数を抜けるとこまで実行
      • 今のstep overとかの位置ちょっと違った。設定？
  • Network
    • スロットリング
    • request block
      • 特定のファイル、拡張子をブロックできる
    • Preserve log
      • 画面リロードしてもログが残る
      • 地味にありがたい
    • disable cache
    • 最初の青いラインがDOMContentLoaded, 赤いラインがLoadらしい
    • screen shot
      • 画面がレンダリングされるまでのそれぞれの段階をキャプチャできる
    • timing
      • リクエストの一連のフローのそれぞれにどのくらい時間がかかったか見れる
      • Queued / Stalled / Blocking:
        • CORSのプリフライトリクエストとか
      • DNS Lookup:
        • ドメイン名の解決にかかった時間。キャッシュされるていると短い
      • Initial Connection / Connecting
        • TCPハンドシェイクににかかった時間
        • SSL / TLS Negotiation
          • 上記のSSL版的な
        • Request Sent / Sending
          • リクエストにかかった時間
        • Waiting (TTFB: Time To First Byte)
          • 最初のバイトを受信するまでの時間。
        • Content Download]
          • Waitingからレスポンスが完了するまでの時間