0

ページ読込直後の数秒だけレイアイトが崩れるサイトがあります
・Chromeデバロッパーツールのネットワークタブで内容を確認してみたのですが、原因が良くわかりませんでした

やりたいこと
・レイアイトが崩れた状態でレンダリングをストップさせ、そのレイアイトが崩れた状態のまま、Chromeデバロッパーツールで原因を確認していきたい

Q.
・レンダリングの途中で処理をストップさせるにはどうすれば良いでしょうか?
・レイアイトが崩れた状態のまま停止させたいのですが…
・ボタンクリックしたらそこでレンダリングを停止するデバッグ用の拡張機能みたいなのはないでしょうか?

1 件の回答 1

2

レイアウトが崩れる理由はおそらくレンダリング後にJavascriptでレンダリングしているからかもしくは外部リソースの読み込み(画像等)に時間がかかっているからではないでしょうか?

JavascriptでBreakpointを設定してレンダリングを停止して崩れているか確認できます。

  1. Chromeデバロッパーツール(F12)を開く
  2. SouceタブでJavascriptソースの行番号をクリック。(※最初に呼ばれるJavascriptのファイルの最初のステップがいいと思います。)
  3. ページ再読込(F5)
  4. Javascriptのステップインで追っかける

外部リソースの読み込みで時間がかかっている場合は、外部リソースの読み込みを停止することはできませんが、ネットワークの読み込みスピードを制限してどのファイルの読み込みのタイミングでずれているか目視で確認ができると思います

  1. Chromeデバロッパーツール(F12)を開く
  2. Networkタブ内のNo throttlingプルダウンから選ぶ(※offline以外で)
  3. ページをスーパーリロード(Ctrl+F5)
  4. 外部リソースの読込状況を見つつどのファイルを読み込んでいるときに崩れているのか確認する。
1
  • 外部リソース読込した上でさらにJavascriptで色々操作していました。回答を読んで、Networkタブ内のNo throttlingプルダウンを初めて知ったのですが、遅い速度を選択するだけで目視確認できるようになったので便利だなと思いました。レイアウト崩れの原因解明に役立ちました!
    – re9
    Commented 2017年6月10日 1:37

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。