レスポンシブの確認が簡単になる!複数のスクリーンサイズで同時にできるChromeの機能拡張 -ResponsiveViewer

レスポンシブの確認をしたい時、最近ではスマホやタブレットなどのスクリーンサイズもいろいろなものがリリースされたので、大変になってきました。複数のスクリーンサイズを同時に確認できたらいいのにと思っていた人に朗報です。

先日リリースされたばかりのResponsiveViewerを紹介します。
ResponsiveViewerはChromeの機能拡張で、無料で利用できます。

サイトのキャプチャ

ResponsiveViewer -GitHub

ResponsiveViewerのインストール

ResponsiveViewerのインストールは簡単です。
他の機能拡張と同様にChromeウェブストアにアクセスし、「Chromeに追加」ボタンをクリックするだけです。

サイトのキャプチャ

ResponsiveViewer -Chromeウェブストア

ユーザー数は昨日の時点は21人でしたが、本日の時点で1,000人を超えています。

ResponsiveViewerの使い方

使い方も簡単です。
レスポンシブの確認をしたいページをChromeで開き、ツールバーからResponsiveViewerのアイコンをクリックします。

サイトのキャプチャ

確認をしたいページを開き、ツールバーからアイコンをクリック

別タブが開き、ResponsiveViewerにそのページが表示されます。

サイトのキャプチャ

ResponsiveViewerを起動

左サイドバーで、スクリーンサイズ・ビューモード・方向を設定できます。

サイトのキャプチャ

サイドバーでスクリーンを設定

水平方向のランドエスケープでの確認もできます。

サイトのキャプチャ

デバイスを水平にした時のスクリーン

たくさんのサイズを同時に確認したい時は、サイドバー下部で表示比率を変更すると便利です。

サイトのキャプチャ

たくさんのサイズを同時に確認

個人的な要望としては、スクリーンサイズを自分でも設定可能、ローカルファイルの確認も可能、できるようになったら最強の機能拡張だと思います。
追記: どちらも出来るそうです!
スクリーンサイズの追加は、右上の「+」アイコンから。
ローカルファイルは、ツールバーのResponsiveViewerのアイコンを右クリックして「拡張機能を管理」を選択し、「ファイルのURLへのアクセスを許可する」をオンに。

sponsors

top of page

©2019 coliss