Chrome DevTools 调试

将调试阶段分为三个

• 评估并快速修复
• 还原和重现
• 定位根源并修复

评估并快速修复

有经验的 CSS 开发者可能都知道的一些 CSS 陷阱：

• 图片周边存在有趣的空白？设置 display: block（图片默认是内联的，因此会有空白）。
• 元素排列不正确？你可能有浮动的元素。
• 绝对定位元素不显示、位置错误或者被遮挡？你可能没有设置父元素的 position 属性或者用 transform 及 opacity 创建一个 z-index 上下文。
• 伪元素不显示？你可能忘记了设置 ‘content’的值。

如果出现的问题不能被轻易解决，先确定问题区域的范围，抓取 HTML 标签（也就是拷贝 DOM），进入下一个调试阶段：还原和重现。

专业提示：大多数浏览器的开发者工具会让你选择包裹元素并拷贝 HTML 区块。在 Chrome 的开发者工具中，要连同包裹元素一起拷贝，需要点击 ‘Copy > Copy OuterHTML’。

还原和重现

为清晰起见，只把相关的 HTML 和 CSS 提取出来复现问题，逐步地增加或删除 CSS 代码

1. 检查标签的有效性
   我们希望能发现未闭合的标签、没有引号的属性，以及其它任何可能影响浏览器解析的问题。建议你使用 W3C validator。
   一旦标签检查通过，将有助于消除浏览器引入意外样式的可能性。这样做：

首先，把所有元素改成 div（块级元素）和 span（行内元素），保证它们只被 CSS 的类选择器选中。也许有必要把额外的选择器移除，如把 a.link 改为 .link。

通过使用固定的标签我们消除了浏览器针对特定元素引入默认样式的可能性。表单元素是个特例（马上会在例子中见到）。

如果把所有元素改成 div 和 span，问题消失了，那么浏览器引入默认样式的嫌疑就被确定了。现在在 computed styles 面板中寻找浏览器增加了什么样式，想办法覆盖它。总之就是要看计算后的样式。

定位根源并修复

换个浏览器试一试。是否同样的问题出现在 Chrome，IE，Safari 和 Firefox 上？如果不是，哪个的表现是正确的？如果只有一个浏览器是错的，那么就值得去搜索一下对应的 bug 跟踪系统了：

• Chrome bugs
• Firefox bugs
• Safari bugs
• Microsoft bugs

是某浏览器的问题吗？或者是某浏览器的特定版本的问题？问题是否在修复中？有没有不影响其它浏览器的解决方案？实在不行你可以为特定的浏览器编写修复代码吗？

实操技巧

使用Chrome DevTools Elements(元素)面板，检查并实时编辑页面中的HTML和CSS。

Chrome DevTools Elements panel

TL;DR

• 在Elements(元素)面板中随时检查并编辑 DOM 树中的任何元素。
• 在Styles(样式)窗格中查看和更改应用于任何选定元素的CSS规则。
• 在Computed(计算)窗格中查看和编辑所选元素的盒模型。
• 在Sources(源代码)面板中查看您在本地网页上所做的任何更改。

实时编辑一个DOM节点

要实时编辑DOM节点，只需双击 选中元素 并进行更改：

DOM树视图显示树的当前状态;由于多种不同原因，它可能与最初加载的HTML不一样。

Console模块

我们在DevTools中定位在Console模块，当前模块可以用来查看和调试当前页面所加载的脚本的源文件。换句话说，我们可以在Console模块中执行JavaScript脚本。

• 若我们的页面中出现了一些错误，我们打开DevTools的Console面板也可以看到在该面板中是有页面的报错的。如下：

CSS 验证

• 和HTML验证器（http://jigsaw.w3.org/css-validator/）可以验证HTML的规范程度一样，也存在CSS验证器（http://jigsaw.w3.org/css-validator/），我么可以在特定的URL上验证CSS，或者通过上传本地文件，或者直接使用CSS属性进行输入验证。

## 实时编辑一个样式

在Styles(样式)窗格中，可以实时编辑样式属性名称和值。所有样式都是可编辑的，除了那些灰色的（如user agent stylesheet中的样式，即我们通常说的浏览器的默认样式表）。

要编辑名称或值，只要单击它就可以了，然后进行修改，然后按Enter键保存修改。

edit property name

默认情况下，CSS修改不是永久的，当重新加载页面时，修改的内容就会丢失。如果想要在页面重新加载时保留的修改，请设置持续创作 。

检查和编辑盒模型参数

检查并编辑当前元素的盒模型参数，请使用Computed(计算)窗格。盒模型中的所有值都是可编辑的，只需点击它们就可以了。

Computed pane

同心矩形包含当前元素的padding, border 和 margin属性的top, bottom, left, right值。

对于非静态定位的元素，还显示了position矩形，包含top, right,bottom, 和left 属性的值。

non-static computed element

对于position: fixed和position: absolute元素，（盒模型）中心字段包含了所选元素的实际的offsetWidth × offsetHeight像素尺寸。跟Styles(样式)窗格中的属性值一样，所有值都可以通过双击来修改。然而，改变值不保证生效，因为这取决于具体元素的定位细节。

fixed computed elemen

查看本地更改

如果你要查看对页面进行的实时更改的历史记录：

• 在Styles(样式)窗格中，单击修改过的文件。DevTools将跳转到Sources(源代码)面板中。
• 右键单击该文件。
• 选择Local modifications(本地修改)。

如果要了解所做的更改：

• 展开顶级文件名来查看发生修改的时间 time modification occurred

• 要撤消对文件进行的所有本地修改，打开Sources(源代码)面板，然后选择文件名旁边的revert(还原)。