Web Scraper 是一款免費(fèi)的，適用于普通用戶（不需要專業(yè) IT 技術(shù)的）的爬蟲工具，可以方便的通過鼠標(biāo)和簡單配置獲取你所想要數(shù)據(jù)。例如知乎回答列表、微博熱門、微博評論、電商網(wǎng)站商品信息、博客文章列表等等。

環(huán)境需求

這么簡單的工具當(dāng)然對環(huán)境的要求也很簡單了，只需要一臺能聯(lián)網(wǎng)的電腦，一個(gè)版本不是很低的 Chrome 瀏覽器，具體的版本要求是大于 31 ，當(dāng)然是越新越好了。目前 Chrome 的已經(jīng)是60多了，也就是說這個(gè)版本要求也不是很高。

安裝過程

• 在線安裝方式

  在線安裝需要具有可翻墻網(wǎng)絡(luò)，可訪問 Chrome 應(yīng)用商店

  1、在線訪問 web Scraper 插件 ，點(diǎn)擊 “添加至 CHROME”。

1.png

2、然后點(diǎn)擊彈出框中的“添加擴(kuò)展程序”

2.png

3、安裝完成后在頂部工具欄顯示 Web Scraper 的圖標(biāo)。

3.png

• 本地安裝方式

  不能翻墻的可以使用本地翻墻方式，在本公眾號回復(fù)「爬蟲」，可下載 Chrome 和 Web Scraper 擴(kuò)展插件

  1、打開 Chrome，在地址欄輸入 chrome://extensions/ ，進(jìn)入擴(kuò)展程序管理界面，然后將下載好的擴(kuò)展插件 Web-Scraper_v0.3.7.crx 拖拽到此頁面，點(diǎn)擊“添加到擴(kuò)展程序”即可完成安裝。如圖：

4.gif

2、安裝完成后在頂部工具欄顯示 Web Scraper 的圖標(biāo)。

3.png

初識 web scraper

**打開 Web Scraper **

開發(fā)人員可以路過看后面了

windows 系統(tǒng)下可以使用快捷鍵 F12，有的型號的筆記本需要按 Fn+F12；

Mac 系統(tǒng)下可以使用快捷鍵 command+option+i ；

也可以直接在 Chrome 界面上操作，點(diǎn)擊設(shè)置—>更多工具—>開發(fā)者工具

5.png

打開后的效果如下，其中綠色框部分是開發(fā)者工具的完整界面，紅色框部分是 Web Scraper 區(qū)域，也就是我們之后要操作的部分。

6.png

注意：如果打開開發(fā)者工具在瀏覽器的右側(cè)區(qū)域，則需要調(diào)節(jié)開發(fā)者工具位置到瀏覽器底部。

7.gif

原理及功能說明

我們抓取數(shù)據(jù)一般都是什么場景呢，如果只是零星的幾條數(shù)據(jù)或者特定的某條數(shù)據(jù)也就不值得用工具了，之所以用工具是因?yàn)橐康墨@取數(shù)據(jù)，而用手工方式又太耗時(shí)費(fèi)力，甚至根本不能完成。例如抓取微博熱門前100條，當(dāng)然可以一頁一頁的翻，但是實(shí)在是太耗精力，再比如說知乎某個(gè)問題的所有答案，有的熱門問題回答數(shù)成千上萬，手工來，還是省省吧。

基于這樣的一種需求，一般可采用兩種方式采集這些數(shù)據(jù)，一種叫“我們程序員的方式”，另一種叫“你們普通人的方式”。

“我們程序員的方式”是指開發(fā)人員會(huì)根據(jù)需求自己寫個(gè)爬蟲或者利用某個(gè)爬蟲框架，盯著屏幕狂敲代碼，根據(jù)需求的復(fù)雜程度，敲代碼的時(shí)長從一兩個(gè)小時(shí)到一兩天不等，當(dāng)然如果時(shí)間太長的話可能是因?yàn)樾枨筇珡?fù)雜，針對這種復(fù)雜的需求來說，普通人的方式或許也就行不通了。常用的爬蟲框架 Scrapy（Python）、WebMagic（Java）、Crawler4j（Java）。

