CSS Dig Chrome Extensionを使用してWebサイトのコードを分析する

できることはたくさんあります Chrome DevTools ライブWebサイトの編集から詳細なHTTPリクエストの調査まで。しかし CSSパターンを分析する機能 コンソールに焼き付けられていない.

あり CSS Dig, あなたはすべてを分析することができます CSSセレクター, 特異性, そして ユニークな特性 Chromeから直接任意のWebページの。この拡張機能は完全に無料で、フロントエンドの開発者に大きな力を提供します。.

スタイルシートを調べると、CSS Digパネルからたくさんのデータが得られます。それはあなたを見ることができます 個々のセレクタ, 含む 重複 そして 不必要な特定性レベル.

はじめに、 プラグインをインストールする そしてコンソールウィンドウを開きます。あなたは見つけるでしょう 2つのタブ CSS Digウィンドウで： プロパティ そして セレクター.

結果を閲覧することができます プロパティ別に整理 （色、枠、余白）、または セレクターによる （クラス、ID）使用しているフォントと色を調べることができるので、[プロパティ]ウィンドウが最も価値があると思います.

このツールはどのWebサイトでも全面的に機能するため、次の用途にも便利です。 リバースエンジニアリング 誰のデザインこのウィンドウから直接CSSをコピー/貼り付けして、自分のプロジェクトで再利用することができます。.

おそらくCSS Digの最も一般的なユースケースは、 重複した色をクリア あなたのカラーパレットから。あなたは本当にいくつのグリーンのユニークな色合いが必要ですか？または、1ページに必要なサンセリフフォントの数?

CSS Digは非常に単純なので、DevToolsのような多数の機能を期待しないでください。代わりに、このプラグインはかなり フロントエンド開発者向け 繰り返しセレクタまたは重複したプロパティの監査サイト.

の ソースコード プラグインはGitHubから無料で入手できます。 最新のアップデート.