レスポンシブWebデザイン表示一括確認Chromeエクステンション・「ResponsiveViewer」

Ads

ResponsiveViewer


ResponsiveViewerはレスポンシブWebデザインの表示をさまざまなサイズで一括確認出来るChrome拡張です

各デバイスはモニタサイズとUAが設定されており、任意のモニタサイズおよびUAを追加する事も可能です

同様のツールは数多に存在しますので若干今更感あるネタですが試しに使ってみたら割と便利だったのでご紹介。

Ads

主な機能

デフォルトで用意されているデバイスはiPhone XRやXS、8+や8、Pixel3、Galaxyなどに加えて1024や1280pxサイズのモニターです。任意のサイズ、任意のUAでデバイスを追加する事が可能で、各デバイスは並べ替えたり非表示にしたりが自由に設定可能です

全体の拡大/縮小や別URLを再読み込みする事も出来ます。勿論ローカル環境のWebサイトの表示テストも可能です。尚、開発者の方も仰ってましたがiOS Safari等だと表示が異なったりするので最終的に実機テスト等も必要になるのは今までと変わりません

尚、Githubでもソースコードが公開されていますがライセンス等の明記はありませんでした

ResponsiveViewerOn Github