适用于UI设计师的调试技巧

在业务开发过程中或，想必大家经常会需要查看一个元素的位置及大小并修改它的 CSS，因此就会频繁使用到 DevTools 中的选择元素功能。

在UI小姐姐做视觉还原时，会需要查看一个元素的位置及大小，因此就会频繁使用到 DevTools 中的选择元素功能。

其实我们可以使用一个 CSS 技巧给所有元素加上 outline，这样就能迅速了解自己所需的元素位置信息，无须再选择元素查看了。 

第一步

第二步

展示如下

我们只需要添加以下 CSS 就能为任何网站添加这样的效果

html * {
    outline: 1px solid red
}

需要注意的是这里我没有使用 border 的原因是 border 会增加元素的大小但是 outline 不会。

通过这个技巧不仅能帮助我们在开发中迅速了解元素所在的位置，还能帮助我们方便地查看任意网站的布局。