使用Chrome開發者工具解析網站
使用Chrome開發者工具解析網站
前言
每個網站抓取的程式碼各不相同，不過背後的原理是相通的。對於絕大部分網站來說，抓取的套路就那麼一些。今天這篇文章不談任何具體網站的抓取，只來說一個共性的東西： 如何通過 Chrome 開發者工具尋找一個網站上特定資料的抓取方式。
大綱
了解網頁架構
HTML (HyperText Markup Language)
HTTP 標籤
| 標籤名稱 | 用途 |
|---|---|
<h1> -<h6> | 標題 |
<p> | 段落 |
<a> | 超連結 |
<table> | 表格 |
<tr> | 表格內的row |
<td> | 表格內的cell |
<br/> | 換行(無結束標籤) |
| 屬性名稱 | 意義 |
|---|---|
| class | 標籤的類別(可重複) |
| id | 標籤的id(不可重複) |
| title | 標籤的顯示資訊 |
| style | 標籤的樣式 |
| href | 超連結 |
| data-* | 自行定義新的屬性 |
HTTP 協定
請求（request）& 回應（response） : HTTP是一個用戶端終端（用戶）和伺服器端（網站）請求和回應的標準（TCP）。通過使用網頁瀏覽器、網路爬蟲或者其它的工具，用戶端發起一個HTTP請求到伺服器上指定埠（預設埠為80）。其中我們稱這個用戶端為用戶代理程式（user agent）。
檢視網頁原始碼 View Page Source
在網頁上右擊滑鼠，選擇 “檢視網頁原始碼”（View Page Source），就會在新標籤頁中顯示這個 URL 對應的 HTML 程式碼文字。以 TWSE 臺灣證券交易所 為例:
此功能並不算是“開發者工具”一部分，但也很常用。這個內容和你直接通過程式碼向此 URL 傳送 GET 請求得到的結果是一樣的（不考慮許可權問題）。如果在這個原始碼頁面上可以搜尋到你要內容，則可以按照其規則，通過正則、bs4、xpath 等方式對文字中的資料進行提取。
Ctrl+F 快捷鍵 : 可以直接在網頁內容尋找您要的資料 ，例如，輸入 "市場公告"
不過，對於很多非同步載入資料的網站，從這個頁面上並不能搜到你要的東西。或者因為許可權、驗證等限制，程式碼中獲取到的結果和頁面顯示不一致。這些情況我們就需要更強大的開發者工具來幫忙了。
檢查(Inspect)
Elements
在網頁上右擊滑鼠，選擇“檢查”（Inspect） 或 按鍵 F12 ，可進入 Chrome 開發者工具的元素選擇器 =>在工具中選擇 Elements 標籤頁。
Elements 有幾個功能：
- 選擇元素：通過滑鼠去選擇頁面上某個元素，並定位其在程式碼中的位置。
- 模擬器：模擬不同裝置的顯示效果，且可以模擬頻寬。
- 程式碼區：顯示頁面程式碼，以及選中元素對應的路徑
- 樣式區：顯示選中元素所受的 CSS 樣式影響
從 Elements 工具裡定位資料比我們前面直接在原始碼中搜尋要方便，因為你可以清楚看到它所處的元素結構。但這邊特別提醒的是：
Elements 裡看到的程式碼不等於請求網址拿到的返回值。
它是網頁經過瀏覽器渲染後最終呈現出的效果，包含了非同步請求資料，以及瀏覽器自身對於程式碼的優化改動。所以，你並不能完全按照 Elements 裡顯示的結構來獲取元素，那樣的話很可能得不到正確的結果。
Styles
在Elements頁面標籤中
- => 1. 點選 "選取元素"的圖示
- => 2. 在左側網頁顯示區處選區我們所要查看的網頁元件，例如 : 我們選取證交所的 Logo.
- => 3. 該元件會在程式碼區出現反白，我們逐步展開，對比左側頁面，招出元件的HTML 標籤 Tag.
- => 4. 選取功能 Styles樣式區
- => 5. 此區塊會出現所有相關的CSS 樣式。
Computed
重複以上步驟1-3
- => 1. 選取功能 Computed 元件大小尺寸
- => 2. 此區塊顯示元件大小尺寸
Event Listeners
重複以上步驟1-3
- => 1. 選取功能 Event Listeners 網頁事件觸發 JavaScript 列表
- => 2. 此區塊可以看到此元件相關的 JavaScript 事件觸發
若在上述2 中我點選任何一個 JavaScript ，可以自動進入 Sources 頁面標籤。在此，我們以 keyup 的 main.js 為例，按滑鼠左2下選擇，即會出現該JavaScript 的 Sources 頁面標籤
Network
在開發者工具裡選擇 Network 標籤頁就進入了網路監控功能，也就是常說的“抓包”。
這是爬蟲所用到的最重要功能。它主要解決兩個問題：
- 抓什麼
- 怎麼抓
抓什麼
是指對於那些通過非同步請求獲取到的資料，如何找到其來源。
開啟 Network 頁面，開啟記錄，然後重新整理頁面，就可以看到發出的所有請求，包括資料、JS、CSS、圖片、文件等等都會顯示其中。從 Request table 請求列表 中可以尋找你的目標。
一個個去找會很痛苦。分享幾個小技巧：
- 點選“搜尋Search”功能，直接對內容進行查詢。
- 選中 Preseve log，這樣頁面重新整理和跳轉之後，列表不會清空。
- Filter 欄 可以按型別和關鍵字篩選請求。
這時就是第二個問題：怎麼抓
並不是所有 URL 都能直接通過 GET 獲取（相當於在瀏覽器裡開啟地址），通常還要考慮這幾樣東西：
- 請求方法，是 GET 還是 POST。
- 請求附帶的引數資料。GET 和 POST 傳遞引數的方法不一樣。
- Headers 資訊。常用的包括 user-agent、host、referer、cookie 等。其中 cookie 是用來識別請求者身份的關鍵資訊，對於需要登入的網站，這個值少不了。而另外幾項，也經常會被網站用來識別請求的合法性。同樣的請求，瀏覽器裡可以，程式裡不行，多半就是 Headers 資訊不正確。你可以從 Chrome 上把這些資訊照搬到程式裡，以此繞過對方的限制。
Headers
點選 Request table 請求列表 列表中的一個具體請求，選擇 Headers 功能，上述資訊都可以找到。
Preview
點選 Request table 請求列表 列表中的一個具體請求，選擇 Preview 功能
找對請求，設對方法，傳對引數以及 Headers 資訊，大部分的網站上的資訊都可以搞定了。
Save as HAR with content
Network 還有個功能：點選 Request table 請求列表 列表中的一個具體請求，右鍵點選列表，選擇“Save as HAR with content”，儲存到檔案。這個檔案包含了列表中所有請求的各項引數及返回值資訊，以便你查詢分析。（實際操作中，我發現經常有直接搜尋無效的情況，只能儲存到檔案後搜尋）
其他功能
除了 Elements 和 Network，開發者工具中還有一些功能，比如：
Sources，檢視資源列表和除錯 JS。
Console，顯示頁面的報錯和輸出，並且可以執行 JS 程式碼。很多網站會在這裡放上招聘的彩蛋（自己多找些知名網站試試）。
但這些功能和爬蟲關係不大。如果你開發網站和優化網站速度，就需要和其他功能打交道。這裡就不多說了。
結論
總結一下，其實你就記住這幾點：
- “檢視網頁原始碼”裡能看到的資料，可以直接通過程式請求當前 URL 獲取。
- Elements 裡的 HTML 程式碼不等於請求返回值，只能作為輔助。
- 在 Network 裡用內容關鍵字搜尋，或儲存成 HAR 檔案後搜尋，找到包含資料的實際請求。
- 檢視 請求 的具體資訊，包括方法、headers、引數，複製到程式裡使用。
參考資料
特色、摘要，Feature、Summary:
關鍵字、標籤，Keyword、Tag:
- Web-Crawler,Data-Mining,Data-Science,htmlcss-web,Chrome
留言
張貼留言
Aron阿龍，謝謝您的留言互動!