debugCSS.js
debugCSS.jsはCSSのデバッグ作業を少しだけ手伝ってくれる小さなスクリプトです。サイズは非圧縮でも1kb、圧縮版は600バイトほどです。
何をしてくれるかは上サンプルの通り、要素にアウトラインを引くだけです。色はランダムです。
オプションで指定した要素を対象外にする事が出来ます。まぁこれだけなんですが。
コード
var selector = document.querySelectorAll( "*" ); |
セレクタはデフォルトでは全部指定されています
else if ( typeof options.selector === "undefined" ) { var selector = document.querySelectorAll(`*:not(${options.not}) > *`); } |
オプション設定されたときは:notを付けて対象外にする
function randomColor() { var letters = '0123456789ABCDEF' .split( '' ); var color = "#" ; for ( var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } |
カラーコードをランダムで生成する
selector.forEach( function (el) { el.style.outline = `1px solid ${randomColor()}`; }); |
アウトラインを加える
< script src = "https://cdn.jsdelivr.net/gh/tunguskha/debugCSS@latest/src/debugcss.min.js" ></ script > |
CDNもあります。
debugCSS({}); |
除外する要素が無いなら初期化すればいいだけです
と、簡単なものなので動かない環境もあると思います。そもそもDevtools等を普段から使用しているならあまり必要はないかもしれません。不要な方には不要でしょうが必要なケースも個人的には無くはないので備忘録として。