網上爬蟲的教程實在太多了，知乎上搜一下，估計能找到不下一百篇。大家樂此不疲地從網際網路上抓取著一個又一個網站。但只要對方網站一更新，很可能文章裡的方法就不再有效了。
每個網站抓取的程式碼各不相同，不過背後的原理是相通的。對於絕大部分網站來說，抓取的套路就那麼一些。今天這篇文章不談任何具體網站的抓取，只來說一個共性的東西：
如何通過 Chrome 開發者工具尋找一個網站上特定資料的抓取方式。
（我這裡演示的是 Mac 上的英文版 Chrome，Windows 中文版的使用方法是一樣的。）
> 檢視網頁原始碼
在網頁上右擊滑鼠，選擇“檢視網頁原始碼”（View Page Source），就會在新標籤頁中顯示這個 URL 對應的 HTML 程式碼文字。
此功能並不算是“開發者工具”一部分，但也很常用。這個內容和你直接通過程式碼向此 URL 傳送 GET 請求得到的結果是一樣的（不考慮許可權問題）。如果在這個原始碼頁面上可以搜尋到你要內容，則可以按照其規則，通過正則、bs4、xpath 等方式對文字中的資料進行提取。
不過，對於很多非同步載入資料的網站，從這個頁面上並不能搜到你要的東西。或者因為許可權、驗證等限制，程式碼中獲取到的結果和頁面顯示不一致。這些情況我們就需要更強大的開發者工具來幫忙了。
> Elements
在網頁上右擊滑鼠，選擇“審查元素”（Inspect），可進入 Chrome 開發者工具的元素選擇器。在工具中是 Elements 標籤頁。
Elements 有幾個功能：
- 選擇元素：通過滑鼠去選擇頁面上某個元素，並定位其在程式碼中的位置。
- 模擬器：模擬不同裝置的顯示效果，且可以模擬頻寬。
- 程式碼區：顯示頁面程式碼，以及選中元素對應的路徑
- 樣式區：顯示選中元素所受的 CSS 樣式影響
從 Elements 工具裡定位資料比我們前面直接在原始碼中搜尋要方便，因為你可以清楚看到它所處的元素結構。但這邊特別提醒的是：
Elements 裡看到的程式碼不等於請求網址拿到的返回值。
它是網頁經過瀏覽器渲染後最終呈現出的效果，包含了非同步請求資料，以及瀏覽器自身對於程式碼的優化改動。所以，你並不能完全按照 Elements 裡顯示的結構來獲取元素，那樣的話很可能得不到正確的結果。
> Network
在開發者工具裡選擇 Network 標籤頁就進入了網路監控功能，也就是常說的“抓包”。
這是爬蟲所用到的最重要功能。它主要解決兩個問題：
- 抓什麼
- 怎麼抓
抓什麼，是指對於那些通過非同步請求獲取到的資料，如何找到其來源。
開啟 Network 頁面，開啟記錄，然後重新整理頁面，就可以看到發出的所有請求，包括資料、JS、CSS、圖片、文件等等都會顯示其中。從請求列表中可以尋找你的目標。
一個個去找會很痛苦。分享幾個小技巧：
- 點選“搜尋”功能，直接對內容進行查詢。
- 選中 Preseve log，這樣頁面重新整理和跳轉之後，列表不會清空。
- Filter 欄可以按型別和關鍵字篩選請求。
找到包含資料的請求之後，接下來就是用程式獲取資料。這時就是第二個問題：怎麼抓。
並不是所有 URL 都能直接通過 GET 獲取（相當於在瀏覽器裡開啟地址），通常還要考慮這幾樣東西：
- 請求方法，是 GET 還是 POST。
- 請求附帶的引數資料。GET 和 POST 傳遞引數的方法不一樣。
- Headers 資訊。常用的包括 user-agent、host、referer、cookie 等。其中 cookie 是用來識別請求者身份的關鍵資訊，對於需要登入的網站，這個值少不了。而另外幾項，也經常會被網站用來識別請求的合法性。同樣的請求，瀏覽器裡可以，程式裡不行，多半就是 Headers 資訊不正確。你可以從 Chrome 上把這些資訊照搬到程式裡，以此繞過對方的限制。
點選列表中的一個具體請求，上述資訊都可以找到。
找對請求，設對方法，傳對引數以及 Headers 資訊，大部分的網站上的資訊都可以搞定了。
Network 還有個功能：右鍵點選列表，選擇“Save as HAR with content”，儲存到檔案。這個檔案包含了列表中所有請求的各項引數及返回值資訊，以便你查詢分析。（實際操作中，我發現經常有直接搜尋無效的情況，只能儲存到檔案後搜尋）
除了 Elements 和 Network，開發者工具中還有一些功能，比如：
Sources，檢視資源列表和除錯 JS。
Console，顯示頁面的報錯和輸出，並且可以執行 JS 程式碼。很多網站會在這裡放上招聘的彩蛋（自己多找些知名網站試試）。
但這些功能和爬蟲關係不大。如果你開發網站和優化網站速度，就需要和其他功能打交道。這裡就不多說了。
總結一下，其實你就記住這幾點：
- “檢視原始碼”裡能看到的資料，可以直接通過程式請求當前 URL 獲取。
- Elements 裡的 HTML 程式碼不等於請求返回值，只能作為輔助。
- 在 Network 裡用內容關鍵字搜尋，或儲存成 HAR 檔案後搜尋，找到包含資料的實際請求
- 檢視請求的具體資訊，包括方法、headers、引數，複製到程式裡使用。
理解了這幾步，大部分網上的資料都可以拿到，說“解決一半的問題”可不是標題黨。
當然咯，說起來輕鬆幾點，想熟練掌握，還是有很多細節要考慮，需要不斷練習。但帶著這幾點再去看各種爬蟲案例，思路會更清晰。
如果你想要針對爬蟲更詳細的講解和指導，我們的“爬蟲實戰”課程瞭解一下，也有面向零基礎的入門課程。
課程詳情公眾號（Crossin的程式設計教室）裡回覆 碼上行動
════
其他文章及回答：
如何自學Python | 新手引導 | 精選Python問答 | Python單詞表 | 區塊鏈 | 人工智慧 | 雙11 | 嘻哈 | 爬蟲 | 排序演算法 | 我用Python | 高考 | 世界盃 | 競猜 | requests
歡迎搜尋及關注：Crossin的程式設計教室
