chrome的開發者工具的眾多功能中，最炫的要數network這一項了，下面通過一個例項，來說明它有多好用:

a)開啟瀏覽器，在百度圖片輸入關鍵字【昆蟲】，如下圖

因為百度圖片具有懶載入的特性，當頁面向下滾動時，會從伺服器載入新的圖片資源。而這一過程，通常是用Ajax實現的。因此我們推測，圖片可以通過傳送ajax請求（本質上就是http請求）來得到

b)在瀏覽器介面，滑鼠右鍵選擇【審查】，開啟chrome開發者工具

c) 選擇【network】標籤頁，分析網路請求

d)重新重新整理頁面，並向下滾動頁面，觸發懶載入。涉及到的網路請求如下圖所示，我們重點關注xhr請求，因為有很大可能，就是請求圖片資訊的ajax請求

e) 我們注意到第一個xhr請求的地址，是logininfo，所以不太可能是請求圖片。所以我們將焦點放到第二和第三個xhr請求上。點選第二個xhr請求，具體資訊如下所示

從上圖資訊可以發現，這個xhr請求中有一些關於搜尋相關的引數，【queryWord=%E6%98%86%E8%99%AB】通過將資訊進行URL解碼，得出的結果為【queryWord=昆蟲】，證明這個就是我們所要的，取得圖片的xhr請求。

解碼結果如圖

複製整個xhr請求的url地址，貼上到瀏覽器的位址列中，得到了該請求的響應資料。資料片段如下圖

我們注意到，資料中有一個data陣列，並且每個元素中，都有一個objURL的屬性，其值為：

”ippr_z2C$qAzdH3FAzdH3Frtv_z&e3Bcbrtv_z&e3Bv54AzdH3FcbrtvAzdH3F8cAzdH3Fn9AzdH3FbcAzdH3FddbcbPICRhY_8ad9_z&e3B3r2”

可以推測出，其值為加密後的url，具體加密後和加密前對應關係如下所示：

當然，上面的結果，也是通過chrome的原始碼檢視，得到的。

看，在chrome 開發者工具的窺視下，我們的頁面，彷彿脫去了外衣，沒有一絲神祕。

來源：千鋒HTML5