正文
译者按：
关于使用Chrome开发者工具非常全面的介绍，值得一读！
为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。
![]()
我强烈感觉到至少有一半人会这么想：“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)，或则拓展阅读。
拓展阅读
![]()
您的用户遇到BUG了吗？
体验Demo
免费使用
