CSS未定義の変数チェッカー
CSS未定義変数チェッカーは、Google ChromeのDevtools拡張機能であり、未定義のCSS変数の使用を検出するのに役立ちます。カスタムプロパティ/変数を使用してCSSを書く場合、このツールは最適です。これはChrome Developer Toolsにタブを追加し、"var()"式内で使用される未定義のCSS変数をチェックすることができます。
この拡張機能は、スタイルシートとインラインスタイル属性の両方を分析し、開発者ツールの要素タブ内の問題のある要素へのリンクを含むユーザーフレンドリーなテーブルで結果を表示します。拡張機能を使用するには、単にGoogle Chromeでウェブサイトを開き、開発者ツールを開き、「CSS Undefined Variable Checker」タブに移動します。"未定義の変数をチェック"ボタンをクリックすると、分析が開始され、見つかった未定義のCSS変数がテーブルに表示されます。
結果テーブルには、未定義の変数の名前、見つかったスタイルシートまたはインラインスタイル、および使用されたページ上の要素が表示されます。テーブルのリンクをクリックすると、開発者ツールの要素タブで問題のある要素が強調表示され、未定義の変数を特定するのが容易になります。
この拡張機能は、スタイルシート情報にアクセスするためのAPIに依存しており、クロスオリジンリソース共有によって制約されています。必要なアクセスヘッダのない異なるオリジンのスタイルシートは分析されません。ただし、これは他のAPIアクセス可能なスタイルの分析能力には影響しません。
興味がある方には、この拡張機能の分析ロジックは、npmパッケージとしても利用可能です。
