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