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

忘是亡心i 2023-01-16 11:06 112阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70][]

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

### 第一步 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70 1][]

### 第二步 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70 2][]

展示如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70 3][]

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

html * {
        outline: 1px solid red
    }

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70]: /images/20221022/2c3aae4326ee4107a52abbd873f228da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70 1]: /images/20221022/e982a759ee44473e88e0f926c1c89f1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70 2]: /images/20221022/19c1d2f07c7343659620f7d99756c85d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70 3]: /images/20221022/febb3958e92543cf90187ae9a8c7011b.png