你不知道的Chrome DevTools(3):随意修改你的HTML

civerzhu

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这两个插件。
安装Chrome开发工具插件

利用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

阅读 38.2k

civerzhu
尘世间一件迷途的小码农。专注前端开发,喜欢捣鼓折腾,不完全hacker。

尘世间一件迷途的小码农。专注前端开发,喜欢捣鼓折腾,不完全hacker。

1.3k 声望
83 粉丝
0 条评论

尘世间一件迷途的小码农。专注前端开发,喜欢捣鼓折腾,不完全hacker。

1.3k 声望
83 粉丝
文章目录
宣传栏