2018年01月聚合文章--Debug前端HTML/CSS

译者按：关于使用Chrome开发者工具非常全面的介绍，值得一读！

原文: How to debug Front-end: HTML/CSS
译者:Fundebug

为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。

我强烈感觉到至少有一半人会这么想：“HTML/CSS甚至算不上一门编程语言”。不过，前端开发中，HTML/CSS方面Debug技巧不足导致的问题非常多。

并不是每一个开发者都知道他眼前早就有一个非常强大的Debugger，可以帮助他追踪和消除bug。这个Debugger就是他自己的谷歌浏览器。在之前一篇博客中，我主要介绍了 Console 。在这篇，我将专注于Elements标签。

这篇文章将会包含：

将你的浏览器变为IDE-可动态编辑的HTML/CSS
HTML断点
改变元素状态
搜索特定的元素
通过实例来练习新的技巧
理解元素样式？understanding styles in the Elements tab

好啦，基本介绍的差不多了。接下来给你展示新的技巧。

快速进入Element标签的两个方法

对着页面任何元素(Elements)点击右键，选择“检查”
使用Ctrl+Shift+I(Mac:Cmd+Opt+I)打开开发者面板，选择元素(Elements)标签。

元素(Elements)标签的左侧

DOM树

首先，DOM树元素可以被进一步检查(inspected)。点击左侧的三角来展开查看更多的元素。

点击鼠标右键，会有更多的选择：

Add attribute - 对选中的元素添加新的属性
Edit attribute - 编辑某个属性，当你鼠标在某个属性上方点击右键时方才显示。
Edit as HTML — 你可以编辑整个HTML；如果你想把元素的一部分拷贝使用，这样操作也很方便。

Copy:

