`
JerryWang_SAP
  • 浏览: 1025449 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

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

 

 
 
0
0
分享到:
评论

相关推荐

    chrome隐藏leetcode上锁题目js插件

    "chrome隐藏leetcode上锁题目js插件"就是针对这种情况开发的一个工具,它允许用户通过JavaScript脚本来隐藏或移除LeetCode页面上的锁定题目,提供了一个更纯净的练习环境。 这个插件的工作原理基于Chrome浏览器的...

    IE下JS调试工具

    5. **控制台日志**:IE的开发者工具还提供了一个控制台(Console),用于显示错误信息和使用`console.log()`等函数打印的信息。这对于排查错误和调试信息的输出非常实用。 6. **性能分析**:除了调试功能外,开发者...

    JavaScript各种主流浏览器的调试大全(定稿)

    此外,它还有一个专门的组件Firecookie,用于调试页面上的Cookie。 Chrome浏览器的内置开发者工具(DevTools)也是调试JavaScript的高效工具。按F12或右键点击页面选择“检查”可以打开DevTools。它提供了元素检查...

    JS前端信息收集工具包

    再者,findsomething是一个Chrome浏览器插件,它增强了前端信息收集的能力。作为一款浏览器扩展,findsomething可以直接在浏览器环境中运行,无需离开当前页面。它可以自动探测和收集页面上的各种信息,如DOM结构、...

    手把手教你写电商爬虫-第三课 实战尚妆网AJAX请求处理和内容提取

    通过Chrome开发者工具,我们可以观察到异步请求并捕获对应的URL。在此基础上,我们可以进一步分析这个请求的返回数据,通过特定的jsonpath提取我们需要的信息。最后,通过attachedUrl方法将这些关联请求关联起来,...

    视频真实地址解析

    总的来说,“视频真实地址解析”是一个结合了网络协议理解、视频编码知识、浏览器技术以及网络抓包技能的综合性问题。通过使用这类工具,用户可以突破在线视频平台的限制,实现个性化的需求,比如离线观看、跨设备...

    PHP实例开发源码—逸尘视频解析简约版 php版.zip

    开发者可能需要分析视频页面的HTML源代码,找出隐藏的播放URL,或者使用网络调试工具(如Chrome的开发者工具)来追踪网络请求,找出获取视频数据的关键步骤。 在"132687610914099940"这个文件中,虽然没有明确的...

    Python爬虫谷歌Chrome F12抓包过程原理解析

    Python爬虫在获取网络数据时,常常需要借助于浏览器的开发者工具进行辅助,尤其是谷歌Chrome浏览器的F12功能。...因此,深入学习和使用Chrome开发者工具对于Python爬虫开发者来说,是一项必不可少的技能。

    python爬虫小项目与web逆向

    1. **浏览器开发者工具**:Chrome或Firefox的开发者工具可以查看网络请求、调试JavaScript、模拟用户行为等。 2. **抓包工具**:如Wireshark、Fiddler、Charles,捕获网络流量,揭示隐藏的API调用和数据传输细节。 3...

    错位展示top按钮组

    大多数现代浏览器都内置了开发者工具,如Chrome的DevTools,可以用来检查元素样式、调试JavaScript、分析网络请求等,对解决这类问题非常有帮助。 在压缩包文件的“top”列表中,虽然没有具体的文件内容,但可以...

    pdd (拼多多) 爬虫 js 解密 anti_content 参数解密及全站抓取代码思路实现.zip

    一种常见的方法是使用浏览器的开发者工具,监控网络请求,查看参数是如何被计算出来的。 解密过程可能涉及以下步骤: 1. **捕获网络请求**:使用Chrome DevTools或其他类似工具,观察页面加载过程中发出的HTTP请求...

    有道翻译sign解密,js逆向资源

    1. **代码抓取**:使用开发者工具(如Chrome DevTools)或网络爬虫抓取包含sign生成逻辑的JavaScript源代码。 2. **代码分析**:通过阅读和理解代码,找出与sign计算相关的函数或变量。 3. **逻辑重构**:模拟代码中...

    jQuery在线资源和开发工具.rar

    2. **浏览器开发者工具**:Chrome DevTools和Firefox Developer Tools提供DOM操作、性能分析等功能,是调试jQuery代码的利器。 3. **jQuery插件**:jQuery生态系统中有大量插件,如Bootstrap、jQuery UI等,丰富了...

    抓取51JOB公司数据

    通常,我们需要使用开发者工具(如Chrome的DevTools)观察网络请求和HTML源码,找出数据所在的位置。例如,公司名称可能在某个特定的HTML标签中,而地址和电话可能隐藏在JavaScript变量或Ajax响应中。 接着,我们要...

    HTTP Analyzer

    HTTP Analyzer是一款强大的网络协议分析工具,专用于捕获、分析和调试HTTP/HTTPS通信。它为开发者、系统管理员以及Web性能优化专家提供了深入洞察HTTP交互的窗口,帮助他们理解和解决与网络请求相关的问题。 该软件...

    insdl:Insdl是用于视频下载的Chrome扩展程序,可在Instagram网站上使用

    1. **Chrome开发者工具**:Chrome浏览器内置的开发者工具是调试内容脚本和理解页面结构的关键工具。 2. **JSON格式**:扩展的配置信息通常存储在JSON文件中,包括权限请求、图标设置等。 3. **打包与发布**:...

    亲测可用H5麻将 Cocos Creator 服务端Nodejs 含视频教程

    这是一个关于使用Cocos Creator开发H5麻将游戏的项目,其中包括了服务端和客户端的完整代码,以及相关的视频教程。这个项目使用了Node.js作为服务端编程语言,Cocos Creator作为H5游戏开发工具,体现了现代Web游戏...

    jQuery学习资料

    使用开发者工具如Chrome DevTools或Firefox Developer Tools,能帮助我们更好地调试和优化jQuery代码。 总结,jQuery是前端开发的重要工具,它的易用性和高效性使得开发者能快速构建交互丰富的网页应用。通过深入...

    prototype1.6 中文版文档

    Prototype是Web开发中的一个强大工具,它扩展了JavaScript的核心功能,提供了更高效的DOM操作、对象扩展和Ajax交互等特性。该文档旨在帮助开发者深入理解和充分利用Prototype 1.6版本的功能。 在《Prototype 1.6 ...

    鲜花网网页制作

    同时,为了便于调试,开发者会使用浏览器的开发者工具,如Chrome的DevTools,来检查和修改网页的元素样式,查看网络请求,以及定位和修复JavaScript错误。 在学习过程中,可以参考各种在线教程和资源,例如W3...

Global site tag (gtag.js) - Google Analytics