ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CSSは非常にデバッグしづらい技術です。多少間違っていても動きますし、余分にあっても気づきづらいものです。Webサイトを更新するのに伴って、不要なCSSが蓄積されていたなんて話もよく聞きます。

そんなCSSのデバッグに使ってみたいツールがDebucsserです。クラスやIDを可視化してくれます。

Debucsserの使い方

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

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

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

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

デモ

lucagez/Debucsser: CSS debugging tool with an unpronounceable name

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2