Chrome用CSSPeeperを使用したすべてのサイトの詳細なCSSインスペクタ

通常のChrome DevToolsパネルは非常にパワフルです。必要に応じて、誰でも任意のページを詳しく調べて、サイトのレイアウト、CSS、さらにはHTTPヘッダーを調べることができます。.

あなたはDevTools CSSインスペクタで多くのことをすることができます。しかし、それは明確なGUIパネルを持っていません、そしてそれはすべての開発者が好きだろう一つのことです.

このGUIインスペクタをブラウザに追加する無料のChrome拡張機能CSSPeeperを調べてください。それはあなたがあらゆるページ上のあらゆる要素のCSSプロパティを調べることを可能にします.

インストールしたら Webページにアクセスして拡張機能のメインボタンをクリックする Chromeアドオンバーにあります。新しいインスペクタウィンドウがWebページの上部に表示され、各主要要素に関する詳細が表示されます。.

サイトを閲覧しながら、点線のアウトラインで見える要素をクリックすることができます。これにはボタン、ページセクション、ヘッダー、ナビゲーションアイテムを含めることができます。.

そこから、タイポグラフィ、色の選択、フォントスタイルの詳細をまとめたインスペクタ全体を見ることができます。それは素晴らしい方法です Webページから直接スタイルを取得する 自分でCSSコードを掘り下げることなく.

CSSPeeperはあなたをも可能にします 内蔵カラーピッカーで関連色を選ぶ そして配色の発電機。ページから画像をエクスポートしたり、独自の配色を作成したりできます。 これらをあなた自身のモックアップに適用してください PhotoshopまたはSketchで.

私は主に デザイナーにはこの拡張をお勧めします 開発者の代わりに、生のCSSを利用してコードを読みやすいデータの塊に変換する、はるかにデザイナー向けのプラグインです。.

しかし、このプラグインは開発者にも役立ちます！それは本当に あらゆる種類のCSS用の強力なサイト検査ツール.

CSSPeeperのホームページを見て、それができることについてもっと学んでください。メインページにはChromeストアへのリンクも含まれているので、拡張機能を無料でインストールして試運転のために取り出すことができます。.