1. 程式人生 > >爬蟲必備工具 —— Chrome 開發者工具

爬蟲必備工具 —— Chrome 開發者工具

當我們爬取不同的網站是,每個網站頁面的實現方式各不相同,我們需要對每個網站都進行分析。那是否有一些通用的分析方法?我分享下自己爬取分析的“套路”。在某個網站上,分析頁面以及抓取資料,我用得最多的工具是 Chrome 開發者工具

Chrome 開發者工具是一套內置於 Google Chrome 中的 Web 開發和除錯工具,可用來對網站進行迭代、除錯和分析。因為國內很多瀏覽器核心都是基於 Chrome 核心,所以國產瀏覽器也帶有這個功能。例如:UC 瀏覽器、QQ 瀏覽器、360 瀏覽器等。

接下來,我們來看看 Chrome 開發者工具一些比較牛逼的功能。

01元素面板

通過元素(Element)面板,我們能檢視到想抓取頁面渲染內容所在的標籤、使用什麼 CSS 屬性(例如:class="middle")等內容。例如我想要抓取我知乎主頁中的動態標題,在網頁頁面所在處上右擊滑鼠,選擇“檢查

”,可進入 Chrome 開發者工具的元素面板

通過這種方法,我們能快速定位出頁面某個DOM 節點,然後可以提取出相關的解析語句。滑鼠移動到節點,然後右擊滑鼠,選擇 “Copy”,能快速複製出 Xpath 、CSS elector 等內容解析庫的解析語句。

 

02網路面板

網路(Network)面板記錄頁面上每個網路操作的相關資訊,包括詳細的耗時資料、HTTP 請求與響應標頭和 Cookie,等等。這就是我們通常說的抓包。

其中的 Filters 窗格,我經常使用其來過濾出一些 HTTP 請求,例如過濾出使用 Ajax 發起的非同步請求、圖片、視訊等。

最大的窗格叫 Requests Table,此表格會列出了檢索的每一個 HTTP 請求。 預設情況下,此表格按時間順序排序,最早的資源在頂部。點選資源的名稱可以顯示更多資訊。

  • Headers 是顯示 HTTP 請求的 Headers,我們通過這個能看到請求的方式,以及攜帶的請求引數等。

  • Preview 是請求結果的預覽。一般用來檢視請求到的圖片,對於抓取圖片網站比較給力。

  • Response 是請求返回的結果。一般的內容是整個網站的原始碼。如果該請求是非同步請求,返回的結果內容一般是 Json 文字資料。

  • Cookies

     能看到請求攜帶的 Cookies 以及伺服器返回的 Cookies。有時候是需要使用到 Response 的 Cookies。例如,某個頁面必須登入才能看到。