零代碼爬蟲神器 -- Web Scraper 的使用

經常會遇到一些簡單的需求，需要爬取某網站上的一些數據，但這些頁面的結構非常的簡單，並且數據量比較小，自己寫代碼固然可以實現，但殺雞焉用牛刀？

目前市面上已經有一些比較成熟的零代碼爬蟲工具，比如說八爪魚，有現成的模板可以使用，同時也可以自己定義一些抓取規則。但我今天要介紹的是另外一個神器 -- Web Scraper，它是 Chrome 瀏覽器的一個擴展插件，安裝後你可以直接在 F12 調試工具裏使用它。

1. 安裝 Web Scraper

有條件的同學，可以直接在商店裏搜索 Web Scraper 安裝它

沒有條件的同學，可以來這個網站（https://crxdl.com/）下載 crx 文件，再離線安裝，具體方法可藉助搜索引擎解決

安裝好後，需要重啓一次 Chrome， 然後 F12 就可以看到該工具

2. 基本概念與操作

在使用 Web Scraper 之前，需要講解一下它的一些基本概念：

sitemap

直譯起來是網站地圖，有了該地圖爬蟲就可以順着它獲取到我們所需的數據。

因此 sitemap 其實就可以理解爲一個網站的爬蟲程序，要爬取多個網站數據，就要定義多個 sitemap。

sitemap 是支持導出和導入的，這意味着，你寫的 sitemap 可以分享給其他人使用的。

從下圖可以看到 sitemap 代碼就是一串 JSON 配置

只要拿到這個配置你就可以導入別人的 sitemap

Selector

直譯起來是選擇器，從一個佈滿數據的 HTML 頁面中去取出數據，就需要選擇器去定位我們的數據的具體位置。

每一個 Selector 可以獲取一個數據，要取多個數據就需要定位多個 Selector。

Web Scraper 提供的 Selector 有很多，但本篇文章只介紹幾種使用頻率最高，覆蓋範圍最廣的 Selector，瞭解了一兩種之後，其他的原理大同小異，私下再瞭解一下很快就能上手。

Web Scraper 使用的是 CSS 選擇器來定位元素，如果你不知道它，也無大礙，在大部分場景上，你可以直接用鼠標點選的方式選中元素， Web Scraper 會自動解析出對應的 CSS 路徑。

Selector 是可以嵌套的，子 Selector 的 CSS 選擇器作用域就是父 Selector。

正是有了這種無窮無盡的嵌套關係，才讓我們可以遞歸爬取整個網站的數據。

如下就是後面我們會經常放的 選擇器拓撲，利用它可以直觀的展示 Web Scraper 的爬取邏輯

數據爬取與導出

在定義好你的 sitemap 規則後，點擊 Scrape 就可以開始爬取數據。

爬取完數據後，不會立馬顯示在頁面上，需要你再手動點擊一下 refresh 按鈕，才能看到數據。

最後數據同樣是可以導出爲 csv 或者 xlsx 文件。

3. 分頁器的爬取

爬取數據最經典的模型就是列表、分頁、詳情，接下來我也將圍繞這個方向，以爬取 CSDN 博客文章去介紹幾個 Selector 的用法。

分頁器可以分爲兩種：

在早期的 web-scraper 版本中，這兩種的爬取方法有所不同。

對於某些網站的確是夠用了，但卻有很大的侷限性。

經過我的試驗，第一種使用 Link 選擇器的原理就是取出 下一頁 的 a 標籤的超鏈接，然後去訪問，但並不是所有網站的下一頁都是通過 a 標籤實現。

像下面這樣用 js 監聽事件然後跳轉的，就無法使用  Link 選擇器 。

而在新版的 web scraper ，對導航分頁器提供了特別的支持，加了一個 Pagination 的選擇器，可以完全適用兩種場景，下面我會分別演示。

 不重載頁面的分頁器爬取

點入具體一篇 CSDN 博文，拉到底部，就能看到評論區。

如果你的文章比較火，評論的同學很多的時候，CSDN 會對其進行分頁展示，但不論在哪一頁的評論，他們都隸屬於同一篇文章，當你瀏覽任意一頁的評論區時，博文沒有必要刷新，因爲這種分頁並不會重載頁面。

對於這種不需要重載頁面的點擊，完全可以使用 Element Click 來解決。

其中最後一點千萬注意，要選擇 root 和 next_page，只有這樣，才能遞歸爬取

最後爬取的效果如下

使用 Element Click  的 sitemap 配置如下，你可以直接導入我的配置進行研究, 配置文件下載：https://wwe.lanzoui.com/iidSSwghkch

當然啦，對於分頁這種事情，web scraper 提供了更專業的 Pagination 選擇器，它的配置更爲精簡，效果也最好

對應的 sitemap 的配置如下，你可以直接導入使用 , 配置文件下載：https://wwe.lanzoui.com/iidSSwghkch

 要重載頁面的分頁器爬取

CSDN 的博客文章列表，拉到底部，點擊具體的頁面按鈕，或者最右邊的下一頁就會重載當前的頁面。

而對於這種分頁器，Element Click 就無能爲力了，讀者可自行驗證一下，最多隻能爬取一頁就會關閉了。

而作爲爲分頁而生的 Pagination 選擇器自然是適用的

爬取的拓撲與上面都是一樣的，這裏不再贅述。

對應的 sitemap 的配置如下，你可以直接導入去學習, 配置文件下載：https://wwe.lanzoui.com/iidSSwghkch

4. 二級頁面的爬取

CSDN 的博客列表列表頁，展示的信息比較粗糙，只有標題、發表時間、閱讀量、評論數，是否原創。

想要獲取更多的信息，諸如博文的正文、點贊數、收藏數、評論區內容，就得點進去具體的博文鏈接進行查看

web scraper 的操作邏輯與人是相通的，想要抓取更多博文的詳細信息，就得打開一個新的頁面去獲取，而 web scraper 的 Link 選擇器恰好就是做這個事情的。

爬取路徑拓撲如下

爬取的效果如下

sitemap 的配置如下，你可以直接導入使用, 配置文件下載：https://wwe.lanzoui.com/iidSSwghkch

5. 寫在最後

上面梳理了分頁與二級頁面的爬取方案，主要是：分頁器抓取和二級頁面抓取。

只要學會了這兩個，你就已經可以應對絕大多數的結構性網頁數據了。

例如你可以爬取自己發表在 CSDN 上的所有博文信息，包括：標題、鏈接、文章內容、閱讀數，評論數、點贊數，收藏數。

當然想要用好 web scraper 這個零代碼爬取工具，你可能需要有一些基礎，比如：

受限於篇幅，我儘量講 web scraper 最核心的操作，其他的基礎內容只能由大家自行充電學習了。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/HItmL6CyYZm29hV6LZfLkQ

猜你喜歡