CSSデバッグを少し手伝ってくれる小さなスクリプト・「debugCSS.js」

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等を普段から使用しているならあまり必要はないかもしれません。不要な方には不要でしょうが必要なケースも個人的には無くはないので備忘録として。

debugCSS.js