爬蟲分析利器:谷歌Chrome F12抓包分析

王平發表於2018-12-02

瀏覽器開啟網頁的過程就是爬蟲獲取資料的過程,兩者是一樣一樣的。瀏覽器渲染的網頁是豐富多彩的資料集合,而爬蟲得到的是網頁的原始碼html。

爬蟲利用瀏覽器抓包分析URL

有時候,我們不能在網頁的html程式碼裡面找到想要的資料,但是瀏覽器開啟的網頁上面卻有這些資料。這就是瀏覽器透過ajax技術非同步載入(偷偷下載)了這些資料。

小猿們禁不住要問:那麼該如何看到瀏覽器偷偷下載的那些資料呢?

答案就是谷歌Chrome瀏覽器的F12快捷鍵,也可以透過滑鼠右鍵選單“檢查”(Inspect)開啟Chrome自帶的開發者工具,開發者工具會出現在瀏覽器網頁的左側或者是下面(可調整),它的樣子就是這樣的:

chrome瀏覽器開發者工具f12

讓我們簡單瞭解一下它如何使用:

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

  • 左上角箭頭 用來點選檢視網頁的元素
  • 第二個手機、平板圖示是用來模擬移動端顯示網頁
  • Elements 檢視渲染後的網頁標籤元素
    提醒 是渲染後(包括非同步載入的圖片、資料等)的完整網頁的html,不是最初下載的那個html。
  • Console 檢視JavaScript的console log資訊,寫網頁時比較有用
  • Sources 顯示網頁原始碼、CSS、JavaScript程式碼
  • Network 檢視所有載入的請求,對爬蟲很有幫助

後面的暫且不管。

谷歌Chrome抓包:2. 重要區域

圖中紅框的兩個按鈕比較有用,編號為2的是清空請求記錄;編號3的是保持記錄,這在網頁有重定向的時候很有用
圖中綠色區域就是載入完整個網頁,瀏覽器的全部請求記錄,包括網址、狀態、型別等。寫爬蟲時,我們就要在這裡尋找線索,提煉金礦。
最下面編號為4的紅框顯示了載入這個網頁,一共請求了181次,數量是多麼地驚人,讓人不禁心疼起瀏覽器來。

點選一條請求的網址,右側就會出現新的視窗顯示該條請求的相信資訊:

Chrome請求詳情

圖中左邊紅框就是點選的請求網址;綠框就是詳情視窗。
詳情視窗包括,Headers(請求頭)、Preview(預覽響應)、Response(伺服器響應內容)和Timing(耗時)。
Preview、Response 幫助我們檢視該條請求是不是有爬蟲想要的資料;
Headers幫助我們在爬蟲中重建http請求,以便爬蟲得到和瀏覽器一樣的資料。

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

還有最後一篇科普文章,我們就進入正題啦,下一篇我們講:
Python為什麼適合用來寫網路爬蟲

猿人學banner宣傳圖

我的公眾號:猿人學 Python 上會分享更多心得體會,敬請關注。

***版權申明:若沒有特殊說明,文章皆是猿人學 yuanrenxue.com 原創,沒有猿人學授權,請勿以任何形式轉載。***

相關文章