1

我是新来的网络开发人员，如果我问这么简单的问题，请原谅我。

当我使用 CSS 调试器 chrome 扩展时，它们可以在网站上工作，但不能在浏览器中的本地 HTML 文件上工作。任何人都可以解释为什么和/或提供有关如何使其工作的解决方案吗？

4

2 回答 2

2

好吧，让我教你一个技巧，如果你想要的话，你不需要扩展来“看到”元素。

您可以将其粘贴到开发人员模式的控制台中。它将创建一个鼠标事件，该事件将捕获您鼠标悬停的标签，然后用随机颜色勾勒它：

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) + ')';
})

这个更有趣，因为它留下了边缘的痕迹：

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="";
    })
});

最好的技巧是创建一个虚假的收藏夹，然后javascript:在代码之前对其进行编辑。

于 2021-08-16T05:21:03.503 回答
0

您使用的是哪个调试器？如果您正在调试元素的布局，您只需在网页的 css 中添加以下行以显示轮廓，如下所示：

* {
  outline: 1px solid red;
}

例如：

* {
  outline: 1px solid red;
}

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

于 2021-08-16T04:56:15.467 回答