質問: **ページ読込直後の数秒だけレイアイトが崩れるサイトがあります** ・Chromeデバロッパーツールのネットワークタブで内容を確認してみたのですが、原因が良くわかりませんでした **やりたいこと** ・レイアイトが崩れた状態でレンダリングをストップさせ、そのレイアイトが崩れた状態のまま、Chromeデバロッパーツールで原因を確認していきたい **Q.** ・レンダリングの途中で処理をストップさせるにはどうすれば良いでしょうか? ・レイアイトが崩れた状態のまま停止させたいのですが... ・ボタンクリックしたらそこでレンダリングを停止するデバッグ用の拡張機能みたいなのはないでしょうか?
回答: レイアウトが崩れる理由はおそらくレンダリング後に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. 外部リソースの読込状況を見つつどのファイルを読み込んでいるときに崩れているのか確認する。