使用强大的Chrome开发者工具——HTML篇

今天微信上看到一篇文章《专家认为:IE被放弃也是Win帝国毁灭的开始》 ,这对于前端开发同学来说应该是个好消息吧呵呵,不过短时间内IE用户还是大有人在的,权当给小伙伴们一个小惊喜吧。下面进入正题~介绍Chrome开发者工具Elements面板的常用功能。

 

那么就顺便拿上面这个页面作例子好了。用Chrome打开这个页面:

一、查看元素盒子概况

我们在这篇文章的标题处,右键->选择【审查元素】,如果你当前标签的开发者工具没有开启的话,此操作将开启它,然后Chrome将焦点定位在这个h2元素上,如图:

QQ20150323-1

我们再将鼠标移到的这个被蓝色高亮的节点上,我们会看到页面中对应的标题会被蓝绿橙三种颜色的背景“包围”了,那么蓝色就是元素自身内容的高宽(不一定是你设置的width属性值,视它的box-sizing而定),绿色是padding,橙色是margin,如图:

QQ20150323-3

橙色下方的668 x 44px 意思是此元素的内容高宽 + padding + margin + border 的最终宽度。前面的h2#activity.rich_media_title,如果你会使用css选择器的话,应该很容易理解,即此元素的id是activity,拥有rich_media_title这个class。

此查看方式可以轻松了解页面上各个元素的和模型概况,之所以是“概况”,因为此时还无法得知内容高宽以及padding和margin的具体值,我们将在CSS篇中介绍如何查看和模型的各个具体数值。

 

二、删除元素节点

这个很简单,直接按delete键即可将高亮的节点删除,包括其子孙节点,当然你也可以在需要删除的节点上右键->选择【Delete】,紧接着页面上相应的节点也消失了,如图:

QQ20150324-1

 

当然,这个删除操作只是临时性的,刷新页面即可恢复。

三、修改元素节点

这个操作,可分为属性修改和节点“outerHTML”的修改。前者其实是可以通过后者实现的。

a.属性修改

我们刷新刚才的页面,把文章标题恢复。依然在标题上右键->选择【审查元素】,在该元素的class属性上双击左键(或右键->选择【Edit Attribute】),接着该节点的class属性便进入编辑状态,我们把rich_media_title这个class改为rich_media_title11111,甚至删掉,回车,页面上的标题瞬间就变小了,其实是应用在rich_media_title这个class上的css属性消失了,也即css选择器选不到这个节点了,那么相应的css设置便失效了~

另外,我们双击该节点里的文本节点,也立即进入编辑状态,修改完后回车,页面上就能看到效果,如图:

QQ20150324-2

b.节点“outerHTML”的修改

作为web开发的你,对outerHTML应该不陌生。此功能相当于在脚本以外,借助浏览器的力量去修改节点的outerHTML。我们再在该标题节点上右键->选择【Edit as HTML】,可以看到整个节点的内容变成了编辑状态。你可以随意修改其中的内容,完毕后,在编辑框的外部点击一下(即blur一下),即可生效,如图:

QQ20150324-3

基于此功能,在Chrome可以造各种“假象”(小小邪恶一下呵呵),当然不建议读者利用此功能干坏事。

四、移动元素节点

刷新恢复页面,在文章标题下一行的日期这一行,右键->选择【审查元素】,em#post-date将被高亮显示,我们点击它的父节点div.rich_media_meta_list,然后向上拖动该节点,在释放鼠标之前,在可以释放的地方都会产生一条水平线,我们将它拖到div.rich_media_title的上面,释放鼠标,这时我们立刻看到页面上,日期的这一行移到了标题上方,zmazing!,如图:

QQ20150324-4

当然,此操作也可以通过在节点上鼠标右键的【cut】和【paste】结合实现,读者可自行尝试。

五、使元素节点滚动至当前视图

在Elements的面板中,继续向下浏览,找到某个P标签,最好是比较下面的未在页面窗口中显示的,然后在该节点上右键->选择【Scroll into View】,我们可以看到,此节点内容出现在了页面窗口中。

当然,读者可能觉着这功能是否太鸡肋了?完全可以通过滚动页面打到这个效果啊。

没错,在这种情况下,是可以通过滚动页面实现。但是当我们在调试js代码的时候,页面是被锁定的,无法进行交互,也即无法进行滚动页面操作。此时这个操作就派上用场啦~