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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
Chrome开发者工具关于网络请求的一个隐藏技能的更多相关文章
- HTTP入门(二):用Chrome开发者工具查看 HTTP 请求与响应
HTTP入门(二):用Chrome开发者工具查看 HTTP 请求与响应 本文简单总结HTTP的请求与响应. 本文主要目的是对学习内容进行总结以及方便日后查阅. 详细教程和原理可以参考HTTP文档(MD ...
- 使用chrome开发者工具中的network面板测量网站网络性能
前面的话 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析.使用 Network 面板测量网站网络性能.本文将详细介绍chrom ...
- Chrome开发者工具详解(5)-Application、Security、Audits面板
Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...
- Chrome开发者工具详解(2)-Network面板
Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...
- Chrome开发者工具详解(1)-Elements、Console、Sources面板
Chrome开发者工具详解(1)-Elements.Console.Sources面板 Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Netwo ...
- Chrome开发者工具详解(1)
Chrome开发者工具面板 面板上包含了Elements.Console.Sources.Network.Timeline.Profiles.Application.Security.Audits这些 ...
- 【译】在 Chrome 开发者工具中调试 node.js
原文链接 : Debugging Node.js in Chrome DevTools 原文作者 : MATT DESLAURIERS 译文出自 : 掘金翻译计划 译文链接 : https://git ...
- Chrome开发者工具详解(2)
Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板.Timeline面板.Profiles面板.Application面板.Sec ...
- 神器——Chrome开发者工具(一)
这里我假设你用的是Chrome浏览器,如果恰好你做web开发,或者是比较好奇网页中的一些渲染效果并且喜欢折腾,那么你一定知道Chrome的开发者工具了.其实其他浏览器也有类似工具,比如Firefox下 ...
随机推荐
- http的安全方法和幂等性
最近在研究http,看到http的安全方法和幂等性部分,不太明白,尤其是"post方法是非幂等的"不理解,进过查资料,找到以下两篇有价值的文章,特转过来! 理解HTTP幂等性 转自 ...
- 【USACO 2006 November Gold】Corn Fields
[题目链接] 点击打开链接 [算法] 状压DP [代码] #include<bits/stdc++.h> using namespace std; #define MAXN 12 #def ...
- 【USACO】The Cow Prom
[题目链接] 点击打开链接 [算法] tarjan求强连通分量 [代码] #include<bits/stdc++.h> #define MAXN 20005 using namespac ...
- CoreOS,CoreOS,一款 Linux 容器发行版
CoreOS,一款最新的 Linux 发行版本,支持自动升级内核软件,提供各集群间配置的完全控制. 关于使用哪个版本的 Linux 服务器系统的争论,常常是以这样的话题开始的: 你是喜欢基于 Red ...
- Eclipse中删除导入的jar包,总是报错?已解决!
参考百度经验 http://jingyan.baidu.com/article/851fbc37c7512e3e1f15abec.html
- hdoj1074【A的无比爆炸】
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊,一开始我就不知道怎么写,然后看了题解是状压DP,后来去看了看状压DP也就这样嘛,但是难点,可以说是不熟悉的地方吧...如下: 第一.我们能很快的知道状压DP的原理: ...
- MySQL与MongoDB的区别
一.MongoDB简介 什么是MongoDB ?MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.在高负载的情况下,添加更多的节点,可以保证服务器性能.MongoDB 旨 ...
- Json----Jackson 下载地址
下载地址: http://repo1.maven.org/maven2/com/fasterxml/jackson/
- Analyzing Polyline CodeForces - 195D
Analyzing Polyline CodeForces - 195D 题意:有n个函数,第i个函数yi(x)=max(ki*x+bi,0).定义函数s(x)=y1(x)+y2(x)+...+yn( ...
- sql基础语法-创建表和约束
创建数据库表 USE SQL2016 IF OBJECT_ID('dbo.Employees','U') IS NOT NULL DROP TABLE dbo.Employees; Create TA ...