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：

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的原創技術文章，請關注公衆号"汪子熙"或者掃描下面二維碼: