Google Chrome 開發者工具

1. 開啟 DevTools

Google Chrome 開發者工具 (DevTools) 是 Chrome 瀏覽器內建的開發工具套件，能幫助我們研究和分析網頁。對於網頁爬取來說，DevTools 是個不可或缺的工具，因為它可以深入了解網頁的結構，找出選擇器，分析動態內容以及網路請求。在這篇文章中，我們將探討 DevTools 如何幫助爬取數據並提高爬取的效率。

要開啟 Chrome 的 DevTools，可以：

• 按 F12 或 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)。
• 在網頁上點擊右鍵，選擇 檢視原始碼 或 Inspect。

工具會在新面板中打開，通常位於瀏覽器窗口的底部或右側。DevTools 面板包含多個標籤，每個標籤都專門用於執行某些任務，這對於網頁爬取人員非常重要。

對於網頁爬取人員來說，以下幾個 DevTools 標籤特別有用：Elements, Console, Network, Sources 和 Application。

2. Elements 標籤

Elements 標籤：學習 HTML 和 CSS

Elements 標籤是分析網頁結構和選擇元素的主要工具。在這裡可以瀏覽、編輯和複製網頁的 HTML 和 CSS 結構。

Elements 標籤的主要功能：

• 選擇器的確定。點擊面板左上角的箭頭圖標，然後選擇網頁上的任何元素。對應的 HTML 代碼將在 DevTools 中顯示出來。這對確定 id, class 等屬性非常方便，可以在 CSS 或 Xpath 選擇器中用於爬取。
• 即時編輯 HTML 和 CSS。可以更改元素的 HTML 和 CSS，進行視覺化測試，來查看修改如何影響網頁外觀。例如，您可以隱藏某些元素或更改顏色，以便更清楚地了解您需要的頁面部分。
• 複製選擇器。右鍵點擊某一元素，可以選擇「Copy」並複製其 CSS 選擇器 或 XPath，這對於網頁爬取非常有用。

範例：如果您需要選擇標題 <h1> 的文本，只需點擊它，然後複製其選擇器，用於代碼中的數據提取。

3. Console 標籤

Console 標籤：執行 JavaScript 代碼以處理動態內容

Console 允許您直接在網頁上輸入和執行 JavaScript 代碼。這對於操作動態內容和分析控制元素的 JavaScript 代碼非常有用。

爬取人員使用 Console 的主要應用：

• 使用 JavaScript 提取數據。可以使用像 document.querySelector 的簡單命令來測試元素選擇器是否正確。
• 執行代碼與元素交互。例如，如果需要「點擊」按鈕或「加載」內容，Console 可以執行代碼，測試元素如何響應事件。
• 排查錯誤。如果通過自動化進行爬取，Console 能顯示與 JavaScript 或網絡請求相關的錯誤，幫助了解為什麼某些元素沒有加載或顯示。

範例：如果需要測試選擇帶有 load-more 類別的按鈕，在 Console 中輸入 document.querySelector('.load-more').click()，即可測試按鈕對該命令的反應。

4. Network 標籤

Network 標籤：網絡請求分析

Network 是分析網頁請求的重要標籤。許多網站會通過異步請求（例如 AJAX）來加載數據，這可能會使爬取變得複雜。Network 標籤可以跟蹤所有的網絡請求，複製它們並分析服務器的回應。

Network 的主要功能：

• 跟蹤 AJAX 請求。頁面加載時可以看到所有執行的請求及其回應。這特別有用於動態加載數據的情況。可以跟蹤返回所需數據的請求，然後在代碼中重現它們以直接獲取數據。
• 複製請求。右鍵點擊請求，可以將其複製為 cURL 或 fetch，便利在代碼中重現請求以獲取數據。
• 分析請求參數。Network 顯示了請求中發送的標頭、參數和 cookies。這有助於理解服務器需要哪些數據來處理請求。例如，許多網站使用身份驗證令牌來保護數據，分析請求標頭可以幫助理解如何繞過這種限制。

範例：如果數據是通過 AJAX 動態加載的，可以在 Network 中找到對應的請求，查看其 URL 和回應，然後直接使用該請求來獲取數據。

5. Sources 標籤

Sources 標籤：研究 JavaScript 和動態內容

Sources 標籤允許查看網頁的 JavaScript、CSS、圖片及其他資源。爬取人員可以用它來分析網站邏輯及動態內容的處理方式。

Sources 的主要功能：

• 查找 JavaScript 文件。在許多頁面中，數據或功能是通過 JavaScript 加載的。在 Sources 中可以找到並打開這些控制顯示和加載數據的 JavaScript 文件。
• 設置斷點。可以在某一行代碼處設置斷點，來查看數據如何加載以及不同元素如何交互。這對分析使用複雜 JavaScript 的頁面特別有用。
• 查看變數的值。可以跟蹤變數的變化，深入了解網站邏輯，這對於使用複雜 JavaScript 函數加載內容的情況特別有用。

6. Application 標籤

Application 標籤：處理 cookies 和 Local Storage

Application 標籤允許查看 cookies、Local Storage 和其他存在於客戶端的數據。這些數據在處理需要驗證或追蹤用戶行為的網站時很有用。

Application 對網頁爬取人員的主要功能：

• 分析 cookies。許多網站使用 cookies 進行身份驗證或用戶追蹤。在分析包含驗證的請求時，Application 標籤可以幫助查看哪些 cookies 是必需的。
• 研究 Local Storage 和 Session Storage。這兩種存儲方式也被用於在客戶端保存信息。如果網站從 Local Storage 加載數據或設置，這些數據可被提取並應用於爬取代碼中。
• 處理驗證令牌。一些網站將令牌存儲在 Local Storage 或 cookies 中。了解令牌並進行更新，可以直接通過 API 或 AJAX 請求獲取數據。

範例：當網站需要身份驗證時，Application 標籤允許提取必要的 cookies 或令牌並用於發送請求。

7. 實用技巧

使用 DevTools 進行爬取的實用技巧

• 在 Network 中查找數據。如果內容是異步加載的，請在 Network 中找到相關請求，研究其 URL、參數和標頭。
• 用 Console 測試選擇器。在實現爬取代碼之前，可以使用 document.querySelector 或 document.querySelectorAll 命令在 Console 中測試選擇器。
• 複製 API 的 fetch 請求。如果網站使用 API，Network 允許複製請求，並在腳本中測試以直接獲取數據，避免處理 HTML 標記。
• 尋找控制內容的腳本。在 Sources 中可以找到管理動態內容的 JavaScript 文件，理解其工作方式，並將其邏輯應用到爬取中。
• 研究驗證令牌和 cookies。某些網站通過 cookies 或令牌保護數據，因此提取這些數據並在請求中傳遞非常有幫助。