Chrome開發者工具裡的一個隱藏技能:chrome://net-internals

i042416發表於2020-07-11

During my holiday I was writing a small tool for fun, which extracts my personal posts from  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  tieba.baidu.com/i/i/my_


Chrome開發者工具裡的一個隱藏技能:chrome://net-internals


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.


Chrome開發者工具裡的一個隱藏技能:chrome://net-internals Chrome開發者工具裡的一個隱藏技能:chrome://net-internals Chrome開發者工具裡的一個隱藏技能:chrome://net-internals


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.


Chrome開發者工具裡的一個隱藏技能:chrome://net-internals


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


Chrome開發者工具裡的一個隱藏技能:chrome://net-internals


And here below are response header fields:


Chrome開發者工具裡的一個隱藏技能:chrome://net-internals


The return code 302 and location “ static.tieba.baidu.com/ ” 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:


Chrome開發者工具裡的一個隱藏技能:chrome://net-internals


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:


Chrome開發者工具裡的一個隱藏技能:chrome://net-internals


And it works now:


Chrome開發者工具裡的一個隱藏技能:chrome://net-internals


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 ).


Chrome開發者工具裡的一個隱藏技能:chrome://net-internals


The total size 251661 matches exactly with the number I see in windows, perfect isn’t it?


Chrome開發者工具裡的一個隱藏技能:chrome://net-internals


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.

要獲取更多Jerry的原創文章,請關注公眾號"汪子熙":

Chrome開發者工具裡的一個隱藏技能:chrome://net-internals


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2703942/,如需轉載,請註明出處,否則將追究法律責任。

相關文章