readme.md

The file debugHelper.js provides two functions, addCss and removeCss to append and remove two CSS rules from an ASP.NET Core page.

• Place debugHelper.js in the following folder wwwroot\lib\
• At top of a page <script src="~/lib/debugHelper.js"></script>
• At bottom of page

<script>

    document.addEventListener("DOMContentLoaded", () => {
        document.addEventListener('keydown', function (event) {
            if (event.key === '1' && event.altKey && event.ctrlKey) {
                if (!document.getElementById("debugger-inline-style")) {
                    $debugHelper.addCss();
                } else {
                    $debugHelper.removeCss();
                }
            }
        });
    });

</script>

• Press CTRL + ALT, 1 to toggle add/remove rules.

debugHelper.js

var $debugHelper = $debugHelper || {};
$debugHelper = function () {

    const debugStyleId = "debugger-inline-style";

    function addCss() {
        if (document.getElementById(debugStyleId)) return; // prevent duplicates

        const style = document.createElement("style");
        style.id = debugStyleId;
        style.textContent = `
        * {
            outline: 1px solid red !important;
        }
        *:hover {
            outline: 2px solid blue !important;
        }
    `;
        document.head.appendChild(style);
    }

    function removeCss() {
        const style = document.getElementById(debugStyleId);
        if (style) {
            style.remove();
        } else {
        }
    }

    /*
     * Exposed functions
     */
    return {
        addCss: addCss,
        removeCss: removeCss
    };
}();