目前市面上已經(jīng)有一些比較成熟的零代碼爬蟲(chóng)工具，比如說(shuō)八爪魚(yú)，有現(xiàn)成的模板可以使用，同時(shí)也可以自己定義一些抓取規(guī)則。但我今天要介紹的是另外一個(gè)神器 -- Web Scraper，它是 Chrome 瀏覽器的一個(gè)擴(kuò)展插件，安裝后你可以直接在F12調(diào)試工具里使用它。
有條件的同學(xué)，可以直接在商店里搜索 Web Scraper 安裝它
沒(méi)有條件的同學(xué)，可以來(lái)這個(gè)網(wǎng)站（https://crxdl.com/）下載 crx 文件，再離線安裝，具體方法可借助搜索引擎解決
安裝好后，需要重啟一次 Chrome， 然后 F12 就可以看到該工具
在使用 Web Scraper 之前，需要講解一下它的一些基本概念：
sitemap
直譯起來(lái)是網(wǎng)站地圖，有了該地圖爬蟲(chóng)就可以順著它獲取到我們所需的數(shù)據(jù)。
因此 sitemap 其實(shí)就可以理解為一個(gè)網(wǎng)站的爬蟲(chóng)程序，要爬取多個(gè)網(wǎng)站數(shù)據(jù)，就要定義多個(gè) sitemap。
sitemap 是支持導(dǎo)出和導(dǎo)入的，這意味著，你寫(xiě)的 sitemap 可以分享給其他人使用的。
從下圖可以看到 sitemap 代碼就是一串 JSON 配置
只要拿到這個(gè)配置你就可以導(dǎo)入別人的 sitemap
Selector
直譯起來(lái)是選擇器，從一個(gè)布滿數(shù)據(jù)的 HTML 頁(yè)面中去取出數(shù)據(jù)，就需要選擇器去定位我們的數(shù)據(jù)的具體位置。
每一個(gè) Selector 可以獲取一個(gè)數(shù)據(jù)，要取多個(gè)數(shù)據(jù)就需要定位多個(gè) Selector。
Web Scraper 提供的 Selector 有很多，但本篇文章只介紹幾種使用頻率最高，覆蓋范圍最廣的 Selector，了解了一兩種之后，其他的原理大同小異，私下再了解一下很快就能上手。
Web Scraper 使用的是 CSS 選擇器來(lái)定位元素，如果你不知道它，也無(wú)大礙，在大部分場(chǎng)景上，你可以直接用鼠標(biāo)點(diǎn)選的方式選中元素， Web Scraper 會(huì)自動(dòng)解析出對(duì)應(yīng)的 CSS 路徑。
Selector 是可以嵌套的，子 Selector 的 CSS 選擇器作用域就是父 Selector。
正是有了這種無(wú)窮無(wú)盡的嵌套關(guān)系，才讓我們可以遞歸爬取整個(gè)網(wǎng)站的數(shù)據(jù)。
如下就是后面我們會(huì)經(jīng)常放的 選擇器拓?fù)?，利用它可以直觀的展示 Web Scraper 的爬取邏輯
數(shù)據(jù)爬取與導(dǎo)出
在定義好你的 sitemap 規(guī)則后，點(diǎn)擊 Scrape 就可以開(kāi)始爬取數(shù)據(jù)。
爬取完數(shù)據(jù)后，不會(huì)立馬顯示在頁(yè)面上，需要你再手動(dòng)點(diǎn)擊一下 refresh 按鈕，才能看到數(shù)據(jù)。
最后數(shù)據(jù)同樣是可以導(dǎo)出為 csv 或者 xlsx 文件。
爬取數(shù)據(jù)最經(jīng)典的模型就是列表、分頁(yè)、詳情，接下來(lái)我也將圍繞這個(gè)方向，以爬取 CSDN 博客文章去介紹幾個(gè) Selector 的用法。
分頁(yè)器可以分為兩種：
一種是，點(diǎn) 下一頁(yè) 就會(huì)重新加載一個(gè)頁(yè)面
一種是：點(diǎn) 下一頁(yè) 只是當(dāng)前頁(yè)面的部分內(nèi)容重新渲染
在早期的 web-scraper 版本中，這兩種的爬取方法有所不同。
對(duì)于需要重新加載頁(yè)面的，需要 Link 選擇器
對(duì)于不需要重新加載頁(yè)面的，可以使用 Element Click 選擇器
對(duì)于某些網(wǎng)站的確是夠用了，但卻有很大的局限性。
經(jīng)過(guò)我的試驗(yàn)，第一種使用 Link 選擇器的原理就是取出 下一頁(yè) 的 a 標(biāo)簽的超鏈接，然后去訪問(wèn)，但并不是所有網(wǎng)站的下一頁(yè)都是通過(guò) a 標(biāo)簽實(shí)現(xiàn)。
像下面這樣用 js 監(jiān)聽(tīng)事件然后跳轉(zhuǎn)的，就無(wú)法使用 Link 選擇器 。
而在新版的 web scraper ，對(duì)導(dǎo)航分頁(yè)器提供了特別的支持，加了一個(gè) Pagination 的選擇器，可以完全適用兩種場(chǎng)景，下面我會(huì)分別演示。
點(diǎn)入具體一篇 CSDN 博文，拉到底部，就能看到評(píng)論區(qū)。
如果你的文章比較火，評(píng)論的同學(xué)很多的時(shí)候，CSDN 會(huì)對(duì)其進(jìn)行分頁(yè)展示，但不論在哪一頁(yè)的評(píng)論，他們都隸屬于同一篇文章，當(dāng)你瀏覽任意一頁(yè)的評(píng)論區(qū)時(shí)，博文沒(méi)有必要刷新，因?yàn)檫@種分頁(yè)并不會(huì)重載頁(yè)面。
對(duì)于這種不需要重載頁(yè)面的點(diǎn)擊，完全可以使用 Element Click 來(lái)解決。
其中最后一點(diǎn)千萬(wàn)注意，要選擇 root 和 next_page，只有這樣，才能遞歸爬取
最后爬取的效果如下
使用 Element Click 的 sitemap 配置如下，你可以直接導(dǎo)入我的配置進(jìn)行研究,配置文件下載：https://wwe.lanzoui.com/iidSSwghkch
當(dāng)然啦，對(duì)于分頁(yè)這種事情，web scraper 提供了更專業(yè)的 Pagination 選擇器，它的配置更為精簡(jiǎn)，效果也最好
對(duì)應(yīng)的 sitemap 的配置如下，你可以直接導(dǎo)入使用 ,配置文件下載：https://wwe.lanzoui.com/iidSSwghkch
CSDN 的博客文章列表，拉到底部，點(diǎn)擊具體的頁(yè)面按鈕，或者最右邊的下一頁(yè)就會(huì)重載當(dāng)前的頁(yè)面。
而對(duì)于這種分頁(yè)器，Element Click 就無(wú)能為力了，讀者可自行驗(yàn)證一下，最多只能爬取一頁(yè)就會(huì)關(guān)閉了。
而作為為分頁(yè)而生的 Pagination 選擇器自然是適用的
爬取的拓?fù)渑c上面都是一樣的，這里不再贅述。
對(duì)應(yīng)的 sitemap 的配置如下，你可以直接導(dǎo)入去學(xué)習(xí),配置文件下載：https://wwe.lanzoui.com/iidSSwghkch
CSDN 的博客列表列表頁(yè)，展示的信息比較粗糙，只有標(biāo)題、發(fā)表時(shí)間、閱讀量、評(píng)論數(shù)，是否原創(chuàng)。
想要獲取更多的信息，諸如博文的正文、點(diǎn)贊數(shù)、收藏?cái)?shù)、評(píng)論區(qū)內(nèi)容，就得點(diǎn)進(jìn)去具體的博文鏈接進(jìn)行查看
web scraper 的操作邏輯與人是相通的，想要抓取更多博文的詳細(xì)信息，就得打開(kāi)一個(gè)新的頁(yè)面去獲取，而 web scraper 的 Link 選擇器恰好就是做這個(gè)事情的。
爬取路徑拓?fù)淙缦?/p>
爬取的效果如下
sitemap 的配置如下，你可以直接導(dǎo)入使用,配置文件下載：https://wwe.lanzoui.com/iidSSwghkch
上面梳理了分頁(yè)與二級(jí)頁(yè)面的爬取方案，主要是：分頁(yè)器抓取和二級(jí)頁(yè)面抓取。
只要學(xué)會(huì)了這兩個(gè)，你就已經(jīng)可以應(yīng)對(duì)絕大多數(shù)的結(jié)構(gòu)性網(wǎng)頁(yè)數(shù)據(jù)了。
例如你可以爬取自己發(fā)表在 CSDN 上的所有博文信息，包括：標(biāo)題、鏈接、文章內(nèi)容、閱讀數(shù)，評(píng)論數(shù)、點(diǎn)贊數(shù)，收藏?cái)?shù)。
當(dāng)然想要用好 web scraper 這個(gè)零代碼爬取工具，你可能需要有一些基礎(chǔ)，比如：
CSS 選擇器的知識(shí)：如何抓取元素的屬性，如何抓取第 n 個(gè)元素，如何抓取指定數(shù)量的元素？
正則表達(dá)式的知識(shí)：如何對(duì)抓取的內(nèi)容進(jìn)行初步加工？
受限于篇幅，我盡量講 web scraper 最核心的操作，其他的基礎(chǔ)內(nèi)容只能由大家自行充電學(xué)習(xí)了。
聯(lián)系客服
