2018年12月14日(金)

Webサイト制作におけるワークフローを邪魔しない超シンプルなCSSデバッグ・「DebuCSSer」

• 0
• 14
• 2
• 18

DebuCSSer

See the Pen DebuCSSer by Lucagez (@lucagez) on CodePen.

DebuCSSerは超シンプルなCSSデバッグツールです。Webサイト制作時のワークフローを邪魔しない、という点を重視しているようで手軽にアウトラインや要素のID、class、高さや幅を確認できるようになっています(※ ¯\_(ツ)_/¯が表示されるのは空という意のようです)。Devtools等でいいんじゃ、という気もしますがこれはこれで良いのかもしれない。簡単なJSで出来ており、Ctrl押しながらマウスホバーするだけで確認でき、Ctrl+shiftで全要素のアウトライン表示も出来るのでとにかく手軽さが良い点という印象です。カスタマイズすれば日本語で使えますし、IDやclass以外も確認できるようにする事も出来そうです。ライセンスはMITとのこと。

DebuCSSer

• Post by かちびと.net
• PR:WPデザインギャラリー
• 作業効率が上がったと実感したので毎日使うようになったブラウザショートカットキー
• Sublime Text 2のショートカットキーで便利なやつ何個か（Windows版）
<...