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

抓取帖子用的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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

Chrome开发者工具关于网络请求的一个隐藏技能的更多相关文章

  1. HTTP入门(二):用Chrome开发者工具查看 HTTP 请求与响应

    HTTP入门(二):用Chrome开发者工具查看 HTTP 请求与响应 本文简单总结HTTP的请求与响应. 本文主要目的是对学习内容进行总结以及方便日后查阅. 详细教程和原理可以参考HTTP文档(MD ...

  2. 使用chrome开发者工具中的network面板测量网站网络性能

    前面的话 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析.使用 Network 面板测量网站网络性能.本文将详细介绍chrom ...

  3. Chrome开发者工具详解(5)-Application、Security、Audits面板

    Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...

  4. Chrome开发者工具详解(2)-Network面板

    Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...

  5. Chrome开发者工具详解(1)-Elements、Console、Sources面板

    Chrome开发者工具详解(1)-Elements.Console.Sources面板 Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Netwo ...

  6. Chrome开发者工具详解(1)

    Chrome开发者工具面板 面板上包含了Elements.Console.Sources.Network.Timeline.Profiles.Application.Security.Audits这些 ...

  7. 【译】在 Chrome 开发者工具中调试 node.js

    原文链接 : Debugging Node.js in Chrome DevTools 原文作者 : MATT DESLAURIERS 译文出自 : 掘金翻译计划 译文链接 : https://git ...

  8. Chrome开发者工具详解(2)

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板.Timeline面板.Profiles面板.Application面板.Sec ...

  9. 神器——Chrome开发者工具(一)

    这里我假设你用的是Chrome浏览器,如果恰好你做web开发,或者是比较好奇网页中的一些渲染效果并且喜欢折腾,那么你一定知道Chrome的开发者工具了.其实其他浏览器也有类似工具,比如Firefox下 ...

随机推荐

  1. Oracle常用数据库表操作

    配置数据库: user:orcl.passward:71911.Hao全局数据库名:orcl..解锁数据库用户名,SCOTT,SYSTEM,SYS,   PWD:71911.Hao输入sqlplus, ...

  2. 容器之vector

    #include <iostream> #include <vector> #include <string.h> #include <algorithm&g ...

  3. C++中的new用法总结

    前段时间复习面试的时候,看到这个问题经常有问到,我这个小白就看了些博客和书,总结一下. new可以说是个一个关键字,也可以说是一个运算符,并且可以被重载. 1.new operator 这个就是平时最 ...

  4. python: 使用matplotlib的pyplot绘制图表

    工作中需要观察数据的变化趋势,用python写了一段小程序来用显示简单图表,分享出来方便有同样需求的人,matplotlib是个很不错的库. #!encode=utf8 from matplotlib ...

  5. Gym 100962G Green Day (找规律)

    题意:你用k 个生成树构成一个完全图. 析:n 个点的完全图有n(n-1)/2个边,一个生成树有n-1个边,你有k 个生成树 即边数等于 K(n-1) ,即  n(n-1)/2 == k(n-1)   ...

  6. vector中插入pair

    我们知道map和multimap的作用,这两种数据类型在存储数据时,会根据pair<>的first成员进行排序,不同的时前者将不会插入对first成员重复的结构,后者可以.那如果我们只想存 ...

  7. Unity里的人物驱动/换装备/换武器/换衣服/卡通重定位(转)

    Unity里的人物驱动/换装备/换武器/换衣服/动画重定位 刚学的过程被这个问题困扰最多. 首先,基本的,大家都知道驱动人物需要骨架.绑骨的Mesh和动画(这三个要是不知道的话就得考虑看看计算机图形学 ...

  8. bzoj 1176 [Balkan2007]Mokia 【CDQ分治】

    W过大,很难在线维护,考虑离线算法 给每个操作加一个时间属性n,显然,对于n=i的询问,对它有影响的修改只在n<i中,所以可以CDQ(因为是按时间序读进来的,所以不用排序了 对于统计矩形和,可以 ...

  9. Swift typealias associatedType

    使用typealias为常用数据类型起一个别名, 一方面更容易通过别名理解该类型的用途, 另一方面还可以减少日常开发的代码量. typealias使用实例: // 网络请求常用回调闭包 typeali ...

  10. Hexo瞎折腾系列(6) - 将博客同时部署到Github和Coding

    前言 由于本人只是将Hexo博客同时部署到 Github 和 Coding.net ,所以这里只介绍怎么同时部署到这两个网站的pages. 之所以选择这两个网站,是因为国外用户可以访问 Github, ...