你不知道的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