Chrome开发者工具里的一个隐藏技能:chrome://net-internals

简介: 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_tieimage.pngimage.pngimage.pngHow 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.


image.png(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.


image.pngimage.pngThe 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:


image.pngSo 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:


image.pngAnd it works now:image.pngBy 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 ).



image.pngThe total size 251661 matches exactly with the number I see in windows, perfect isn’t it?image.pngFurther 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.


相关文章
|
7月前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
67 1
|
18小时前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
29 0
|
18小时前
|
Web App开发 前端开发 JavaScript
关于 Angular template 文件在 Chrome 开发者工具调试器里的断点问题
关于 Angular template 文件在 Chrome 开发者工具调试器里的断点问题
23 7
|
18小时前
|
Web App开发 前端开发 JavaScript
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
5 0
|
18小时前
|
Web App开发 前端开发 JavaScript
Chrome 开发者工具的 sources 面板中的 Show ignore-listed frames 开关
Chrome 开发者工具的 sources 面板中的 Show ignore-listed frames 开关
6 0
|
18小时前
|
Web App开发 存储 缓存
Chrome 开发者工具 Network 里 Failed to load response data 提示消息的含义
Chrome 开发者工具 Network 里 Failed to load response data 提示消息的含义
214 0
|
18小时前
|
Web App开发 前端开发 JavaScript
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
32 0
|
18小时前
|
SQL 开发框架 .NET
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
38 0
|
18小时前
|
Web App开发 前端开发 JavaScript
使用 Chrome 开发者工具分析 UI5 Web 应用的性能
使用 Chrome 开发者工具分析 UI5 Web 应用的性能
35 0
|
6月前
|
Web App开发 SQL Linux
使用 Chrome 开发者工具获取网站的 LCP 数据
使用 Chrome 开发者工具获取网站的 LCP 数据
69 0

热门文章

最新文章