Chrome开发者工具里的一个隐藏技能:chrome://net-internals
During my holiday I was writing a small tool for fun, which extracts my personal posts from http://www.baidu.com for further analysis.
I am using AJAX in jQuery to perform a synchronous call to fetch html source code of given url specified by argument requestURL.、
function getPostByAJAX(requestURL){ var html = $.ajax({ url: requestURL, async: false}).responseText; return html; }
The requestURL I am using is http://tieba.baidu.com/i/i/my_tie
However when I try to access it via my JavaScript code above, it failed.
And Chrome development tool didn’t give me enough information for trouble shooting.
How to deal with this issue then? Then I found the useful tool from Google: chrome://net-internals
Now let’s continue to trouble shoot with this tool.
(1) type chrome://net-internals in Chrome address bar, press enter key.
Then click Event hyperlink.
(2) Go to my own html page which will send AJAX request via jQuery, click F5 to send a new request, then go back to Chrome tool.
Now I have found the trace entry for the sent request.
Here below is the request detail which contains much more information compared with the one in Chrome development Tool-Network tab.
And here below are response header fields:
The return code 302 and location “http://static.tieba.baidu.com/tb/error.html?ErrType=1” give me a reminder that this issue might be related to logon state of BAIDU website, since I would like to return my personal information, it makes sense that the url can only return personal data if cookie is available or user credential is specified ( not supported by BAIDU in this case ).
In order to verify my assumption, I request the url directly in Chrome and check its request header fields this time, and yes, the cookie field is there:
So now the question is, how to send my cookie information together with the AJAX call in JavaScript code?
I found this article from Google.
According to the article, I add the following code in my function:
And it works now:
By the way, via this tool I can also figure out how the jQuery library file jquery1.7.1.js stored in local laptop is loaded by Chrome.
Chrome reads this file by chunks with size 32768 ( the file consists of 8 chunks ).
The total size 251661 matches exactly with the number I see in windows, perfect isn’t it?
Further reading
For more tips I gained during my daily work about Chrome development tools, please refer to this blog Chrome Development Tool tips used in my daily work.
本文来自云栖社区合作伙伴“汪子熙”,了解相关信息可以关注微信公众号"汪子熙"。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
使用Chrome开发者工具研究JavaScript的垃圾回收机制
I use the following simple JavaScript code to illustrate: var JerryTestArray = []; (function(){ for( var i = 0; i < 100; i++){ JerryTestArray[i] = document.createElement("div"); } })(); Create a new empty tab in your Chrome, and first create a snapshot with empty heap status by click “Take Snapshot” button: The Snapshot1 is generated. Now switch to tab Console, paste the JavaScript code and execute it in console. And switch to Profiles tab again to make the second snapshot: Once done, select ...
- 下一篇
JavaScript ES6 Fetch API时需要注意的一个Cookie问题
When I am doing a test of comparison between Stateful and Stateless BSP application ( mentioned in blog Stateless and Stateful – Different behavior in application side ), I meet with a strange issue. The conclusion is stateful BSP application will handle request sequentially. Suppose in client I send two request A and B to server. Request A takes 3 seconds to finish and B 2 seconds. The request is sent via jQuery API.It means for stateful application, I will observe the following timeline in Chr...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS8编译安装MySQL8.0.19
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS7,CentOS8安装Elasticsearch6.8.6
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- CentOS关闭SELinux安全模块
- MySQL8.0.19开启GTID主从同步CentOS8
- 设置Eclipse缩进为4个空格,增强代码规范
- SpringBoot2整合Redis,开启缓存,提高访问速度