f12获取网页文本_细说网页开发者工具F12-前端开发利器一

网页开发者工具之 Elements

前言

写这篇文章的目的主要是为了帮助前端小白，学习使用浏览器自带的F12网页开发者工具，来快速定位调试分析问题、解决问题。当然这仅是作者的个人学习心得，有不足之处欢迎大家指点。由于篇幅有限，这篇文章仅介绍Elements。若觉得不错请关注作者的后续更新。

如何在F12工具中定位元素

这里拿我的博客作为网页、用Chrome谷歌浏览器作为例子。打开网页，按下键盘上的F12键。点击Elements栏，选择body元素，如下图：

1.左边用半透明蓝色覆盖表示被选区域，仔细看左下角还有个标志显示元素名称和宽高。

2.中部内容就是Elements，即页面元素。看图可以发现我们选择了body元素

3.右侧区域为Style，即css样式,显示的是被选元素对应的css。这样就非常方便我们调试样式。

这里我们假设有个需求，需要右边头像的元素代码和css演示。我们不需要右键查看源代码(早期有些教程会使用这个方法)。

可以使用F12工具的左上角的指针工具

1.鼠标左键单击指针工具，单击后工具会变为蓝色状态

2.移动鼠标到头像上，你会发现自动出现蓝色半透明选框。会显示元素标签和宽高

3.点击确认后，你会发现中部Elem