[Mac]使われていないCSSを削除できるFirefoxアドオン「Dust-Me Selectors」の使い方

英語のツールですのでとっつきにくいですが、最短で操作手順のみを紹介します。

 

[操作手順]
→ブラウザ「Firefox」をインストールする。
https://www.mozilla.org/ja/firefox/new/

→Firefoxアドオン「Dust-Me Selectors」をインストールする。
以下サイトの「Add to Firefox」ボタンを押す。
https://addons.mozilla.org/ja/firefox/addon/dust-me-selectors/

→Firefoxを再起動する。

→テストしたいWebページをFirefoxで普通に表示する。
※Webページによっては下記の通りに進まないこともあるようです。

→ショートカット command+option+N を押す。
※ツール>Web開発>Dust-Me Selectors>Scan this page の順にアクセスしても同様です。
※右上ツールバーの「ピンクのほうき」アイコンをクリックしても同様です。

→「Dust-Me Data」窓が表示される。
Unused Selectors タブが不使用のCSSです。(注意:JavaScript、jQuery、PHP等で動的に使用されるCSSも不使用と判定される)
Used Selectors タブが使用中のCSSです。

→Cleanボタンを押す。
※Cleanボタンが複数ある場合は、CSSファイルを複数読み込んでいることを示しています。

→Commented-out を選択して、Saveボタンを押した場合。。
CSSファイルが保存できます。
undefinedの記述が行頭に挿入されて、不使用のCSSはコメントアウトされて残ります。

→Removed を選択して、Saveボタンを押した場合。。
CSSファイルが保存できます。
undefinedの記述が行頭に挿入されて、不使用のCSSは削除されて消えます。
※どちらにしてもundefinedの記述は残ります。

→保存したCSSを元にして手作業で確認する。
最終的には手作業、目視での確認となります。

以上で完了です。

 

[確認環境]
Mac OS X 10.9 Mavericks
Firefox 35.0.1
Dust-Me Selectors 4.1