Cannot use css debugger for offline html files

user_16675972 0
Viewed 60

I’m new here and to web development so forgive me if I’m asking such a simple question.

When I use a CSS debugger chrome extension, they work on websites but do not work on my local HTML file in the browser. Can anyone explain why and/or provide a solution as to how to get this working?

chrome-debugging css html debugging
2 Answers

Well, let me teach you a trick to you do not need an extension to "see" the elements if is that you want.

You can paste it in the console of the developer mode. It will create an mouse event that will capture the tag which you mouse over, then outline it with random color:

document.addEventListener("mouseover", function(e){
    e.fromElement.style.outline = "";
    e.toElement.style.outline = 
        '1px solid rgb(' +
        Math.floor(Math.random()*256) + ',' +
        Math.floor(Math.random()*256) + ',' +
        Math.floor(Math.random()*256) + ')';
})

This one is more interesting because it leaves a trail of edges:

javascript:document.addEventListener("mouseover", function(e){
    e.path.forEach(function(i){
        i.style.outline=
            '1px solid rgb(' +
            Math.floor(Math.random()*256) + ',' +
            Math.floor(Math.random()*256) + ',' +
            Math.floor(Math.random()*256) + ')';
    })
});
document.addEventListener("mouseout", function(e){
    e.path.forEach(function(i){
        i.style.outline="";
    })
});

A best trick is to create a false favorite, and then edit it adding javascript: before the code.

user_53659000

Which debugger are you using? if you are debugging layout for elements you can simply add the below line in css of a webpage to show outlines, like this:

* {
  outline: 1px solid red;
}

For example:

* {
  outline: 1px solid red;
}

div {
  width: 100vw;
  height: 100vh;
}
<div></div>

user_166238910
Related