這篇還是主要介紹“你們普通人的方式”，也就是 Web Scraper 這個(gè)工具，因?yàn)槠浣缑婧唵巍⒉僮骱唵危⑶铱蓪?dǎo)出 Excel 格式，不懂開發(fā)的同學(xué)也可以很快上手。而且對于一些簡單的需求，開發(fā)人員也沒必要自己實(shí)現(xiàn)個(gè)爬蟲，點(diǎn)幾下鼠標(biāo)畢竟要比敲半天代碼快吧。

數(shù)據(jù)爬取的思路一般可以簡單概括如下：

1、通過一個(gè)或多個(gè)入口地址，獲取初始數(shù)據(jù)。例如一個(gè)文章列表頁，或者具有某種規(guī)則的頁面，例如帶有分頁的列表頁；

2、根據(jù)入口頁面的某些信息，例如鏈接指向，進(jìn)入下一級頁面，獲取必要信息；

3、根據(jù)上一級的鏈接繼續(xù)進(jìn)入下一層，獲取必要信息（此步驟可以無限循環(huán)下去）；

原理大致如此，接下來正式認(rèn)識一下 Web Scraper 這個(gè)工具，來，打開開發(fā)者工具，點(diǎn)到 Web Scraper 這個(gè)標(biāo)簽欄，看到分為三個(gè)部分：

8.png

Create new sitemap：首先理解 sitemap ，字面意思網(wǎng)站地圖，這里可以理解為一個(gè)入口地址，可以理解為其對應(yīng)一個(gè)網(wǎng)站，對應(yīng)一個(gè)需求，假設(shè)要獲取知乎上的一個(gè)問題的回答，就創(chuàng)建一個(gè) sitemap ,并將這個(gè)問題所在的地址設(shè)置為sitemap 的 Start URL，然后點(diǎn)擊 “Create Sitemap”即可創(chuàng)建一個(gè) sitemap。

9.png

Sitemaps:sitemap 的集合，所有創(chuàng)建過的 sitemap 都會(huì)在這里顯示，并且可以在這里進(jìn)入一個(gè) sitemap 進(jìn)行修改和數(shù)據(jù)抓取等操作。

10.png

Sitemap:進(jìn)入某個(gè) sitemap ,可以進(jìn)行一系列的操作，如下圖：

11.png

其中紅色框部分 Add new selector 是必不可少的步驟。selector 是什么呢，字面意思：選擇器，一個(gè)選擇器對應(yīng)網(wǎng)頁上的一部分區(qū)域，也就是包含我們要收集的數(shù)據(jù)的部分。

需要解釋一下，一個(gè) sitemap 下可以有多個(gè) selector，每個(gè) selector 有可以包含子 selector ，一個(gè) selector 可以只對應(yīng)一個(gè)標(biāo)題，也可以對應(yīng)一整個(gè)區(qū)域，此區(qū)域可能包含標(biāo)題、副標(biāo)題、作者信息、內(nèi)容等等信息。

Selectors：查看所有的選擇器。

Selector graph:查看當(dāng)前 sitemap 的拓?fù)浣Y(jié)構(gòu)圖，根節(jié)點(diǎn)是什么，包含幾個(gè)選擇器，選擇器下包含的子選擇器。

Edit metadata:可以修改 sitemap 信息，標(biāo)題和起始地址。

Scrape:開始數(shù)據(jù)抓取工作。

Export data as CSV:將抓取的數(shù)據(jù)以 CSV 格式導(dǎo)出。

到這里，有一個(gè)簡單的認(rèn)識就可以了，實(shí)踐出真知，具體的操作案例才具有說服力，下面就以幾個(gè)例子來說一說具體的用法。

案例實(shí)踐

簡單試水 hao123

由淺入深，先以一個(gè)最簡單的例子為入口，只是作為進(jìn)一步認(rèn)識 Web Scraper 服務(wù)

需求背景：看到下面 hao123 頁面中紅色框住的部分了吧，我們的需求就是統(tǒng)計(jì)這部分區(qū)域中的所有網(wǎng)站名稱和鏈接地址，最后以生成到 Excel 中。 因?yàn)檫@部分內(nèi)容足夠簡單，當(dāng)然真正的需求可能比這復(fù)雜，這么幾個(gè)數(shù)據(jù)手工統(tǒng)計(jì)的時(shí)間也很快。

