Chrome開發者工具，爬蟲必備，解決一半的問題

網上爬蟲的教程實在太多了，知乎上搜一下，估計能找到不下一百篇。你們樂此不疲地從互聯網上抓取着一個又一個網站。但只要對方網站一更新，極可能文章裏的方法就再也不有效了。

每一個網站抓取的代碼各不相同，不過背後的原理是相通的。對於絕大部分網站來講，抓取的套路就那麼一些。今天這篇文章不談任何具體網站的抓取，只來講一個共性的東西：

如何經過 Chrome 開發者工具 尋找一個網站上特定數據的抓取方式。

（我這裏演示的是 Mac 上的英文版 Chrome，Windows 中文版的使用方法是同樣的。）

> 查看網頁源代碼

在網頁上右擊鼠標，選擇「 查看網頁源代碼 」（ View Page Source ），就會在新標籤頁中顯示這個 URL 對應的 HTML 代碼文本。

此功能並不算是「開發者工具」一部分，但也很經常使用。這個內容和你直接經過代碼向此 URL 發送 GET 請求獲得的結果是同樣的（不考慮權限問題）。若是在這個源代碼頁面上能夠搜索到你要內容，則能夠按照其規則，經過 正則、bs四、xpath 等方式對文本中的數據進行提取。

不過，對於不少異步加載數據的網站，從這個頁面上並不能搜到你要的東西。或者由於權限、驗證等限制，代碼中獲取到的結果和頁面顯示不一致。這些狀況咱們就須要更強大的開發者工具來幫忙了。

> Elements

在網頁上右擊鼠標，選擇「 審查元素 」（ Inspect ），可進入 Chrome 開發者工具的 元素選擇器 。在工具中是 Elements 標籤頁。

Elements 有幾個功能：

• 選擇元素 ：經過鼠標去選擇頁面上某個元素，並定位其在代碼中的位置。
• 模擬器 ：模擬不一樣設備的顯示效果，且能夠模擬帶寬。
• 代碼區 ：顯示頁面代碼，以及選中元素對應的路徑
• 樣式區 ：顯示選中元素所受的 CSS 樣式影響

從 Elements 工具裏定位數據比咱們前面直接在源代碼中搜索要方便，由於你能夠清楚看到它所處的元素結構。但這邊特別提醒的是：

Elements 裏看到的代碼不等於請求網址拿到的返回值 。

它是網頁通過瀏覽器渲染後最終呈現出的效果，包含了異步請求數據，以及瀏覽器自身對於代碼的優化改動。因此，你並不能徹底按照 Elements 裏顯示的結構來獲取元素，那樣的話極可能得不到正確的結果。

> Network

在開發者工具裏選擇 Network 標籤頁就進入了網絡監控功能，也就是常說的「 抓包 」。

這是爬蟲所用到的最重要功能。它主要解決兩個問題：

1. 抓什麼
2. 怎麼抓

抓什麼 ，是指對於那些經過異步請求獲取到的數據，如何找到其來源。

打開 Network 頁面，開啓記錄，而後刷新頁面，就能夠看到發出的全部請求，包括數據、JS、CSS、圖片、文檔等等都會顯示其中。從請求列表中能夠尋找你的目標。

一個個去找會很痛苦。分享幾個小技巧：

• 點擊「 搜索 」功能，直接對內容進行查找。
• 選中 Preseve log ，這樣頁面刷新和跳轉以後，列表不會清空。
• Filter 欄 能夠按類型和關鍵字篩選請求。

找到包含數據的請求以後，接下來就是用程序獲取數據。這時就是第二個問題： 怎麼抓 。

並非全部 URL 都能直接經過 GET 獲取（至關於在瀏覽器裏打開地址），一般還要考慮這幾樣東西：

1. 請求方法 ，是 GET 仍是 POST。
2. 請求附帶的參數數據 。GET 和 POST 傳遞參數的方法不同。
3. Headers 信息 。經常使用的包括 user-agent、host、referer、cookie 等。其中 cookie 是用來識別請求者身份的關鍵信息，對於須要登陸的網站，這個值少不了。而另外幾項，也常常會被網站用來識別請求的合法性。一樣的請求，瀏覽器裏能夠，程序裏不行，多半就是 Headers 信息不正確。你能夠從 Chrome 上把這些信息照搬到程序裏，以此繞過對方的限制。

點擊列表中的一個具體請求，上述信息均可以找到。

找對 請求 ，設對 方法 ，傳對 參數 以及 Headers 信息，大部分的網站上的信息均可以搞定了。

Network 還有個功能：右鍵點擊列表，選擇「 Save as HAR with content 」，保存到文件。這個文件包含了列表中 全部請求的各項參數及返回值信息 ，以便你查找分析。（實際操做中，我發現常常有直接搜索無效的狀況，只能保存到文件後搜索）

除了 Elements 和 Network，開發者工具中還有一些功能，好比：

Sources ，查看資源列表和調試 JS。

Console ，顯示頁面的報錯和輸出，而且能夠執行 JS 代碼。不少網站會在這裏放上招聘的彩蛋（本身多找些知名網站試試）。

但這些功能和爬蟲關係不大。若是你開發網站和優化網站速度，就須要和其餘功能打交道。這裏就很少說了。

總結一下，其實你就記住這幾點：

1. 「 查看源代碼 」裏能看到的數據，能夠直接經過程序請求當前 URL 獲取。
2. Elements 裏的 HTML 代碼 不等於 請求返回值，只能做爲輔助。
3. 在 Network 裏用內容關鍵字搜索，或保存成 HAR 文件後搜索，找到包含數據的實際請求
4. 查看請求的具體信息，包括 方法、headers、參數 ，複製到程序裏使用。

理解了這幾步，大部分網上的數據均可以拿到，說「解決一半的問題」可不是標題黨。

固然咯，提及來輕鬆幾點，想熟練掌握，仍是有不少細節要考慮，須要不斷練習。但帶着這幾點再去看各類爬蟲案例，思路會更清晰。

若是你想要針對爬蟲更詳細的講解和指導，咱們的「 爬蟲實戰 」課程瞭解一下，也有面向零基礎的入門課程。

課程詳情公衆號（Crossin的編程教室）裏回覆 碼上行動

════
其餘文章及回答：

如何自學Python | 新手引導 | 精選Python問答 | Python單詞表 | 區塊鏈 | 人工智能 | 雙11 | 嘻哈 | 爬蟲 | 排序算法 | 我用Python | 高考 | 世界盃 | 競猜 | requests

歡迎搜索及關注： Crossin的編程教室