1

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?

Brijesh Kalkani
  • 789
  • 10
  • 27
zeroproof
  • 11
  • 1

2 Answers2

2

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.

Zano
  • 135
  • 9
  • Thank you very much this was helpful and shows me the capability of javascript when debugging elements. There was another solution below that I believe fits my current need more but I will save this code for the future. Highly appreciative! – zeroproof Aug 16 '21 at 15:04
0

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>
Dhana D.
  • 1,670
  • 3
  • 9
  • 33
Hassan Raza
  • 56
  • 6