js抓取网页内容(MicrosoftEdge浏览器和360极速浏览器中的截图为例对照图片 )

　　js抓取网页内容(MicrosoftEdge浏览器和360极速浏览器中的截图为例对照图片

)

　　最近很多同学问我浏览器的F12是什么？它是干什么用的？为了解决大家的疑惑，特地写了这个文章，总结一下F12的使用。

　　以下讲解主要以微软Edge浏览器和360极速浏览器截图为例。 （注：以下截图中，中文截图为Microsoft Edge浏览器截图，英文截图为360度浏览器截图。）

　　推荐大家使用360极速浏览器，抓包更好更全面（不同于360浏览器）；如果你英文不好，那就用微软Edge或者其他浏览器吧。

　　F12：可以打开浏览器的开发者工具，主要收录网页的源代码、请求数据和响应数据。

　　打开方法：打开浏览器，然后按快捷键F12或FN+F12打开“开发者工具”。

　　下图为浏览器开发者工具（中文）的主要标签/功能：

　　下图中，标签的中英文对比图：

　　下面一一解释每个标签的含义

　　1.元素

　　我们在做 web 测试的时候，并没有过多关注 Elements 标签中的内容。除了查看页面元素属性和进行修改之外，其余的都不是很有用。

　　2.控制台

　　在Console标签中，可以查看页面的错误信息，打印调试信息（console.log()），编写一些测试脚本，作为JavaScript API查看；您也可以在控制台中查看它。有哪些方法和属性，

　　下图显示错误信息：

　　在日常的测试工作中，我经常使用Console标签中的内容来帮助定位bug——看看前端JS或者CSS有没有报错，然后再去前端开发...

　　在控制台打印一些调试信息，console.log()的使用如下：

　　3.来源

　　Sources标签中，是网页实现的一部分源码，主要是JS文件、CSS文件、图片等，如下图，是JS文件的源码：

　　下图是CSS文件的源代码：

　　4. 网络 - F12 捕获

　　这个Network标签中的内容是常用的测试用...

　　每次在web端发现bug，第一反应就是赶紧打开：F12看看能不能抓到数据。

　　这个网络真的好用，你可以在子标签中捕获请求数据和响应数据。

　　如下图，Headers标签中，抓取百度搜索的请求数据（分别在Edge和360浏览器中抓取）：

　　如下图，在Response标签中，抓取百度搜索的响应数据（分别在Edge和360浏览器中抓取）：