ともすた ウェブページを制作するとき、レスポンシブ・ウェブデザインの各ブレイクポイントが正しく表示されるかを確認するのはなかなか大変です。
そこで、開発者向けブラウザーの「Sizzy」を使うと便利です。
複数デバイスの解像度を並べて表示
Sizzyは、「The browser for developers（開発者のためのブラウザー）」と銘打っているだけあって、開発者向けの機能が満載の WebKitベースのブラウザーソフトです。
起動すると、複数のデバイス解像度で1つのウェブページを表示したときの状態を一気に確認することができます。
もちろんこのデバイスは増減可能で、カスタムしたものも準備できるため、国産の Android端末や今後登場するデバイスを登録することもできます。
スクロールをすれば、他のデバイスも同期してスクロールされるため確認も簡単。正しく表示されていない箇所を見つけたら、Photostudioで写真を撮影したり動画を撮影して残しておくことができるため、フロントエンドエンジニアに報告することも容易です。
さまざまな環境のシミュレーション
例えば JavaScriptが動作しない環境や、ネットワークが低速な環境、画像が表示されない環境などの場合にウェブページが正しく情報を伝えられているか等も簡単にシミュレーションできます。印刷用CSSの見た目の確認なども可能です。
CSSエディターによる書き換え
Sizzyにはちょっとした CSSエディターが搭載されています。画面下または右にあるデベロッパーツールを広げると、Google Chrome等と同様なデベロッパーツールを利用できますが、一番右に「CSS Overrides」というタブがあります。
このタブを起動すると、エディターが起動するのでここに CSSを書き込むと全ブラウザーで表示を確認することができます。
できあがった CSSはコピーして実際のファイルに貼り付ければ、実際のサイトに反映する事もできます。
セッションの切り替え
例えば、ログインしている状態としていない状態で表示に不具合がないかなどを確認するために、ブラウザーを切り替えたり、ログイン・ログアウトを繰り返すことがあります。
Sizzyには「セッションマネージャー」が搭載されていて、簡単に複数のセッションを作ることができます。これにより、ログイン・ログアウト状態の違いやユーザー権限の違いなどで複数のシミュレーションができます。
レンダリングエンジンのバグはシミュレーションできないので注意
一点注意したいのは、このソフトでしミューレートできるのはあくまでも画面幅についてのみで、ブラウザーの違い（レンダリングエンジンの違い）によるバグはシミュレートできません。特に、Android端末の場合はブラウザーの違いがあるため、最後はやはり実機の確認は必要になります。開発中の簡易的な確認と割り切りましょう。
料金とまとめ
Sizzyは月額 5$からのサブスクリプション。ただし、Setappという macOSアプリのパッケージに同梱されているため、他に使うソフトがあったらこちらの方がお得かも知れません。
Sizzyには開発者のかゆいところに手が届く機能が満載で、開発作業をスムーズに行うことができます。是非活用してみてください。