瀏覽器打開網(wǎng)頁(yè)的過(guò)程就是爬蟲獲取數(shù)據(jù)的過(guò)程，兩者是一樣一樣的。瀏覽器渲染的網(wǎng)頁(yè)是豐富多彩的數(shù)據(jù)集合，而爬蟲得到的是網(wǎng)頁(yè)的源代碼html。

有時(shí)候，我們不能在網(wǎng)頁(yè)的html代碼里面找到想要的數(shù)據(jù)，但是瀏覽器打開的網(wǎng)頁(yè)上面卻有這些數(shù)據(jù)。這就是瀏覽器通過(guò)ajax技術(shù)異步加載（偷偷下載）了這些數(shù)據(jù)。

那么該如何看到瀏覽器偷偷下載的那些數(shù)據(jù)呢？

答案就是谷歌Chrome瀏覽器的F12快捷鍵，也可以通過(guò)鼠標(biāo)右鍵菜單“檢查”（Inspect）打開Chrome自帶的開發(fā)者工具，開發(fā)者工具會(huì)出現(xiàn)在瀏覽器網(wǎng)頁(yè)的左側(cè)或者是下面（可調(diào)整），它的樣子就是這樣的：

谷歌Chrome抓包:1. 最上面一行菜單

• 左上角箭頭 用來(lái)點(diǎn)擊查看網(wǎng)頁(yè)的元素
• 第二個(gè)手機(jī)、平板圖標(biāo)是用來(lái)模擬移動(dòng)端顯示網(wǎng)頁(yè)
• Elements 查看渲染后的網(wǎng)頁(yè)標(biāo)簽元素
• 提醒 是渲染后（包括異步加載的圖片、數(shù)據(jù)等）的完整網(wǎng)頁(yè)的html，不是最初下載的那個(gè) html。
• Console 查看JavaScript的console log信息，寫網(wǎng)頁(yè)時(shí)比較有用
• Sources 顯示網(wǎng)頁(yè)源碼、CSS、JavaScript代碼
• Network 查看所有加載的請(qǐng)求，對(duì)爬蟲很有幫助
• 后面的暫且不管。

谷歌Chrome抓包:2. 重要區(qū)域

圖中紅框的兩個(gè)按鈕比較有用，編號(hào)為2的是清空請(qǐng)求記錄；編號(hào)3的是保持記錄，這在網(wǎng)頁(yè)有重定向的時(shí)候很有用

圖中綠色區(qū)域就是加載完整個(gè)網(wǎng)頁(yè)，瀏覽器的全部請(qǐng)求記錄，包括網(wǎng)址、狀態(tài)、類型等。寫爬蟲時(shí)，我們就要在這里尋找線索，提煉金礦。

最下面編號(hào)為4的紅框顯示了加載這個(gè)網(wǎng)頁(yè)，一共請(qǐng)求了39次。

點(diǎn)擊一條請(qǐng)求的網(wǎng)址，右側(cè)就會(huì)出現(xiàn)新的窗口顯示該條請(qǐng)求的相信信息：

點(diǎn)擊一條請(qǐng)求的網(wǎng)址，右側(cè)就會(huì)出現(xiàn)新的窗口顯示該條請(qǐng)求的相信信息：

圖中左邊紅框就是點(diǎn)擊的請(qǐng)求網(wǎng)址；綠框就是詳情窗口。

詳情窗口包括，Headers（請(qǐng)求頭）、Preview（預(yù)覽響應(yīng)）、Response（服務(wù)器響應(yīng)內(nèi)容）和Timing（耗時(shí)）。

Preview、Response 幫助我們查看該條請(qǐng)求是不是有爬蟲想要的數(shù)據(jù)；

Headers幫助我們?cè)谂老x中重建http請(qǐng)求，以便爬蟲得到和瀏覽器一樣的數(shù)據(jù)。

了解和熟練使用Chrome的開發(fā)者工具，小猿們就如虎添翼可以順利寫出自己的爬蟲啦。