Chrome开发者工具关于网络请求的一个隐藏技能

这个隐藏技能的背景是，最近出于学习目的，我写了一个百度贴吧的网络爬虫，专门爬取一些指定主题的贴吧帖子。

抓取帖子用的JavaScript函数以下：

function getPostByAJAX(requestURL){

   var html = $.ajax({

         url: requestURL,

         async: false}).responseText;

         return html;

}

就是一个很是简单的AJAX请求：

传入该函数的输入参数requestURL的值为： http://tieba.baidu.com/i/i/my_tie

上面的url，我直接在浏览器里访问能够正常工做，返回47.2KB大小的数据。

然而当我用AJAX函数访问该url时，在Chrome开发者工具里遇到以下错误：

然而，这个错误没有任何明细信息，我没有线索去排错。

因而，就有了本文这个Chrome开发者工具的隐藏技能的用武之地。

在Chrome地址栏打开: chrome://net-internals

点击Event标签页：

再回到个人百度贴吧爬虫网页，该网页发起AJAX请求，按F5刷新后发送一个新的请求，而后回到Chrome开发者工具。

该AJAX请求的明细就详细显示出来了。找到我关心的url：http://tieba.baidu.com/i/i/my_tie

chrome://net-internals这个界面显示的网络请求的明细比Network标签页里要详细得多：

在响应头字段里发现了引发这个错误的一些线索：

从上面的截图发现，HTTP响应状态字段为302，location字段为 “http://static.tieba.baidu.com/tb/error.html?ErrType=1” 。这两条线索给了我提示：这个错误必定和百度网站的登录状态处理相关：我使用的url不支持匿名访问。

我在浏览器里访问该url可以成功，由于个人Cookie在起做用。

Goole了一下，发现了解决方案。在AJAX的请求参数中添加:

xhrFields:{

withCredentials: true

}

如此一来，能够将个人cookie和AJAX请求一齐发送给百度服务器。

加上该参数后，请求就可以获得指望的响应了。

使用Chrome开发者工具这个隐藏技能，咱们还能观察到一些其余的平时很难发现的细节。

好比个人AJAX请求经过本地的jQuery库文件发出，个人HTML代码里直接引用了本地文件jquery1.7.1.js。在运行时，这个jquery1.7.1.js文件须要被加载到内存中。

使用这个隐藏技能，我如今能观察到jquery1.7.1.js是经过分块的方式被读入到内存中的，参考如今URL_REQUEST_JOB_BYTES_READ的参数：byte_count = 32768。总共分了8块读取，最后1块由于尺寸不满32768，只读了剩下的22285字节。

这8块的总字节数251661正好是jquery1.7.1.js的字节数。由此再次证实，chrome://net-internals提供的功能比Network标签页里的要强大。

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码: