DEV Community

Cover image for Basic CSS debugging tip
Karen Payne
Karen Payne

Posted on • Updated on

Basic CSS debugging tip

When creating a web page and there is are issues with the layout it can in many cases difficult to figure out.

Add the following to your project debugger.css

* {
    outline: 1px solid red;

    *:hover {
        outline: 2px solid blue;
Enter fullscreen mode Exit fullscreen mode

Add a link to the page needing attention e.g.

<link rel="stylesheet" href="css/debugger.css" />
Enter fullscreen mode Exit fullscreen mode

Render the page and we get something like this.

web page

For ASP.NET we can conditionally add the style sheet in _Layout.cshtml

<environment names="development">
    <link rel="stylesheet" href="css/debugger.css"/>
Enter fullscreen mode Exit fullscreen mode

Even better

Rather than adding/removing debugger.css manually this can be done with JavaScript.

Add the following JavaScript file, in this case under lib/css

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

     * Add/remove debugger.css to the current page

    var href = "lib/debugger.css";
    var addCss = function () {
        if (isCssLoaded(href) === true) {
        var head = document.head;
        var link = document.createElement("link");

        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = href;


    var removeCss = function () {

        if (isCssLoaded('debugger.css')) {


    var toggle = function() {
        if (isCssLoaded(href) === true) {
        } else {

    var isCssLoaded = function () {

        for (var index = 0, count = document.styleSheets.length; index < count; index++) {
            var sheet = document.styleSheets[index];

            if (!sheet.href) {

            if (sheet.href.includes(href)) {
                return true;


        return false;

    return {
        addCss: addCss,
        removeCss: removeCss,
        isCSSLinkLoaded: isCssLoaded,
        toggle: toggle
Enter fullscreen mode Exit fullscreen mode

In a HTML file reference the file above.

<script src="lib/debugHelper.js"></script>
Enter fullscreen mode Exit fullscreen mode

In the same file add a script section with the following code. Show the page, press ALT + 1 to add/remove the stylesheet file.


     * Karen code
     * ALT+1 toggles adding/removing debugger.css
    document.addEventListener('keydown', function (event) {

        if (event.key === '1' && event.altKey) {


Enter fullscreen mode Exit fullscreen mode

Source code

See the following GitHub Gist.

presenting page with css debugging

See also

Debugging CSS

Top comments (0)