レスポンシブの確認を見た目だけでなく、CSSに基づいた検証もできるChromeの機能拡張 -Responsive Inspector

レスポンシブの確認ツールの多くは単にブラウザのサイズを変更して確認するだけですが、レスポンシブがスタイルシートで定義されているかに基づいてページの確認ができるChromeの機能拡張を紹介します。

Responsive Inspectorのキャプチャ

Responsive Inspector

インストールは上記ページへChromeでアクセスし、「Chromeに追加」ボタンをクリックするだけです。では、使い方を。
当サイトはレスポンシブ未対応なので、CSS-Tricksのサイトで使ってみます。

サイトのキャプチャ

CSS-Tricks

Responsive Inspectorの起動はツールバーにある赤いアイコンをクリックします。

サイトのキャプチャ

Responsive Inspectorを起動

パネルが表示され、ページのスタイルシートで定義されているブレイクポイントが一覧できます。

Responsive Inspectorのキャプチャ

Responsive Inspector

各ブレイクポイントの右端のコードのアイコンをクリックするとスタイルシートが表示され、該当の記述がハイライト表示されます。

サイトのキャプチャ

クリックしたブレイクポイントがハイライト

よくある表示サイズの変更ももちろんできます。
カラフルな各バーをクリックすると、そのサイズにブラウザが変更されます。

サイトのキャプチャ

幅400pxにサイズ変更して表示

top of page

©2017 coliss