原标题:细说网页开发者工具F12-前端开发利器一
网页开发者工具之 Elements
前言
写这篇文章的目的主要是为了帮助前端小白,学习使用浏览器自带的F12网页开发者工具,来快速定位调试分析问题、解决问题。当然这仅是作者的个人学习心得,有不足之处欢迎大家指点。由于篇幅有限,这篇文章仅介绍Elements。若觉得不错请关注作者的后续更新。
如何在F12工具中定位元素
这里拿我的博客作为网页、用Chrome谷歌浏览器作为例子。打开网页,按下键盘上的F12键。点击Elements栏,选择body元素,如下图:
1.左边用半透明蓝色覆盖表示被选区域,仔细看左下角还有个标志显示元素名称和宽高。
2.中部内容就是Elements,即页面元素。看图可以发现我们选择了body元素
3.右侧区域为Style,即css样式,显示的是被选元素对应的css。这样就非常方便我们调试样式。
这里我们假设有个需求,需要右边头像的元素代码和css演示。我们不需要右键查看源代码(早期有些教程会使用这个方法)。
可以使用F12工具的左上角的指针工具
1.鼠标左键单击指针工具,单击后工具会变为蓝色状态
2.移动鼠标到头像上,你会发现自动出现蓝色半透明选框。会显示元