调试 CSS
有时在编写 CSS 时，你会遇到一个问题，你的 CSS 似乎没有按预期工作。也许你认为某个选择器应该匹配一个元素，但什么也没有发生，或者一个盒子的大小与你预期的不同。本文将指导你如何调试 CSS 问题，并向你展示所有现代浏览器中包含的 DevTools 如何帮助你找出问题所在。
| 预备知识 | 基本 HTML 语法，CSS 样式基础（本模块之前的课程中已涵盖！） |
|---|---|
| 学习成果 |
如何访问浏览器开发者工具
文章 什么是浏览器开发者工具 解释了如何在各种浏览器和平台上访问这些工具。虽然你可能主要选择在特定浏览器中进行开发，因此会最熟悉该浏览器中包含的工具，但了解如何在其他浏览器中访问它们是值得的。如果你在多个浏览器之间看到不同的渲染效果，这将有所帮助。
在本课程中，我们将介绍 Firefox DevTools 中用于处理 CSS 的一些有用功能。为此，我将使用 一个示例文件。如果你想跟着操作，请在新标签页中加载此文件，并按照上面链接的文章所述打开你的 DevTools。
DOM 与查看源代码
对于 DevTools 新手来说，查看网页的源代码或查看你放在服务器上的 HTML 文件与你在 DevTools 的HTML 面板中看到的内容之间存在差异，这可能会让他们感到困惑。虽然它与你通过“查看源代码”看到的内容大致相似，但仍有一些差异。
在渲染的 DOM 中，浏览器可能已经规范化了 HTML，例如为你纠正了一些编写不良的 HTML。如果你错误地关闭了一个元素，例如通过打开一个 <h2> 但使用 </h3> 关闭，浏览器将弄清楚你的意图，并且 DOM 中的 HTML 将使用 </h2> 正确关闭打开的 <h2>。DOM 还会显示由 JavaScript 所做的任何更改。
相比之下，查看源代码是存储在服务器上的 HTML 源代码。你的 DevTools 中的HTML 树精确显示浏览器在任何给定时间正在渲染的内容，因此它让你深入了解实际发生的情况。
检查应用的 CSS
选择页面上的一个元素，可以通过右键/Ctrl+单击它并选择“检查”，或从 DevTools 显示左侧的 HTML 树中选择它。尝试选择类名为 box1 的元素；这是页面上第一个周围有边框的元素。
如果你查看 HTML 右侧的规则视图，你应该能够看到应用于该元素的 CSS 属性和值。你将看到直接应用于类 box1 的规则，以及从其祖先（在本例中为 <body>）继承的 CSS。如果你看到一些你意想不到的 CSS 被应用，这会很有用。也许它正在从父元素继承，你需要添加一个规则来在此元素的上下文中覆盖它。
同样有用的是能够展开速记属性。在我们的示例中使用了 margin 速记。
单击小箭头以展开视图，显示不同的长手属性及其值。
当规则视图面板处于活动状态时，你可以在其中切换值的开/关——如果你将鼠标悬停在上面，会出现复选框。取消选中某个规则的复选框，例如 border-radius，CSS 将停止应用。
你可以使用此功能进行 A/B 比较，决定应用规则后是否看起来更好，也可以帮助调试——例如，如果布局出错，你正在尝试找出哪个属性导致了问题。
编辑值
除了打开和关闭属性之外，你还可以编辑它们的值。也许你想看看另一种颜色是否更好，或者想微调某个东西的大小？DevTools 可以为你节省大量编辑样式表和重新加载页面的时间。
选中 box1 后，单击显示边框颜色的色块（小彩色圆圈）。一个颜色选择器将打开，你可以尝试一些不同的颜色；这些颜色将实时更新在页面上。以类似的方式，你可以更改边框的宽度或样式。
添加新属性
你可以使用 DevTools 添加属性。也许你已经意识到你不希望你的盒子继承 <body> 元素的字体大小，并希望设置自己的特定大小？你可以在将其添加到 CSS 文件之前在 DevTools 中尝试此操作。
你可以点击规则中的闭合花括号开始在其中输入新的声明，此时你可以开始输入新属性，DevTools 将向你显示匹配属性的自动完成列表。选择 font-size 后，输入你想要尝试的值。你还可以点击 + 按钮添加一个具有相同选择器的附加规则，并在那里添加你的新规则。
注意：规则视图中还有其他有用的功能，例如带有无效值的声明会被划掉。你可以在检查和编辑 CSS 中了解更多信息。
理解盒模型
在之前的课程中，我们讨论了盒模型，以及我们有一个替代盒模型，它根据你给它们的尺寸以及内边距和边框来改变元素的尺寸计算方式。DevTools 可以真正帮助你理解元素的尺寸是如何计算的。
布局视图显示了所选元素的盒模型图，以及改变元素布局方式的属性和值的描述。这包括你可能没有在元素上明确使用的属性的描述，但这些属性确实具有初始值。
在此面板中，其中一个详细属性是 box-sizing 属性，它控制元素使用哪个盒模型。
比较类名为 box1 和 box2 的两个盒子。它们都应用了相同的宽度（400px），但 box1 在视觉上更宽。你可以在布局面板中看到它使用的是 content-box。此值会获取你赋予元素的尺寸，然后加上内边距和边框宽度。
类名为 box2 的元素正在使用 border-box，因此这里的内边距和边框从你赋予元素的尺寸中减去。这意味着盒子在页面上占据的空间是您指定的精确尺寸——在我们的例子中是 width: 400px。
注意：在检查和查看盒模型中了解更多信息。
解决特异性问题
有时在开发过程中，尤其是在需要编辑现有网站上的 CSS 时，你会发现很难让某些 CSS 生效。无论你做什么，元素似乎都不接受 CSS。这里通常发生的情况是，更具体的选择器正在覆盖你的更改，而 DevTools 在这里会真正帮助你。
在我们的示例文件中，有两个单词被包裹在 <em> 元素中。一个显示为橙色，另一个显示为亮粉色。在 CSS 中我们应用了
em {
color: hotpink;
font-weight: bold;
}
然而，在样式表中，其上方有一个带有 .special 选择器的规则
.special {
color: orange;
}
正如你从关于处理冲突的课程中回忆起的那样，我们讨论了特异性，类选择器比元素选择器更具特异性，因此这是应用的值。DevTools 可以帮助你发现此类问题，特别是当信息埋藏在一个巨大的样式表中的某个地方时。
检查带有 .special 类的 <em>，DevTools 将显示橙色是应用的颜色，并且应用于 <em> 的 color 属性被划掉了。你现在可以看到类选择器正在覆盖元素选择器。
调试 CSS 中的问题
DevTools 在解决 CSS 问题时会非常有帮助，所以当你发现 CSS 行为不如预期时，应该如何解决呢？以下步骤应该会有所帮助。
退一步思考问题
任何编码问题都可能令人沮丧，尤其是 CSS 问题，因为你通常不会收到在线搜索错误消息来帮助寻找解决方案。如果你感到沮丧，请暂时远离问题——去散步，喝杯饮料，和同事聊天，或者暂时做些其他事情。有时当你停止思考问题时，解决方案就会奇迹般地出现，即使没有，在精神焕发时处理问题也会容易得多。
你的 HTML 和 CSS 有效吗？
浏览器期望你的 CSS 和 HTML 编写正确，但浏览器也非常宽容，即使你的标记或样式表中有错误，它们也会尽力显示你的网页。如果你的代码中有错误，浏览器需要猜测你的意图，它可能会做出与你心目中不同的决定。此外，两个不同的浏览器可能会以两种不同的方式处理问题。因此，第一步是使用验证器运行你的 HTML 和 CSS，以发现并修复任何错误。
你正在测试的浏览器是否支持该属性和值？
浏览器会忽略它们不理解的 CSS。如果你正在使用的属性或值在你正在测试的浏览器中不受支持，那么什么都不会损坏，但该 CSS 将不会被应用。DevTools 通常会以某种方式突出显示不受支持的属性和值。在下面的截图中，浏览器不支持 grid-template-columns 的 subgrid 值。
你还可以查看 MDN 上每个属性页面底部的浏览器兼容性表格。这些表格显示了该属性的浏览器支持情况，通常会细分是否支持该属性的某些用法而不支持其他用法。查看 grid-template-columns 属性的兼容性表格。
是否有其他东西覆盖了你的 CSS？
这正是你所学到的关于特异性的知识大有用武之地。如果有一个更具体的选择器覆盖了你想要做的事情，你可能会陷入一场非常令人沮丧的尝试找出原因的游戏。然而，如上所述，DevTools 将向你展示正在应用的 CSS，你可以找出如何使新选择器足够具体以覆盖它。
创建一个问题的精简测试用例
如果上述步骤未能解决问题，那么你需要进行更多的调查。此时最好的做法是创建一个所谓的精简测试用例。“精简问题”是一项非常有用的技能。它将帮助你发现自己和同事代码中的问题，并能让你更有效地报告错误和寻求帮助。
精简测试用例是一个代码示例，它以最简单的方式展示问题，并删除了不相关的周围内容和样式。这通常意味着将有问题的代码从你的布局中取出，以创建一个只显示该代码或功能的小示例。
创建精简测试用例
- 如果你的标记是动态生成的——例如通过 CMS——请创建一个显示问题的静态输出版本。像 CodePen 这样的代码共享网站对于托管精简测试用例很有用，因为它们可以在线访问，你可以轻松地与同事共享。你可以首先在页面上查看源代码并将 HTML 复制到 CodePen，然后获取任何相关的 CSS 和 JavaScript 并也包含在内。之后，你可以检查问题是否仍然存在。
- 如果删除 JavaScript 并不能解决问题，则不要包含 JavaScript。如果删除 JavaScript 确实解决了问题，那么尽可能多地删除 JavaScript，只保留导致问题的部分。
- 移除任何与问题无关的 HTML。移除布局的组件甚至主要元素。同样，尝试将代码量精简到仍能显示问题的最小程度。
- 删除任何不影响问题的 CSS。
在此过程中，你可能会发现问题的原因，或者至少能够通过删除特定的东西来开启和关闭它。在你发现问题时，值得在代码中添加一些注释。如果你需要寻求帮助，它们会向帮助你的人展示你已经尝试过什么。这很可能会给你足够的信息来搜索可能的问题和变通方法。
如果你仍然难以解决问题，那么拥有一个精简测试用例可以让你更容易地寻求帮助，例如通过在论坛上发帖或向同事展示。如果你能证明你已经完成了精简问题并准确识别问题发生位置的工作，然后再寻求帮助，你更有可能获得帮助。经验丰富的开发人员可能能够快速发现问题并为你指明正确的方向，即使不能，你的精简测试用例也将使他们能够快速查看并有望提供至少一些帮助。
如果你的问题实际上是浏览器中的一个错误，那么精简测试用例也可以用于向相关浏览器供应商提交错误报告（例如，在 Mozilla 的 bugzilla 网站上）。
随着你对 CSS 越来越熟悉，你会发现自己解决问题的速度越来越快。然而，即使是我们中最有经验的人有时也会发现自己想知道到底发生了什么。采取系统的方法，制作一个精简的测试用例，并向其他人解释问题通常会找到解决方案。
总结
所以这就是它：CSS 调试的介绍，它应该能给你一些有用的技能，以便在你的职业生涯中开始调试 CSS 和其他类型的代码时可以使用。
本模块的所有课程到此结束。最后，我们将通过一系列挑战来测试你对所涵盖主题的知识。
另见
- Firefox > 检查和编辑 CSS，Firefox 源文档
- Chrome > 查看和更改 CSS，developer.chrome.com