前情提要

前一篇文章帶大家看了 Python 中字串的原生操作以及正規表達式的操作，這兩個對於爬蟲的資料清洗是很方便的工具，大家熟悉運用後對於各種字串處理會更得心應手。

開始之前

不知道讀者有沒有不小心按下 F12 或聽過有人說用 F12 來當駭客的。今天就是來跟各位介紹如何用按下 F12 會跳出的開發工具分析網頁，對於開發爬蟲跟測試能發揮很大的作用。

這篇會以 chrome 的網頁開發工具為例，原因是其簡潔與速度較快。其他的瀏覽器，像 Firefox、Edge、Opera、Safari都有類似的開發工具，其中 Firefox 也不錯用。

按下 F12 後

開啟 chrome 的開發工具有多種方法，按下快速鍵 F12、對網頁點右鍵之後點擊檢查、按下組合鍵 Ctrl + Shift + I 都可以叫出 chrome 的開發工具(DevTools)。

▲ 右鍵檢查後也可以開啟 chrome 開發工具(DevTools)

▲ chrome 開發工具(DevTools)

接下來簡述一下上圖紅色圈起來的功能(不圈最後一個因為那是我自己裝的套件)

• 元素面板 Elements : 可以看到當前網頁的 DOM 物件、HTML、CSS 並能修改。
• 控制面板 Console : 目前網頁訊息，可以與 JavaScript 進行命令互動。
• 來源面板 Sources : 可設定目前 JavaScript 的斷點，並測試運行。若網頁是架在本機，能直接存檔。
• 網路面板 Network : 檢測目前網頁由外向內、由內向外的網路流量，可以看到詳細這些流量的內容(requests header、post data ...)
• 性能面板 Performance : 紀錄網頁生命週期中發生的事件，用來調整網頁的性能。
• 內存面板 Memory : 用於檢測當前內存的使用狀態。
• 應用面板 Application : 檢測載入資源。 e.g. 資料庫 、 cookies 、 Cache
• Lighthouse : 用來 SEO 的。

上述提到了開發工具頁籤上的功能，但做爬蟲分析只要熟悉元素面板 Elements 與網路面板 Network 這兩者，就能達成大部分的事了。

接下來與讀者介紹 Elements 與 Network。

元素面板 Elements

這個面板常用來定位元素的 class 、 id 或者 Xpath，讓我們的爬蟲了解那些元素需要爬取。

▲ Element 頁籤下的內容

我們來介紹一下紅框框的地方，這個地方是網頁的原始碼，就是渲染出網頁所需的元素。

以 IThome 文章為例，讀者現在可以按下 F12 進到 Elements 這個頁籤，之後在這個窗口內往下找，應該就能找到文章內容。因此，我們能透過 chrome 開發工具去找到我們想要的文章內容，可以說讀者現在正在進行人工的網路爬蟲。

▲ 在原始碼內的文章內容位置

經過剛才的手動在網頁找原始碼內文章內容放置的位置，大家是不是都眼花了呢(不要打我QQ)。現在可以按下左上角的選取工具，之後點文章內容，就會在原始碼窗口內自動鎖定文章內容在原始碼內的位置了。對任何元素都可以用此選取工具進行鎖定(輸入框、按鈕...)十分好用。

▲ 用選取工具在網頁的內容上選取，鎖定原始碼內的位置

▲ Element 頁籤下的內容

接下來要介紹 Elements 頁簽下的另一個東西 Event Listeners。找不到的讀者可以按下 >> 這個按鈕就能找到了。

這個功能可以看到目前頁面的 JavaScript Listener ，可以點擊對應的 Listener 切換到其在 Javascript 的位置。

網路面板 Network

這個頁簽常用來分析當前頁面伺服器請求的資訊(狀態、種類、時間、 Requests、Response...)還有filter 能使用。

▲ Network 頁籤下的內容

按下 F5 重新整理後會發現多出了許多請求。

▲重新整理後多出許多流量

我們現在能隨便點開看其中一個伺服器請求資訊，可以看到 Headers、Preview、Response、Cookies、Timing。

• Headers : 該 HTTP Request 的 Header (請求所夾帶的資訊)。
• Preview : 該請求類型(JSON、image、text)的預覽。
• Response : 該 HTTP Request 的 Response。
• Cookies : 該 HTTP Request 和 Response 過程中的 Cookies 資訊
• Timing : 該請求在生命週期中各部分的時間

想更了解 Request Method 能看這篇 https://blog.v123582.tw/2019/12/17/利用-Chrome-開發者工具觀察-HTTP-Headers/

▲其中一個請求的長相，能看到許多詳細資訊

接下來解釋一下 Filters 的使用方法，點擊漏斗形狀的 icon 之後就會出現 Filters 的 ui 了，可以透過點選特定類型，就會只顯示該特定類型的請求。

這邊解釋一下各類型的內容

• All : 頁面所需的所有請求。
• Fetch/XHR : Fetch API 以及 XMLHttpRequest 的請求，出現於使用 Ajax 的網頁。
• JS : JavaScript 的資源。
• CSS : CSS 的資源。
• Img : 圖片的資源。 e.g. png、jpg、svg
• Media : 影音的資源。e.g. mp4、avi
• Font : 字體的資源 。e.g. woff、woff2
• Doc : HTML 內容。

最後要來回歸一下標題

不知道的讀者可以到 chrome://dino/ 按下 F12 之後到 console 頁籤，打入 Runner.instance_.setSpeed(1000000) 就可以條速度了。

結語

今天介紹了 chrome 的開發工具，往下介紹了 Elements 與 Network 內容，前者在撰寫爬蟲時，常用於定位元素位置，後者則是常用於分析伺服器請求，例如在尋找這個網頁背後使用了什麼 API 、觀察 HTTP Request Method 的傳入值。

明日內容

明天會帶大家寫第一隻爬蟲歐，會使用 requests 這個套件來撰寫。

補充資料

[學習筆記] Chrome Dev Tools 開發者工具實用功能整理 : https://pjchender.blogspot.com/2017/06/chrome-dev-tools.html

Chrome開發者工具(Google devtool)基礎教學 : https://thewayeasy.com/chrome開發者工具google-devtool基礎教學/