レスポンシブの確認を見た目だけでなく、CSSに基づいた検証もできるChromeの機能拡張 -Responsive Inspector
Post on:2013年5月13日
sponsors
レスポンシブの確認ツールの多くは単にブラウザのサイズを変更して確認するだけですが、レスポンシブがスタイルシートで定義されているかに基づいてページの確認ができるChromeの機能拡張を紹介します。
インストールは上記ページへChromeでアクセスし、「Chromeに追加」ボタンをクリックするだけです。では、使い方を。
当サイトはレスポンシブ未対応なので、CSS-Tricksのサイトで使ってみます。
Responsive Inspectorの起動はツールバーにある赤いアイコンをクリックします。
Responsive Inspectorを起動
パネルが表示され、ページのスタイルシートで定義されているブレイクポイントが一覧できます。
Responsive Inspector
各ブレイクポイントの右端のコードのアイコンをクリックするとスタイルシートが表示され、該当の記述がハイライト表示されます。
クリックしたブレイクポイントがハイライト
よくある表示サイズの変更ももちろんできます。
カラフルな各バーをクリックすると、そのサイズにブラウザが変更されます。
幅400pxにサイズ変更して表示
sponsors
