[HTML & CSS General] Pesticide で CSS Layout をデバッグする

CSS の定義を追加することで、さまざまなデバイスでの Layout が確認しやすくなります。

Browser Extension と CSS 版があります。

Pesticide – Kill Your Css Layout Bugs

どちらも、下記の定義を追加して Layout の状況を分かりやすく表示してくれます。

pesticide/pesticide.css at master · mrmrs/pesticide

インストール

もろもろ Github を確認するとよさそう。

mrmrs/pesticide

Sass

サイトから圧縮ファイルをダウンロード。
Bower などにはパッケージはないよう。
zip を解凍すると、scss ファイルが見つかるので、適当なプロジェクトディレクトリに設置します。

% mv ~/Downloads/mrmrs-pesticide-e3dd6b9/sass/pesticide.scss global/_pesticide.scss

Sass に @import して利用します。

main.scss
/* Debug */
$pesticide-debug: true;
@import "global/pesticide";

less, stylus ファイルもありました。

CSS

CSS を直接読み込むこともできます。

<link rel="stylesheet" href="css/pesticide.css">

Browser Extension

つかいかた

true / false でコントロールできます。
ただ余計なコードが増えるので、コメントアウトで利用かな。

main.scss
/* Debug */
$pesticide-debug: false;
@import "global/pesticide";

2014-11-07_pesticide_01