FirefoxではFirefox15でもご紹介したように、レスポンシブデザインビューが実装され、「ctrl+shift+m」のショートカットでも簡単に利用できるようになりました。
しかしながら、Google chromeには同様の機能が無いため拡張機能を探してみました。
ResponsiView
responsiViewをインストールするとメニューバーに追加され、クリックするとパネルが表示されます。
機能
設定としてははじめから入っているTablet Potrait、Mobile Portrait、Mobile Landscapeと自身で数値を入れて高さと幅が調整出来るようになっています。
使用例：Tablet Potrait
ResponsiViewのインストールは以下から
https://chrome.google.com/webstore/detail/kcemonjjmilbiepahkhanlkddonpjlep
Responsive Tester
Responsive Testerをインストールするとメニューバーに追加され、クリックするとレスポンシブデザインの動作確認画面が別タブで開きます。
機能
①URLを入力するとそのページのレスポンシブデザインを確認できます。
②縦横の画面サイズを指定
③メイン画面
④スクロールバー
⑤手動でサイズを調整
Responsive Testerのインストールは以下から
https://chrome.google.com/webstore/detail/apjlfpjacfkcckoimkbfhliehbkbnblm
Responsive web design
responsive web designをインストールすると上記で紹介した拡張機能とことなり画面を右クリックするとresponsive-web-designの機能が追加されています。
これをクリックすると同じタブ内でツールが実行されます。
以下が実行した例になります。
機能
①キーボードパネルのON/OFF
他のツールとは異なりこのツールの一番の特徴です。onにするとiPad、iPhoneのキーボードが出現します。
②左からiPad横向き、縦向き、iPhone横向き、縦向き、マニュアルでレスポンシブデザインのチェックが可能です。
③ツールの解除ボタン
Responsive web designのインストールは以下から
https://chrome.google.com/webstore/detail/gkmaomcbenajgclicfopaempggmbghka?hl=ja
まとめ
ここで紹介したレスポンシブWebデザインの動作が確認出来るGoogle chrome拡張機能はそれぞれ一長一短ありますが、個人的はResponsive web designが使いやすいんじゃないかなと思います。
