这个隐藏技能的背景是,最近出于学习目的,我写了一个百度贴吧的网络爬虫,专门爬取一些指定主题的贴吧帖子。
抓取帖子用的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 开发者工具中文手册
Chrome开发者工具的功能很强大,要了解其所有功能最好是查看官方文档,但我们访问官方文档并不是很方便,因此这里将官方的英文文档打包成了CHM格式,可以下载到本机方便查阅,为了在CHM阅读器中接近原文显示效果和不...
谷歌调试移动端工具chrome-inspect离线开发者工具包@194530_@196351.rar
通过Chrome开发者工具调试Django应用
Google Chrome 开发者版.zip
Chrome开发者工具指南.介绍Chrome开发。特么利于前端开发
由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿!
web developer(Chrome开发者工具扩展插件)是一款可以安装在谷歌浏览器上的chrome web developer轻量级开发插件,安装使用web developer插件可以让您的开发变得更加顺畅,需要的朋友欢迎前来下载使用! 插件概述: ...
Stetho 调试Android应用的桥梁,使得可以利用Chrome开发者工具进行调试
chrome浏览器-vue开发者工具
轻松玩转chrome开发者模式
彻底禁用Chrome插件停用开发者模式提示插件,下载后将dll文件放在和Chrome.exe同目录然后重启浏览器即可。
这是vue3的开发者工具。使用:解压,然后拖拽到浏览器开发者工具里面即可
该工具为windows系统下Chrome浏览器伪装android浏览器和iphone浏览器的dll文件,覆盖相应的dll到chrome相应的dll目录下即可,可以伪装成手机浏览器访问网页,可应用web开发者调试网页。
最新微信小程序开发工具。微信web开发者工具是一款...微信web开发者工具采用的是集成Chrome DevTools和基本的移动调试模块,小伙伴们可以借助微信web开发者工具更方便、安全的开发或是针对调试基于微信开发的网页代码。
主要给大家介绍了chrome开发者工具-timeline的相关资料,文中介绍的非常详细,对大家的学习或者工作具有一定的参考价值,需要的朋友们下面来一起学习学习吧。
作为这模块的第篇章,我们主要聚焦的源头的源头和络数据的接收络数据的接收,这些发送和接收的数据都能体现在开发者具的络板上。不过为了你能更好地理解和掌握,我们会先对
chrome扩展插件获取ajax请求记录
apollo-client-devtools, Chrome 客户端开发者工具的扩展 阿波罗客户端 Devtools下载下载 Chrome | 下载 Firefox 。这里存储库包含用于 Chrome & Firefox的Apollo DevTools扩展。如果你运行的是rpg客户端 2.0,那么...
F12或者通过chrome浏览器【菜单】→【更多工具】→【开发者工具】,可以看到浏览器缓存各种文件。如果打开没有看到数据,可以F5刷新一下网页。