Google Chrome で CLSのズレを調べる方法

まずは、ネットワークの回線速度を遅くすることから始めます。

開発ツールを開いてもらって「ネットワーク」をクリック

画像の逆三角の部分をクリック

するとメニューが出てくるので「低速3G」を選択

これでネットワークが低速の状態を作れます。

次にCLSのズレを視覚的に見やすく方法を設定していきます。

右端のオプションをクリック

メニューが出てくるのでその他ツール

さらにメニューが出てくるので「レンダリング」をクリック

すると下の画面にレンダリング設定の画面が出てきます。

「レイアウト シフト領域」にチェックを入れてる状態でサイトを見ると、ズレが生じている部分が紫色で表示されるようになります。