Chrome開發者工具關於網路請求的一個隱藏技能

這個隱藏技能的背景是，最近出於學習目的，我寫了一個百度貼吧的網路爬蟲，專門爬取一些指定主題的貼吧帖子。

抓取帖子用的JavaScript函式如下：

function getPostByAJAX(requestURL){   var html = $.ajax({         url: requestURL,         async: false}).responseText;         return html;
}

就是一個非常簡單的AJAX請求：

傳入該函式的輸入引數requestURL的值為： 

上面的url，我直接在瀏覽器裡訪問可以正常工作，返回47.2KB大小的資料。

然而當我用AJAX函式訪問該url時，在Chrome開發者工具裡遇到如下錯誤：

然而，這個錯誤沒有任何明細資訊，我沒有線索去排錯。

於是，就有了本文這個Chrome開發者工具的隱藏技能的用武之地。

在Chrome位址列開啟:  chrome://net-internals

點選Event標籤頁：

再回到我的百度貼吧爬蟲網頁，該網頁發起AJAX請求，按F5重新整理後傳送一個新的請求，然後回到Chrome開發者工具。

該AJAX請求的明細就詳細顯示出來了。找到我關心的url：

chrome://net-internals 這個介面顯示的網路請求的明細比Network標籤頁裡要詳細得多：

在響應頭欄位裡發現了引起這個錯誤的一些線索：

從上面的截圖發現，HTTP響應狀態欄位為302，location欄位為 “ ” 。這兩條線索給了我提示：這個錯誤一定和百度網站的登陸狀態處理相關：我使用的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的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼: