開発者ツール

EffCSS スタイルシートと関連するマーカーは、専用のブラウザ拡張機能 EffCSS Developer Tools を使用して検査できます。

インストール

インストール方法はブラウザによって異なります。

• Mozilla Firefox は、独自の拡張機能ストアから 拡張機能 を使用できます。
• Chromium ベースのブラウザ (Google Chrome、Yandex Browser、Microsoft Edge など) は、zip アーカイブ から chrome://extensions を使用して拡張機能を手動でインストールできます。

インターフェース

この拡張機能を使用すると、EffCSSで作成されたスタイルシートを検査できます。ソート、アクティブ状態によるフィルタリング、CSSコンテンツの検索、そしてメーカーとスタイルシートの両方の具体的な設定の検査が可能です。

ワークスペースは、リストエリアとカードエリアの2つの部分で構成されています。

リストエリアでは、以下の操作が可能です。

1. 検査対象のフレームを選択します（EffCSSが適用されているフレームが複数ある場合）。
2. 現在のフレームのスタイルプロバイダーをブラウザコンソールに表示します。
3. 拡張機能を再読み込みします。
4. 現在のフレームのすべてのEffCSSスタイルシートを有効/無効にします。
5. CSSコンテンツまたはメーカーキーを検索します。
6. 並べ替えプロパティを選択します。
7. 並べ替え方向を選択します。
8. 有効/無効のスタイルシートをフィルタリングします。
9. すべてのスタイルシートを選択するか、選択をリセットします。
10. 選択したスタイルシートをブラウザコンソールに表示します。
11. 選択したスタイルシートからCSSを保存します。
12. 選択したスタイルシートのメーカーからJSを保存します。
13. 選択したスタイルシートを有効にします。
14. 選択したスタイルシートを無効にします。
15. スタイルシートを選択に追加または選択から削除します。
16. スタイルシートをブラウザコンソールに表示します。
17. スタイルシートカードを開きます。
18. スタイルシートの表示/非表示を切り替えます。

リストエリアでは、ルール数、プロパティ数など、複数の指標を用いてスタイルシートを比較することもできます。CSSコンテンツや関連するマーカーを表示するには、スタイルシートカードを開く必要があります。

カード領域では、以下の操作が可能です。

19. メーカータブを開く
20. スタイルシートタブを開く
21. カードを閉じる