你不知道的Chrome DevTools（3）：随意修改你的HTML

Web前端开发过程当中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它做为Web前端开发性能调试的必备工具。就连隔壁的产品小哥都知道打开F12改一下页面元素的标签代码就能看到页面效果，这年头谁不会用Chrome开发者工具呀。

可是Chrome能作的远不止你日常用的那么简单，这一个小小的开发工具集成了不少高级的功能你未必知道。我打算把一些Chrome DevTools上使用的高级技巧写成《你不知道的Chrome DevTools》这一系列的博文，但愿你们一块儿学习学习。

---

elements面板

使用Chrome开发工具中的elements面板估计是前端工程师修改一个页面内容最快的方法了。elements面板的左侧显示页面的HMTL元素，右侧显示选中元素的样式。使用方法也很简单，用左上角的“放大镜”在页面上选取元素，而后就能够查看该元素的HTML属性和CSS样式了。

多种方法修改HTML

要修改页面元素的HTML结构，其中通常涉及到：

• 修改HTML属性
• 修改整个HTML的代码
• 删除节点
• 移动节点的位置

对于上述几种要求，使用elements面板的时候都比较简单直接。要修改HTML属性，只须要在要修改的属性上双击，就会进入输入状态，输入你想要修改的属性；要修改整个HTML代码的时候，只须要在元素上右键-“Edit as HTML”便可；要删除节点，能够在选中元素后，按下delete快捷键，或者右键选择“Delete node”;须要移动节点的位置的时候，只须要鼠标拖动选中的元素到你想要的位置便可。

值得一提的是右键菜单上的“Force element state”这个操做，就是强制设置该元素的状态。状态分为四种，分别是active/hover/focus/visited。强制设置状态在某些状况下比较的有用，例如你想查看某些hover伪类的样式，又例如元素里有隐藏的元素，须要在鼠标hover的时候才出现，但你的鼠标移开的时候hover状态就消失了，强制显示hover状态比较方便你检查元素hover的状况。

另外，在调试的过程当中能够给元素添加断点。很神奇吧？如今支持的断点的状态有：元素的子节点结构改变时、元素的属性改变时、元素被删除时。在大型项目中，这一断点比较有意思。大型项目中的HTML结构都比较宏大，并且脚本在改变HTML接口的时候你又难以跟踪元素HTML的状态。使用断点，这些都不是问题。右键菜单中便可把这一功能呼唤出来。

多种方法修改CSS

elements面板的右侧便是展现所选择元素的css样式的地方。然而右侧不止是修改和展现css样式的地方。实际上，右侧包括了如下集中功能：

• 展现和修改CSS样式
• 展现实际计算结果的样式
• 显示当前元素的事件监听状况
• 显示当前元素包含的dom断点
• 显示当前元素的对象属性

这些功能都在面板右侧的tab上有显示。另外，若是你有给Chrome开发工具安装插件，那么插件的功能区也会成为一个新的tab显示在后面。例如博主我就安装了jQuery Audit和JS Runtime这两个插件。

利用elements面板修改CSS样式是很简单的事情，但里面也有一些小窍门能够分享给你们。在CSS样式的属性值上，若是是数字的属性值，则能够经过按上下方向快捷键来给属性值加一，经过按住shift键的同时按上下方向快捷键，能够给属性值递增十。

一样，在elements面板的样式区域也能够给元素强制设置状态（active/hover/focus/visited）。作法和原理跟上面说的同样。

总结

总而言之，经过Chrome开发工具的elements面板能够很轻松地修改你的页面。

写在最后的话：本文基本上是在参考了Google的DevTools文档以后，结合本身的经验来写的，目的是把文档中说到的一些特别的方法介绍给你们，若是想多点了解，能够到Google的DevTools文档看看。致谢！

参考文献

https://developers.google.com/chrome-developer-tools/?hl=zh-cn