LoginSignup
1
0

More than 3 years have passed since last update.

@lilpacy(pacy)

cssの開発効率を爆アゲ♂するsimple-debug.cssプラグイン

Last updated at Posted at 2019-07-20

こういうものがあります

before
Screen Shot 2019-07-20 at 14.55.03.png

after
Screen Shot 2019-07-20 at 13.57.01.png

そう、これが街談巷説道聴塗説、もとい巷で有名なsimple-debug.cssプラグインです

marginとかpaddingとかいちいちdeveloper-toolsを開いてカーソルを乗せて確認するの面倒ですよね

simple-debug.cssを導入するとそんな悩みも一網打尽、霧散霧消、五里霧中です

使い方

chromeのextentionストアからinstallできます
https://chrome.google.com/webstore/detail/simple-debugcss/jlkgkebpphmaiemciejnmgccejccnpha

追加すると右上にアイコンが表示されます

こいつを実行したいページでクリックするだけです

戻したいときにはもう一度クリックしてください

Screen Shot 2019-07-20 at 14.31.59.png

活用方法

simple-debug.cssを適用した状態でdeveloper-toolsを開き、cssを調整すると開発がとっても楽になります

Screen Shot 2019-07-20 at 14.26.22.png

他にもcss-debug系のプラグインはあるので探してみてくださいね、僕はこれがsimpleかつオシャンティで気に入っています

参考

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0