创建日期：2020年4月24日
题记：
按正常的顺序，这里应该要按CSS的一些其他知识。但笔者将调试部分提前，是为了在你学习过程中，如果遇到什么错误，自己不知道时，可以进行调试。
调试也是一种编程能力，不要小瞧哦！
1.如何使用浏览器开发者工具
What are browser developer tools
2.比较 DOM 和 View Source
网页源码（或服务器端的 HTML 文件）显示的和开发者工具的 HTML Pane 显示的相比起来不太一样。通过 View Source，内容看起来差不多，然而一些差异还是存在的。
- View Source 就是服务器端的 HTML 源码
- DevTools 内的 HTML tree 展示了浏览器任意时间的渲染结果，让你深入理解正在发生什么。
浏览器在渲染的 DOM 中已为你纠正了一些错误的 HTML 部分。如果你错误地闭合了元素（比如开始标签是<h2>，结束标签是</h3>。），浏览器会尽力弄清你的意图，之后DOM中的HTML就以 <h2> 起始，以 </h2> 结束了。浏览器还会处理好 HTML 文档， JavaScript 做出的更改都会由 DOM 表现出来。
3. 具体功能
这里，仅仅简单介绍调试工具的功能。具体如何使用，参考参考来源。
3.1 审查CSS
我们可以看到一个元素的类名，CSS属性，以及它的盒子模型(box Model)。
可以通过checkbox，选择这条CSS属性，是否要被应用，我们称之为“开关属性”。
3.2 编辑值
可以编辑已有的属性。我们无需修改代码，可以从调试平台上看到效果，从而在代码中修改成想要的效果。
3.3 添加属性
除了修改现有的属性，我们还可以添加属性。
3.4理解盒子模型
通过在盒子模型上滑动鼠标，我们可以理解盒子模型，从而修改元素的Size。
3.5解决优先级
我们可以看到优先级的问题，被覆盖的属性会用删除钱划上，我们就会很清楚，该条规则被覆盖了。
4.调试技巧
在解决 CSS 问题时，DevTools 可以提供很大的帮助，因此当您发现自己的 CSS 表现不如预期时，应该如何解决呢？ 以下步骤应有所帮助。
4.1 从问题中后退一步
任何代码问题都可能令人沮丧，尤其是 CSS 问题，因为您通常无法获得错误消息用于网络搜索来帮助您找到解决方案。 如果您感到沮丧，请暂时离开该问题一会儿—散步，喝一杯，与同事聊天，或者做一些其他事情。 有时，当您停止思考问题时，解决方案就会神奇地出现，即使没有出现，在感到清爽的时候解决起问题来要容易很多。
4.2 你有一个有效的 HTML 和 CSS 吗？
浏览器希望您的 CSS 和 HTML 能够正确编写，但是浏览器也非常宽容，即使标记或样式表中有错误，浏览器也会尽力显示您的网页。 如果您的代码有错误，浏览器需要猜测您的意思，并且可能会对您的想法做出不同的决定。 此外，两种不同的浏览器可能会以两种不同的方式来解决该问题。 因此，一个好的第一步是通过验证器运行 HTML 和 CSS，以获取并修复任何错误。
4.3 属性和值是否被你正在测试的浏览器所支持?
浏览器会忽略他们不理解的 CSS。 如果您正在测试的浏览器不支持您正在使用的属性或值，则不会奔溃，但 CSS 不会被应用。 DevTools 通常会以某种方式突出显示不支持的属性和值。 在下面的屏幕截图中，浏览器不支持以下子网格值 grid-template-columns.
您还可以查看 MDN 每个属性页底部的浏览器兼容性表。 这些向您显示浏览器对该属性的支持，如果支持该属性的某些用法，而不支持其他用法，则经常会 break down。 这里显示了
shape-outside 属性的兼容性数据。
4.4 是否有其它东西覆盖了你的 CSS?
在这里，您所学到的关于特定性（specificity）的信息将非常有用。 如果您有一些更特定的内容要覆盖你打算做的，将会比较麻烦。 但是，如上所述，DevTools 将向您显示 CSS 是如何应用的，您可以弄清楚如何使新选择器足够具体，以覆盖旧的 CSS 样式。
4.5 制作一个精简的问题测试用例
如果上述步骤未能解决问题，则您需要做更多调查。 此时最好的做法是创建一个称为简化测试用例的东西。 能够“减化问题”是一项非常有用的技能。 这将帮助您在自己的代码和同事的代码中发现问题，还使您能够报告错误并更有效地寻求帮助。
简化的测试用例是一个代码示例，它以最简单的方式演示了该问题，并删除了无关的周围内容和样式。 这通常意味着将有问题的代码从您的布局中取出，以制作一个仅显示该代码或功能的小示例。
创建一个简化测试用例:
- 如果您的标记是动态生成的（例如通过 CMS），请生成显示该问题的静态版本。 诸如 CodePen 之类的代码共享站点可用于托管简化的测试用例，因为它们可以在线访问，并且您可以轻松地与同事共享它们。 您可以先在页面上执行“查看源代码”，然后将 HTML 复制到 CodePen 中，然后获取所有相关的 CSS 和 JavaScript 并将其包括在内。 之后，您可以检查问题是否仍然明显。
- 如果删除 JavaScript 不能解决问题，请不要包含 JavaScript。 如果删除 JavaScript 确实消除了问题，那么请尽可能多地删除与问题无关的 JavaScript，保留导致问题的原因。
- 删除所有不会导致此问题的 HTML。 删除布局中的组件甚至主要元素。 在保留问题可重现的情况下把代码量尽量减少。
- 删除掉任何不影响问题的 CSS。
在执行此操作的过程中，您可能会发现导致问题的原因，或者至少能够通过删除特定的东西来打开和关闭它。 当发现一些东西时，应该在代码中添加一些注释。 如果您需要帮助，这些注释将向帮助您的人显示您已经做了哪些尝试。 这很可能会为您提供足够的信息，以便能够搜索可能存在的问题和解决方法。
如果您还没有解决问题，那么减化测试用例可以通过发布到论坛或向同事展示来为寻求帮助提供依据。 如果能够表明在寻求帮助之前您已经完成了简化问题并准确确定问题根源的工作，那么会帮助您更容易地获得帮助。 一个更有经验的开发人员也许能够迅速发现问题并为您指明正确的方向，即使没有，您简化的测试用例也可以使他们快速查看并能够至少提供一些帮助。
如果您的问题实际上是浏览器中的错误，则还可以使用简化的测试用例向相关的浏览器供应商提交错误报告（e.g. on Mozilla's bugzilla site）。
随着对 CSS 的使用经验越来越丰富，您会发现发现问题的速度越来越快。 但是，即使我们中最有经验的人有时也会发现自己想知道到底发生了什么。 采取有条不紊的方法，简化测试用例，并向他人解释问题，通常会找到解决方法。
CSS系列 目录导引