12.png

開始操作

1、假設(shè)我們已經(jīng)打開了 hao123 頁面，并且在此頁面的底部打開了開發(fā)者工具，并且定位到了 Web Scraper 標(biāo)簽欄；

2、點(diǎn)擊“Create Sitemap”；

13.png

3、之后輸入 sitemap 名稱和 start url，名稱只為方便我們標(biāo)記，就命名為hao123（注意，不支持中文），start url 就是hao123的網(wǎng)址，然后點(diǎn)擊 create sitemap；

14.png

4、之后 Web Scraper 自動(dòng)定位到這個(gè) sitemap，接下來我們添加一個(gè)選擇器，點(diǎn)擊“add new selector”；

15.png

5、首先給這個(gè) selector 指定一個(gè) id，就是一個(gè)便于識別 名字而已，我這里命名為 hot。因?yàn)橐@取名稱和鏈接，所以將Type 設(shè)置為 Link，這個(gè)類型就是專門為網(wǎng)頁鏈接準(zhǔn)備的，選擇 Link 類型后，會(huì)自動(dòng)提取名稱和鏈接兩個(gè)屬性；

16.png

6、之后點(diǎn)擊 select ,然后我們在網(wǎng)頁上移動(dòng)光標(biāo)，會(huì)發(fā)現(xiàn)光標(biāo)所到之處會(huì)有顏色變化，變成綠色的，表示就是我么當(dāng)前選擇的區(qū)域。我們將光標(biāo)定位到需求里說的那一欄的某個(gè)鏈接處，例如第一個(gè)頭條新聞，在此處單擊，這個(gè)部分就會(huì)變成紅色，說明已經(jīng)選中了，我們的目的是要選多個(gè)，所以選中這個(gè)之后，繼續(xù)選第二個(gè)，我們會(huì)發(fā)現(xiàn)，這一行的鏈接都變成了紅色，沒錯(cuò)，這就是我們要的效果。然后點(diǎn)擊"Done selecting!"，最后別忘了勾選 Multiple ，表示要采集多條數(shù)據(jù)；

17.png

7、最后保存，save selector。點(diǎn)擊Element preview 可以預(yù)覽選擇的區(qū)域，點(diǎn)擊 Data preview 可以在瀏覽器里預(yù)覽抓取的數(shù)據(jù)。 后面的文本框里的內(nèi)容，對于懂技術(shù)的同學(xué)來說很清楚，這就是 xpath，我們可以不通過鼠標(biāo)操作，直接手寫 xpath 也可以；

完整操作過程如下：

18.gif

8、上一步操作完，其實(shí)就可以導(dǎo)出了。先別急，看一下其他的操作，Sitemap hao123 下的 Selector graph，可以看出拓?fù)浣Y(jié)構(gòu)圖，_root 是根 selector ，創(chuàng)建一個(gè) sitemap 自動(dòng)會(huì)有一個(gè) _root 節(jié)點(diǎn)，可以看到它的子 selector，就是我們創(chuàng)建的 hot selector；

19.png

9、Scrape ，開始抓取數(shù)據(jù)。

10、Sitemap hao123 下的 Browse ，可以通過瀏覽器直接查看抓取的最后結(jié)果,需要再；

20.png

11、最后，使用 Export data as CSV，以 CSV 格式導(dǎo)出，其中 hot 列是標(biāo)題，hot-href 列是鏈接；

21.png

怎么樣，趕緊試一下吧

抓取知乎問題所有回答

簡單的介紹完了，接下來試一個(gè)有些難度的，抓取一個(gè)知乎問題的所有答案，包括回答者昵稱、贊同數(shù)量、回答內(nèi)容。問題：為什么鮮有炫富的程序員？

知乎的特點(diǎn)是，頁面向下滾動(dòng)才會(huì)加載后面的回答

1、首先還是在 Chrome 中打開這個(gè)鏈接，鏈接地址為：https://www.zhihu.com/question/30692237，并調(diào)出開發(fā)者工具，定位到 Web Scraper 標(biāo)簽欄；

2、Create new sitemap，填寫 sitemap name 和 start url;

22.png

3、接下來，開始添加選擇器，點(diǎn)擊 Add new selector；

