經(jīng)常出現(xiàn)需要攀登某網(wǎng)站部分數(shù)據(jù)的簡單需求，但是這個頁面的結構非常簡單，數(shù)據(jù)量比較小，所以自己寫代碼當然可以實現(xiàn)，但是殺雞怎么用牛刀呢？

現(xiàn)在市面上已經(jīng)有比較成熟的零代碼爬蟲工具(如八爪魚)，可以使用現(xiàn)成的模板，同時可以自己定義一些捕捉規(guī)則。

但我今天要介紹的是另外一個神器 -- Web Scraper，它是 Chrome 瀏覽器的一個擴展插件，安裝后你可以直接在F12調試工具里使用它。

# 1. 安裝 Web Scraper

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

沒有條件的同學，可以來這個網(wǎng)站（）下載 crx 文件，再離線安裝，具體方法可借助搜索引擎解決

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

# 2. 基本概念與操作

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

sitemap

直譯起來是網(wǎng)站地圖，有了該地圖爬蟲就可以順著它獲取到我們所需的數(shù)據(jù)。

因此 sitemap 其實就可以理解為一個網(wǎng)站的爬蟲程序，要爬取多個網(wǎng)站數(shù)據(jù)，就要定義多個 sitemap。

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

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

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

Selector

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

每一個 Selector 可以獲取一個數(shù)據(jù)，要取多個數(shù)據(jù)就需要定位多個 Selector。

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

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

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

正是有了這種無窮無盡的嵌套關系，才讓我們可以遞歸爬取整個網(wǎng)站的數(shù)據(jù)。

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

數(shù)據(jù)爬取與導出

在定義好你的 sitemap 規(guī)則后，點擊 Scrape 就可以開始爬取數(shù)據(jù)。

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

最后數(shù)據(jù)同樣是可以導出為 csv 或者 xlsx 文件。

# 3. 分頁器的爬取

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

分頁器可以分為兩種：

• 一種是，點 下一頁 就會重新加載一個頁面

• 一種是：點 下一頁 只是當前頁面的部分內容重新渲染

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

• 對于需要重新加載頁面的，需要 Link 選擇器

• 對于不需要重新加載頁面的，可以使用 Element Click 選擇器

對于某些網(wǎng)站的確是夠用了，但卻有很大的局限性。

經(jīng)過我的試驗，第一種使用 Link 選擇器的原理就是取出 下一頁的 a 標簽的超鏈接，然后去訪問，但并不是所有網(wǎng)站的下一頁都是通過 a 標簽實現(xiàn)。

像下面這樣用 js 監(jiān)聽事件然后跳轉的，就無法使用 Link 選擇器 。

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

不重載頁面的分頁器爬取

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

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

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

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

最后爬取的效果如下

使用 Element Click 的 sitemap 配置如下，你可以直接導入我的配置進行研究,配置文件下載：

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

對應的 sitemap 的配置如下，你可以直接導入使用 ,配置文件下載：

要重載頁面的分頁器爬取

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

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

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

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

對應的 sitemap 的配置如下，你可以直接導入去學習,配置文件下載：

# 4. 二級頁面的爬取

CSDN 的博客列表列表頁，展示的信息比較粗糙，只有標題、發(fā)表時間、閱讀量、評論數(shù)，是否原創(chuàng)。

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

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

爬取路徑拓撲如下

爬取的效果如下

sitemap 的配置如下，你可以直接導入使用,配置文件下載：

# 5. 寫在最后

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

只要學會了這兩個，你就已經(jīng)可以應對絕大多數(shù)的結構性網(wǎng)頁數(shù)據(jù)了。

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

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

• CSS 選擇器的知識：如何抓取元素的屬性，如何抓取第 n 個元素，如何抓取指定數(shù)量的元素？

• 正則表達式的知識：如何對抓取的內容進行初步加工？

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