Debucsser - CSS情報を可視化してデバッグをサポート // MOONGIFT Archived

CSSは非常にデバッグしづらい技術です。多少間違っていても動きますし、余分にあっても気づきづらいものです。Webサイトを更新するのに伴って、不要なCSSが蓄積されていたなんて話もよく聞きます。そんなCSSのデバッグに使ってみたいツールがDebucsserです。クラスやIDを可視化してくれます。

Debucsserの使い方

Ctrlキーを押すと、マウスが当たっているDOMのクラス名、ID名が分かります。

Ctrl+Shiftで常に表示モードに変わります。

CSSを構造的に管理する上で、クラス名やID名は欠かせないものでしょう。Debucsserを使えばDOMごとに枠が表示されるので、どの部分が関わっているのかが分かりやすくなります。開発者ツールとはまた異なる使い勝手でしょう。

DebucsserはJavaScript製のオープンソース・ソフトウェア（MIT License）です。