Copy outerHTML — 将整个标签及其内容拷贝。
Copy selector — 拷贝CSS选择器(div > span > #id)
Copy XPath — 拷贝XPath //*[@id=”answer11208745–20”]/div/div[3]/time, 更多请查看文末拓展阅读
Cut element — 剪切元素
Copy element — 拷贝元素
Hide element — 通过添加 display:none 来临时性地隐藏元素；(cmd+H/Ctrl+H)
Delete element — 删除元素，可以使用cmd+z来取消删除
Expand all — 将所有节点展开
Collapse all — 将所有节点折叠
:active — 将元素设置为active状态*
:hover — 将元素设置为hover状态*
:focus — 将元素设置为focus状态*
:visited — 将元素设置为已访问状态*
Scroll into view — 将网页快速滑动到元素所在位置

Break on:

subtree modification — 在子节点被修改的时候中断执行 **
attribute modification — 在属性被修改的时候中断执行 **
node removal **

在右侧的样式(styles)中检查效果

** 在右侧(DOM breakpoints)可以查看设置的断点

断点实战

不实战一下，理解起来可能有点困难，特别是如果你还从未使用过它们。接下来我创建一个简单的例子交给你来玩。

所有的步骤都在HTML文件中。如果debugger在jQuery中中断暂停，你可以将jQuery屏蔽(如下图所示)。

点击查看示例

元素快速定位

点击该图标，然后在页面上选中元素，DOM tree就会快速定位到该元素的源代码位置。

源代码

If you click on the source file like styles, fonts, js files, there will be some additional options.

如果你点击样式(style)，fonts，js文件，会有一些额外的选项。

捕获节点截图

一个很酷的技巧就是你可以将选中的节点生成一张png图片。

点击鼠标左键选中元素
使用 Cmd+Shift+P/Ctrl+Shift+P打开命令输入窗口
输入 node screenshot
选中 Capture node screenshot

将会生成一张PNG图片。

通过字符串、CSS选择器、XPath快速查找

当元素标签打开，输入Cmd/Ctrl+f，将会打开一个输入窗口。

直接编辑源文件

在Chrome开发者面板可以直接编辑源文件并保存，不用刷新页面。

打开source标签，选中并打开你想要编辑的文件并编辑
然后右键，如上图所示
在Windows下，你可以点击整个文件夹(左侧蓝色的图标)，然后选择 Add folder to workspace
在MacOS下，你可以将整个文件夹拖动到你本地的目录。你也可以右键选择 Add folder to workspace
接下来你所有的更改都会自动反应到对应的本地代码。

Fundebug是可以复现用户行为的JavaScript错误监控平台，支持各种框架，可以帮助您第一时间发现BUG！

元素(elements)标签的右侧区域

样式(styles)

当你选中某个元素，对应的样式以及其他一些属性会在右侧显示出来。

:hov - 当你展开 :hov ，其提供的选项可以让你激活元素的不同状态，比如hover, focus。在DOM tree上也可以直接对元素进行这样的操作。
.cls - 对选中的元素添加class
+ - 添加新的style到该元素

在Styles标签，你可以找到对应元素适配的所有的style。

一些标记的含义

黄色的警告标识表面样式的名字或则值格式不正确。比如上图 widd 是一个错误的属性名。

被划掉意味着被其它样式覆盖，比如另一个样式使用了 important 关键字。

灰色背景的样式文件是有效但不可编辑。这些样式文件来自于浏览器。

右侧有该样式所在的文件，点击即可查看该文件。

样式的计算结果(Computed Styles)

最上方的矩形框可视化地展示了padding, border和margin的效果以及其值。

对于非静态定位的元素，top、right、bottom、left属性会显示出来。所有的值都可以左键双击，然后修改。

下面是所有适用的样式规则。每一条都可以展开查看，并且右侧有对应的原文件的位置。

所有计算好的样式不可编辑，不过你可以点击灰色的箭头进入对应的样式来进行编辑。

Event Listeners

在该标签页可以看到所有的事件监听函数。

位于左侧的刷新按钮 — 刷新所有监听事件
父元素(Ancestors)选择框 — 显示/隐藏所有元素的父元素的监听函数

All/Blocking/Passive下拉菜单，你可以选择一个:

Passive events listeners — 一个新的web标准，在Chrome51发布的新特性，可以提升滑动的性能。 Chrome Release Notes
Blocking — 典型的那些过时的事件监听.
Framework listeners — 检车来自框架的事件监听。当选中后，我们看到的jQuery不再是一个连接，而是具体函数调用的位置。

每天使用

当你在阅读不熟悉的代码的时候，事件监听标签非常有用。它帮助你快速定位该函数绑定到哪个元素。”Show function definition”可以跳转到函数的定义。

如果你使用 for 循环来添加元素，可能你不小心把多个事件绑定到同一个元素。那么通过查看事件监听可以帮你发现这个bug。

记得选中 Framework listeners 来查看具体的绑定，而不是抽象的jQuery。 Fiddle示例

属性

每一个被选中的HTL元素都是一个DOM对象。它具有相应的属性。属性标签显示选中的DOM对象的继承结构。

老实说，我并不怎么使用这个功能。我主要的使用场景是查看元素的属性，而不是使用 console.log 以及重新载入和刷新。如果你有什么更好地说那个场景，不妨分享一下。

Shapes and $scope

Shapes和$scope是额外的标签来自Chrome的插件。在接下来的文章我会详细介绍。

结束语

如果你想知道更多，可以查看命令菜单(Command Menu)，或则拓展阅读。

拓展阅读

版权声明:
转载时请注明作者<b><a href="https://fundebug.com" target="_blank" title="Fundebug">Fundebug</a></b>以及本文地址：
<b><a href="https://blog.fundebug.com/2018/01/02/how-to-debug-frontend-html-css/" target="_blank" title="Debug前端HTML/CSS">https://blog.fundebug.com/2018/01/02/how-to-debug-frontend-html-css/</a></b>

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。

[聚合文章] Debug前端HTML/CSS