Chrome 开发者工具调试前端样式的小技巧

写前端页面时，样式调试是最常见的工作之一，Chrome 开发者工具的 Elements 面板里藏了很多实用的小技巧，分享几个我日常用得最多的，能大大提升样式调试效率。​
第一个是 实时修改样式，在 Elements 面板右侧的 Styles 栏里，找到要修改的 CSS 规则，直接点击属性值就能编辑，比如把 width: 200px 改成 300px，页面会实时更新效果，不用在代码里改了再刷新页面。如果想试新的样式，直接在 Styles 栏最下面输入新的 CSS 属性，比如 box-shadow: 0 2px 8px rgba(0,0,0,0.1)，马上就能看到阴影效果，合适了再复制到代码里。​
第二个是 定位样式来源，有时候页面上某个元素的样式不对，不知道是哪个 CSS 文件里的规则生效了。在 Elements 面板里点击这个元素，右侧 Styles 栏里的每个 CSS 规则前面都会显示文件名和行号，比如 index.css:25，点击这个链接，就能直接跳转到 Sources 面板里对应的 CSS 代码处，方便修改。之前我找一个按钮的样式，翻了三个 CSS 文件都没找到，后来用这个方法，两秒钟就定位到了。​
第三个是 禁用样式规则，如果想知道某个 CSS 规则是否影响了元素样式，不用删除代码，直接点击规则前面的勾选框，就能临时禁用这个规则，页面会实时变化。比如怀疑 margin-top: 10px 导致元素位置不对，取消勾选后，元素位置变了，就说明是这个规则的问题，不用反复注释代码再刷新。​
这些小技巧虽然基础，但刚学前端时没人教，自己摸索了好久才熟练。用好 Chrome 开发者工具，能少走很多样式调试的弯路～