4、先來分析一下知乎問題的結(jié)構(gòu)，如圖，一個(gè)問題由多個(gè)這種區(qū)域組成，一個(gè)區(qū)域就是一個(gè)回答，這個(gè)回答區(qū)域包括了昵稱、贊同數(shù)、回答內(nèi)容和發(fā)布時(shí)間等。紅色框住的部分就是我們要抓取的內(nèi)容。所以我們抓取數(shù)據(jù)的邏輯是這樣的：由入口頁進(jìn)入，獲取當(dāng)前頁面已加載的回答，找到一個(gè)回答區(qū)域，提取里面的昵稱、贊同數(shù)、回答內(nèi)容，之后依次向下執(zhí)行，當(dāng)已加載的區(qū)域獲取完成，模擬向下滾動(dòng)鼠標(biāo)，加載后續(xù)的部分，一直循環(huán)往復(fù)，直到全部加載完畢；

23.png

5、內(nèi)容結(jié)構(gòu)的拓?fù)鋱D如下，_root 根節(jié)點(diǎn)下包含若干個(gè)回答區(qū)域，每個(gè)區(qū)域下包含昵稱、贊同數(shù)、回答內(nèi)容；

24.png

6、按照上面這個(gè)拓?fù)鋱D，開始來創(chuàng)建選擇器，填寫 selector id 為 answer（隨意填），Type 選擇 Element scroll down 。解釋一下：Element 就是針對這種大范圍區(qū)域的，這個(gè)區(qū)域還要包含子元素，回答區(qū)域就對應(yīng) Element，因?yàn)橐獜倪@個(gè)區(qū)域獲取我們所需的數(shù)據(jù)，而 Element scroll down 是說這個(gè)區(qū)域利用向下滾動(dòng)的方式可以加載更多出來，就是針對這種下拉加載的情況專門設(shè)計(jì)的。

25.png

7、接下來點(diǎn)擊 Select，然后鼠標(biāo)到頁面上來，讓當(dāng)綠色框框住一個(gè)回答區(qū)域后點(diǎn)擊鼠標(biāo)，然后移動(dòng)到下一個(gè)回答，同樣當(dāng)綠色框框住一個(gè)回答區(qū)域后點(diǎn)擊鼠標(biāo)。這時(shí)，除了這兩個(gè)回答外，所有的回答區(qū)域都變成了紅色框，然后點(diǎn)擊"Done selecting！”，最后別忘了選擇 Multiple ，之后保存；

26.gif

8、接下來，單擊紅色區(qū)域，進(jìn)入剛剛創(chuàng)建的 answer 選擇器中，創(chuàng)建子選擇器；

27.png

9、創(chuàng)建昵稱選擇器，設(shè)置 id 為 name，Type 設(shè)置為 Text，Select 選擇昵稱部分，如果沒經(jīng)驗(yàn)的話，可能第一次選的不準(zhǔn)，發(fā)現(xiàn)有錯(cuò)誤，可以調(diào)整，保存即可；

28.gif

10、創(chuàng)建贊同數(shù)選擇器；

29.gif

11、創(chuàng)建內(nèi)容選擇器，由于內(nèi)容是帶有格式的并且較長，所以有個(gè)技巧，從下面選擇會(huì)比較方便；

30.gif

12、執(zhí)行 Scrape 操作，由于內(nèi)容較多，可能需要幾分鐘的時(shí)間，如果是為了做測試，可以找一個(gè)回答數(shù)較少的問題做測試。

31.png

資源獲取

• 在本公眾號內(nèi)回復(fù)「爬蟲」，獲取 Chrome 和 Web Scraper 擴(kuò)展程序的安裝包
• 在本公眾號內(nèi)回復(fù) 「sitemap」，獲取本文中抓取 hao123 和知乎的 sitemap 文本

獲取下來的 sitemap 是一段 json 文本，通過 Create new Sitemap 下的 Import Sitemap，然后輸入獲取到的 sitemap json 串，并起個(gè)名字，然后點(diǎn)擊導(dǎo)入按鈕即可。

32.png

33.png

最后，如果有什么問題，可以在公眾號里直接留言或回復(fù)
點(diǎn)擊查看文章
公眾號:古時(shí)的風(fēng)箏