Chromeはデベロッパーツールにそれほど大きくありません。これが、Firefoxがほとんどの開発者にとって頼りになるブラウザである理由の1つです。ただし、Chromeを使用している人のために、この点について支援するために利用できる多くの拡張機能があります。 レスポンシブインスペクター Chromeの拡張機能であり、MozillaがFirefox 15で導入したレスポンシブデザインビュー。レスポンシブインスペクターは、ツーインワンのツールです。 Webサイトが最適化されている画面サイズが表示され、ポップアップから別の画面にすばやく切り替えることができます。さらに、これらのサイズのいずれかに調整されたWebページのスクリーンショットを撮ることができます。特定の画面サイズ用に既に最適化されているWebサイトの場合、その原因となるCSSコードを表示できるため、レスポンシブデザイン開発者にとっても優れた学習ツールになります。
レスポンシブインスペクターが横に正方形のボタンを追加しますポップアップを開くURLバー。拡張機能には、現在読み込まれているWebサイトがバー経由で最適化されているすべての画面サイズが表示されます。画面サイズは各バーの最後に表示され、上部のピクセルスケールはさまざまな画面サイズを示します。スケールの上にマウスを移動すると、各キャリブレーションラインについて、ポップが表示され、それが表す画面サイズを示します。この同じポップアップには、サイズ変更ボタンとカメラボタンがあります。前者をクリックすると、ブラウザウィンドウがその幅に自動的にサイズ変更されます。必要に応じて、カメラボタンをクリックしてスクリーンショットを撮ることができます。スクリーンショットはローカルドライブに保存するか、Behance.netにアップロードできます。より細かいピクセルスケールの必要性を感じた場合は、ズームインボタンをクリックして拡大します。
表示オプションのコーディングに使用されるCSSを表示するには、Webサイトが最適化されている画面サイズを表すバーの1つにマウスを置くと、最後に{}ボタンが表示されます。それをクリックすると、新しいタブにCSSコードが表示されます。コードを直接編集することはできませんが、コードをコピーするか、検査ツールを使用して変更を加えることができます。 Responsive Inspectorは、FirefoxのResponsive Design Viewをかなりよく模倣しています。実際、エクステンションはツールの上のカットであると言っても間違いありません。 Firefoxが画面サイズのプリセットを提供するのに対して、Responsive Inspectorは全体的なスケールと多くの自由を提供し、そしてスクリーンショットツールがあります。プリセットは、レスポンシブインスペクターをさらに便利にするため、追加する必要があります。これらがなくても、拡張機能は非常にうまく機能します。
Chromeウェブストアからレスポンシブインスペクターをインストールする
コメント