Google ChromeのDevToolを使うと、Webサイト開発における改善点が多数見えてきます。表示上のトラブルを感じている場合、タイムライン機能を使うのが良いでしょう。 サイトがどのようにレンダリングされているのか分かりますし、さらにそれをアニメーションGIFとして確認できるようにしてくれるのがsnaplineです。

snaplineの使い方

使い方のデモです。まずTimelineタブで記録をします。Screenshotsを忘れずにチェックしておきます。

そしてSave Timeline Dataを選択します。

保存したJSONをsnaplineに渡すと、アニメーションGIFが生成されます。

snaplineではサイトのがレンダリングされていく様子がより分かりやすくなります。思った通りに構築されているかどうか、一目で分かるでしょう。一つ一つの画像では分からない情報も、snaplineを使えばごく簡単です。

snaplineはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

pmdartus/snapline: Unleash your screenshots stored in Chrome Devtool timeline files