写CSS写到怀疑人生的时候有一半的问题不是代码不会写而是代码写了不知道为什么不生效。这篇是这个系列的第三篇专门聊Chrome调试工具里最实用的一块——查看CSS属性。第一篇讲选择器和优先级第二篇讲盒模型和布局这篇把调试工具讲透尤其是Styles面板和Computed面板解决的就是同一个问题页面上那个元素到底被谁设成了这个样子为什么我写的属性没生效。Chrome的DevTools是我自己用得最多的调试工具没有之一。越往后写CSS越会发现真正值钱的能力不是背属性而是能在十分钟内定位这个样式到底从哪里来。这篇就按我平时排查问题的路径来写内容偏实操新手可以照着点老手也能补充几个平时没注意的细节。1. 为什么看样式这件事比写样式更重要先说一个几乎每个人都经历过的场景你写了一个width: 100px刷新页面元素纹丝不动。打开DevTools一看Styles面板里你写的那条width: 100px上面画了一道删除线旁边灰色小字写着另一条规则宽度是200px。那一刻你会明白CSS的写只是过程查才是结果。1.1 代码里明明写了页面上却没生效第一个逼你打开调试器的场景我记得刚接触CSS那会儿最崩溃的事情就是代码看着是对的页面是错的。后来发现几乎所有这类问题都能归到几个原因选择器优先级不够、样式被后面的规则覆盖、继承属性没算明白、或者压根就是元素没选中。这些问题的排查方式用眼睛盯代码没有用必须看调试工具里的实际生效值。DevTools的Styles面板会把你写的每条规则和浏览器最终采用的结果并排展示哪个被覆盖、哪个生效、为什么生效一眼就能看明白。可以说调试工具里的样式视图就是CSS世界的审讯室——每一条规则都要交代清楚自己从哪里来、有没有被顶掉、最终提供了什么值。1.2 调试工具里的样式视图和源码文件的关系先说清楚有一个常见的误解觉得DevTools里显示的CSS就是源码文件里的CSS改了就能保存。其实不是。调试工具读取的是浏览器解析后的CSSOM你可以理解为浏览器内存里的样式表副本你在面板里做的任何修改都是直接作用在当前页面上的临时补丁刷新页面就会恢复原样。这个特性既是坑也是优点改错了不用怕刷新就重置可以放心大胆地试。另一方面Styles面板里每条规则都会标注来源文件路径和行号比如style.css:12点击可以直接跳到Sources面板看到对应的源码位置。这个功能在排查覆盖问题的时候特别有分量因为它告诉你这条规则不是凭空来的它在文件里真实存在。2. 打开DevTools的几种姿势以及第一眼该看哪几个区域Chrome调试工具的入口有几个挑一个顺手的就行。但是打开之后往哪里看很多新手容易走偏。这里把我的习惯说一下。2.1 打开面板最快的方式三种方式任选其一在页面上右键 → 选择检查Inspect直接定位到你右键的那个元素按F12或CtrlShiftI打开DevTools再从左上角点一下元素选择器鼠标箭头图标再去页面上点目标元素按CtrlShiftC直接进入元素选择模式我个人最喜欢的是第三种CtrlShiftC然后鼠标直接在页面上移动DevTools的Elements面板会自动高亮当前鼠标悬停的元素同时Styles面板会实时显示它的全部样式。找到目标之后点一下就锁定了。2.2 Elements面板里真正的主角是右侧的Styles很多人打开DevTools习惯先看Elements面板左边的DOM树觉得那就是HTML结构看看就好。其实左边的DOM树只是个导航工具真正的宝藏是右侧的Styles面板。当你选中左侧某个元素时右侧会同步显示元素的内联样式如果有style属性所有匹配到的CSS规则按优先级从上到下排列每个属性是否被覆盖、覆盖源是谁元素实际的盒模型尺寸这个区域就是系列文章里反复提到的查看CSS属性的主战场。后面的篇幅基本都围绕它展开。注意左侧DOM树和下方有一行面包屑导航比如body div.container .item点任意一段可以直接跳转到对应父级元素比手动在DOM树里翻来翻去快很多。2.3 别忽略Styles面板顶部的过滤器搜索框Styles面板上方有一个输入框很多人没注意。它可以按属性名、属性值、甚至选择器名称过滤样式声明。举个实际例子你怀疑某个元素受了display类属性的影响直接在过滤框输入display面板里就只显示所有声明过display的规则。这个功能在排查冗长规则时效率极高尤其是当多个class叠在一起、样式声明多到几十行的时候靠眼睛找纯属折磨。3. Styles面板每一条CSS规则都必须交代来源这一节是整个查看CSS属性的核心。Styles面板并不是把CSS平铺给你看它的排列方式本身就是优先级逻辑的直观体现。3.1 从上到下的优先级排序规则在Styles面板里和你当前选中的元素相关的所有规则会按照最终生效权重从高到低排列。大致顺序是排列位置规则类型说明最上方内联样式style属性直接写在元素上的权重最高中间ID选择器对应的规则权重次之往下class、属性、伪类选择器日常写样式的主力底部元素标签选择器权重最低类似保底层还有一类特殊的存在叫user agent stylesheet这是浏览器自带的默认样式比如body默认有margin: 8px就是它提供的。很多人初次看到以为页面有bug其实这是浏览器的出厂设置。这里有个经验当你看到一条规则被覆盖画了删除线通常是因为下面有一条更值钱的规则提供了同一个属性或者后面同权重的规则覆盖了它。测试方法很简单把上面那条规则的删除线临时代替——具体怎么代替下一节说。3.2 属性被划掉了是什么意思怎么顺着来源查被划掉的属性旁边会有一个灰色的小字提示例如width: 100px; /* 被划掉 */点开这个小字会展开一条说明告诉你这个属性被哪一条规则里的哪个声明代替了。比如按钮的宽度你在.btn里写了width: 100px但有个.btn-primary在后面的样式表里写了width: 200pxDevTools就会在.btn的规则下面给出提示这里的width被type.css:42的规则覆盖。真正值钱的操作是点击提示信息里的源文件行号会直接跳到Sources面板中对应的CSS位置。这样你就完成了从现象到根源的完整链路页面上元素宽度不对 → Styles面板看到覆盖提示 → 跳到源码找到覆盖规则 → 知道改哪里。这个流程熟练之后排查样式打架的效率会提升一个量级。3.3 直接改双击、新增、取消勾选实时预览Styles面板不仅仅是查看它本身就是个实时样式编辑器。常用操作包括双击某个属性名改成其他属性名比如width改成min-width双击属性值直接输入新值比如100px改成120px页面会立即刷新显示新效果在规则的花括号区域空白处双击可以新增一行声明点击属性名左侧的复选框可以临时勾选/取消该属性用来测试去掉某个样式后页面是否变化还有一个我每天都用的键盘技巧选中一个属性值比如120px按键盘上/下方向键可以微调数值每次加减1按住Shift再按方向键每次加减10。调padding、调字体大小、调间距这个操作比鼠标点来点去快得多。另外每条规则右侧有一个小点数图标通常表现为两个小点或一个菜单按钮点击可以选择复制selector、复制属性声明内容、或者删除规则等操作。我复制选择器的时候经常用它不用再跑到源码里去复制。3.4 CSS变量自定义属性在Styles面板里的显示方式现代CSS里越来越多的属性值使用var(--xxx)写法。DevTools对变量支持得很好声明在:root里的变量选中任何元素时都能在Styles面板看到--main-color这样的变量声明使用了var(--main-color)的属性面板里会直接显示解析后的实际颜色值同时value上还带一个链接点击可以跳到变量定义的位置这个细节排查变量问题时很有用。比如某个颜色整体偏了直接在Styles里点一下变量值跳到:root看定义马上就能定位是哪个变量被覆盖了。4. Computed面板回答元素最终实际长什么样的终极答案Styles面板讲的是规则来源Computed面板讲的是最终结果。后者往往才是你真正需要的东西。4.1 为什么规则找了一遍还是要看Computed面板有个问题Styles面板答不上来当属性来自简写、继承、或者需要单位换算时它显示的仍是声明原貌而不是生效后的值。举个例子margin: 20px 10px;这个声明实际设置了margin-top、margin-right、margin-bottom、margin-left四个属性。如果某个方向上被其他规则覆盖Styles面板会显得很乱。再看width: 50%浏览器最终渲染的宽度到底是多少pxStyles面板不会告诉你但Computed面板会。Computed面板把当前元素所有属性的计算结果全部列出来单位统一换算为像素之类的基础单位。比如width: 50%在Computed里显示为640px说明父容器宽度是1280px。这才是元素真实的渲染状态。4.2 展开来源这个值到底是谁给的Computed面板每一行属性默认只显示一个最终值。但如果点击属性名前面的小箭头展开会看到所有声明过这个属性的规则以及它们的优先级和覆盖顺序。这个视图特别适合回答为什么这个元素的字号是16px这类问题。展开后你会看到三层浏览器默认样式是16px某个class设置了14px另一个ID设置了18px最后生效值是18px。一目了然不用自己脑补计算。我的习惯是先到Styles面板看规则如果发现各种覆盖太乱直接切到Computed面板展开来源很快就能理出谁先谁后。4.3 过滤器、继承和默认值的区分Computed面板顶部有一个输入框可以按属性名快速过滤。还有一个开关勾选Show all会显示包括继承值、浏览器默认值在内的所有属性不勾选则只显示当前元素自己参与计算的属性。对新手来说一个常见的困惑是Computed面板里明明有一堆没有写在CSS里的属性比如font-size、line-height这些哪来的答案就是继承和浏览器默认值。通过Computed面板你能看到哪些值是从父级继承下来的通常会标注来源为Inherited from xxx这对理解CSS继承机制非常有帮助。5. 盒模型视图、颜色拾取器与伪类强制切换三个隐藏的实用入口如果说Styles和Computed是主菜那这一节的几样东西属于配菜但上桌率极高。每一个用好了都能省下不少时间。5.1 盒模型图的交互细节在Styles面板滚到最下方会看到一个由四层色块组成的盒模型图蓝色是内容区content绿色是内边距padding橙黄色是边框border黄色是外边距margin。这张图的实用之处不只是展示每个区域的数值都可以点击直接修改。比如你想看看增大padding后的效果直接点绿色区域里的数字输入30px回车页面实时更新。排查margin合并问题的时候这张图也很有用。两个元素之间的间距突然比你预想的小看图里margin数值没有正确累加基本能判断是外边距折叠了。记住一个经验盒模型图里的数值是计算后的值和Computed面板一样可信。5.2 颜色拾取器和HSLA、RGB格式切换在Styles面板里任何颜色属性的值前面都有一个颜色小方块。点击它会弹出颜色选择器支持直接在色盘上取色或者点击页面上的取色器图标吸取页面上任意位置的颜色切换颜色表现格式hex、rgb、hsl等点击当前颜色格式文本就能循环切换调整透明度这个工具在做主题色调试的时候非常方便。比如你只想把某个按钮的蓝色加深一点不用回编辑器改完再刷新直接在拾取器里拖一下色相觉得可以了再把数值拷回编辑器。5.3 强制切换伪类状态hover、active、focus不用再把手按在F12上调试:hover、:focus这种伪类状态是很多人的痛点——鼠标一移开样式就没了根本来不及看。DevTools里专门有处理这个的开关。在Styles面板右上角有个:hov按钮也有的版本叫强制状态点击后会弹出一排伪类选项hover、active、focus、focus-within、visited。选中某个状态后元素就会保持在那个状态下无论鼠标是否悬停。这样你可以慢慢查看hover状态的背景色、阴影、宽高也可以直接在面板里修改这些样式。这个功能调试下拉菜单、按钮交互、导航高亮时能力非常突出按住状态去看样式确实比凭手速抓截图舒服。5.4 响应式媒体查询设备模拟和断点查看Chrome调试工具自带设备模拟模式快捷键CtrlShiftMWindows或CmdShiftMMac。这个模式有两个用处模拟手机、平板等不同尺寸的屏幕看布局是否在断点处正确切换在Styles面板里带有媒体查询的规则会以media分组显示并且能直观看到当前视口下哪些分支生效配合使用的方法是开启设备模拟拖动屏幕宽度观察Styles面板里media分组的展开/折叠状态。看到某一组媒体查询规则刚好出现说明当前宽度正好跨过了这个断点。定位为什么手机样式没生效的时候这招比来回改窗口大小效率高。6. 调试CSS属性时最容易踩的几个坑以及对应解药最后聊几个我自己踩过、也常见很多同行反复踩的坑。每一个都不是代码写在文件里的问题而是对调试工具本身不够了解导致的工具坑。6.1 改了半天刷新全丢DevTools的修改不写回源码这是我见过最多新手翻车的地方。在Styles面板里改样式非常直观页面立马变化很多人就以为我改完了然后关了DevTools去干别的重新一刷新所有修改都没了。这不是bug而是机制如此。DevTools里的修改本质上是临时的作用在浏览器内存里。想保留修改只有两种做法把改后的值手动复制到编辑器源码里或者用Sources面板里的本地覆盖Local Overrides功能把修改实时写回本地文件。我的建议是把DevTools当作验证想法的草稿纸改出满意效果后再手动同步到代码里。这个流程习惯了其实更快因为不用一遍遍在编辑器和浏览器之间切换。6.2 划掉的样式来源看不懂其实它已经告诉你全部信息了很多新手看到属性被划掉第一反应是我写错了。实际上DevTools已经尽量把原因标出来了只是很多人没细看灰色小字。被划掉的属性旁边的提示结构大致是覆盖来源哪条规则、哪个文件、哪一行提供的值最终生效优先级说明如果是权重问题会直接列出具体是ID还是class选择器以及优先级数值完全看不懂的时候我的做法是先把Styles面板里所有涉及这个属性的规则截图然后去Computed面板展开同一个属性两边一对照通常三分钟内就能理清楚。6.3 把浏览器的user agent stylesheet当成buguser agent stylesheet是浏览器内置的默认样式不是你的页面引入的。比如h1默认字号很大、ul默认有padding-left这些都是它提供的。有同学曾经试图在调试工具里删掉这些默认样式发现删了属性马上又出现以为卡bug了。其实应对方式很简单在你自己写的规则里显式覆盖它们比如给ul设置padding: 0默认样式自然就不起作用了。在Styles面板里自己的规则永远排在user agent stylesheet上方只要写了就能覆盖。6.4 伪元素和伪类找不到对应位置在Elements面板的DOM树里伪元素::before、::after不会作为一个独立的DOM节点出现而是挂在宿主元素下面以小标签的形式存在。查看方式有两种在DOM树里展开宿主元素能看到::before、::after的虚拟子节点点击后Styles面板会显示针对伪元素的样式在Styles面板顶部可以通过切换元素类型上方通常有个下拉显示当前选中的元素名和伪元素选项选择查看伪元素样式调试下划线、装饰圆点、对话框小箭头这类依赖伪元素实现的效果时这个操作绕不开。6.5 盒模型数值和预想不一致先想继承和normalize盒模型图里的数值如果和自己预期不符不等于代码错了。至少有两个前置因素要考虑到位浏览器默认样式给body、h1这类元素设置了margin会连带影响布局多数项目引入了normalize.css或reset.css它本身就是一系列显式覆盖默认样式声明的规则集合这两类样式在Styles面板里都会出现所以排查盒模型数值异常时先看面板里多出来的那几条规则是不是来自reset。如果是那大概率不是你的问题是项目预设样式在起作用。CSS调试这件事上手之后一点都不玄乎。它的本质就是把浏览器内心里的决策过程翻出来给你看这个元素匹配了哪些规则哪些属性被谁覆盖最终渲染值是多少。弄明白Styles和Computed这两块再加上盒模型图和几个隐藏入口绝大多数CSS的不生效问题都能在几分钟内定位。我实际使用的习惯是每次为什么不对冒出来的时候第一反应不是回编辑器删改代码而是先在DevTools里把状态看明白——大多数时候答案就写在划掉的属性和来源链路上。