浏览器工具的使用

提示：谷歌浏览器，能不更新就不更新。因为更新到最新版本的谷歌浏览器。打开经过压缩后的代码格式化，行号没了。

 

浏览器是最能直观的看到网页情况以及网页加载内容的地方，我们可以按下F12来查看一些普通用户很少能使用到的工具。

 

其中, 最重要的Elements, Console, Sources, Network。

 

注意：Elements 不能作为抓包数据解析的标准，会不准，只能作为参考。一般使用 鼠标右键=> 显示网页源代码

Elements是我们实时的网页内容情况，注意非常容易混淆Elements以及页面源代码之间的关系。
注意：
1. 网页源代码是执行js脚本以及用户操作之前的服务器返回给我们最原始的内容。
2. Elements中看到的内容是js脚本以及用户操作之后的当时的页面显示效果。

你可以理解为，一个是老师批改之前的卷子，一个是老师批改之后的卷子，虽然都是卷子，但是内容是不一样的，而我们目前能够拿到的都是页面源代码。也就是老师批改之前的样子。这一点要格外注意

在Elements中我们可以使用左上角的小箭头，可以直观的看到浏览器中每一块位置对应的当前html状况，还是很贴心的

 

 

第二个窗口，Console，是用来查看程序员留下的⼀些打印内容, 以及日志内容的。我们可以在这里输入一些js代码自动执行。

 

第三个窗口，Source，这里能看到该网页打开时加载的所有内容，包括网页源代码、脚本、样式、图片等等全部内容

 

第四个窗口，Network，我们一般习惯称呼它为抓包工具。在这里，我们能看到当前页面加载的所有网络请求，以及请求的详细内容。这一点对我们爬虫来说至关重要。

Preserve log 一般都要勾上，记录页面跳转后，所有的请求记录，可以看到页面跳转前的请求 ，保留之前请求的内容。

XHR 是异步加载。