iT邦幫忙

2021 iThome 鐵人賽

DAY 6
1
AI & Data

網路爬蟲,萬物皆爬 - 30 天搞懂並實戰網路爬蟲及應對反爬蟲技術系列 第 6

【Day 06】- 聽說 F12 可以拿來駭入小恐龍? (網頁開發工具分析流量)

前情提要

前一篇文章帶大家看了 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基礎教學/


上一篇
【Day 05】- Python 字串操作(正規表達式 regexes 、原生基本操作)
下一篇
【Day 07】- 第一隻網路爬蟲要用什麼函式庫? (Requests)
系列文
網路爬蟲,萬物皆爬 - 30 天搞懂並實戰網路爬蟲及應對反爬蟲技術30

尚未有邦友留言

立即登入留言