【Python隨筆】透過瀏覽器觀察爬蟲數據差異輕鬆debug

前言

在基本的requests爬蟲後,今天要寫的程式非常簡單,但是很方便,我常用的工具,就是將爬蟲取得的html頁面進行可視化,讓我們使用chrome的開發者工具進行檢視。

有時候我們撰寫好了xpath/CSS規則,在網站頁面上測試是正常的,爬蟲程式卻發生異常抓不到數據。這時有可能是爬蟲取得的資料和我們使用瀏覽器瀏覽的資料有差異,可能的原因包括頁面是使用ajax動態載入資料等,或是js有動到html的結構導致不同。

在開始解決問題前首先要找出問題點,使用chrome的開發者工具就是很方便的方式,首先我們要將爬蟲取得的資料以瀏覽器開啟。


程式撰寫

這是一個很簡單的程式,直接上完整程式碼

首先除了requests,我們需要導入webbrowser以開啟瀏覽器。

關於view_res_by_browser這個function,其實只是將取得的內容寫入一個html檔並以預設瀏覽器開啟而已。後面寫檔的部分我就不多說。

比較重要的是前面處理內容的部分

base = “<head><base href={}>”.format(res.url).encode()
content = res.content.replace(b’<head>’,base)

我們必須改變html的base標籤,base是所有連結的基準,最關鍵的是因為我們只有html檔案,沒有所有的css等靜態文件,必須透過base取去加載,否則檔案會很難看甚至打不開。

這就是這次簡單的小工具。


使用實例

只有程式碼可能不太能了解這個程式的使用目的,我提供一個小例子,也是我以前遇到的坑。

我爬取另一個網路書店 : 讀冊生活 遇到的問題。

這個是瀏覽器瀏覽網頁取得的數據 :

這個是爬蟲取得的數據 :

當然看到書籍簡介並沒有出現,可能他是動態加載的,但我並不需要簡介我需要的是價格,頁面上是有出現的,問題就不在那裏。

觀察價格的tag

左 - 瀏覽器,右 - 爬蟲

可以發現爬蟲取得的數據和我們使用瀏覽器瀏覽讀冊網站的數據是有差異的,<li>底下多了一層的<span>,這會導致我們要改變xpath規則,否則會抓不到資料。

透過這個小工具可以很簡單地找出數據的差異,找出問題並且解決。