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