レスポンシブの確認が簡単になる！複数のスクリーンサイズで同時にできるChromeの機能拡張 -ResponsiveViewer
Post on:2019年11月22日
sponsors
レスポンシブの確認をしたい時、最近ではスマホやタブレットなどのスクリーンサイズもいろいろなものがリリースされたので、大変になってきました。複数のスクリーンサイズを同時に確認できたらいいのにと思っていた人に朗報です。
先日リリースされたばかりのResponsiveViewerを紹介します。
ResponsiveViewerはChromeの機能拡張で、無料で利用できます。
ResponsiveViewerのインストール
ResponsiveViewerのインストールは簡単です。
他の機能拡張と同様にChromeウェブストアにアクセスし、「Chromeに追加」ボタンをクリックするだけです。
ResponsiveViewer -Chromeウェブストア
ユーザー数は昨日の時点は21人でしたが、本日の時点で1,000人を超えています。
ResponsiveViewerの使い方
使い方も簡単です。
レスポンシブの確認をしたいページをChromeで開き、ツールバーからResponsiveViewerのアイコンをクリックします。
確認をしたいページを開き、ツールバーからアイコンをクリック
別タブが開き、ResponsiveViewerにそのページが表示されます。
ResponsiveViewerを起動
左サイドバーで、スクリーンサイズ・ビューモード・方向を設定できます。
サイドバーでスクリーンを設定
水平方向のランドエスケープでの確認もできます。
デバイスを水平にした時のスクリーン
たくさんのサイズを同時に確認したい時は、サイドバー下部で表示比率を変更すると便利です。
たくさんのサイズを同時に確認
個人的な要望としては、スクリーンサイズを自分でも設定可能、ローカルファイルの確認も可能、できるようになったら最強の機能拡張だと思います。
追記: どちらも出来るそうです！
スクリーンサイズの追加は、右上の「+」アイコンから。
ローカルファイルは、ツールバーのResponsiveViewerのアイコンを右クリックして「拡張機能を管理」を選択し、「ファイルのURLへのアクセスを許可する」をオンに。
sponsors
