最簡單的數據抓取教程，人人都用得上

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

安裝過程

• 在線安裝方式

在線安裝需要具有可FQ網絡，可訪問 Chrome 應用商店

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

1.png

2、然后點擊彈出框中的“添加擴展程序”

2.png

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

3.png

• 本地安裝方式

不能FQ的可以使用本地FQ方式，在本公眾號回復「爬蟲」，可下載 Chrome 和 Web Scraper 擴展插件

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

4.gif

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

3.png

初識 web scraper

打開 Web Scraper

開發人員可以路過看后面了

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

Mac 系統下可以使用快捷鍵 command+option+i ；

也可以直接在 Chrome 界面上操作，點擊設置—>更多工具—>開發者工具

5.png

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

6.png

注意：如果打開開發者工具在瀏覽器的右側區域，則需要調節開發者工具位置到瀏覽器底部。

7.gif

原理及功能說明

數據爬取的思路一般可以簡單概括如下：

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

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

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

原理大致如此，接下來正式認識一下 Web Scraper 這個工具，來，打開開發者工具，點到 Web Scraper 這個標簽欄，看到分為三個部分：

8.png

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

9.png

Sitemaps:sitemap 的集合，所有創建過的 sitemap 都會在這里顯示，并且可以在這里進入一個 sitemap 進行修改和數據抓取等操作。

10.png

Sitemap:進入某個 sitemap ,可以進行一系列的操作，如下圖：

11.png

其中紅色框部分 Add new selector 是必不可少的步驟。selector 是什么呢，字面意思：選擇器，一個選擇器對應網頁上的一部分區域，也就是包含我們要收集的數據的部分。

需要解釋一下，一個 sitemap 下可以有多個 selector，每個 selector 有可以包含子 selector ，一個 selector 可以只對應一個標題，也可以對應一整個區域，此區域可能包含標題、副標題、作者信息、內容等等信息。

Selectors：查看所有的選擇器。

Selector graph:查看當前 sitemap 的拓撲結構圖，根節點是什么，包含幾個選擇器，選擇器下包含的子選擇器。

Edit metadata:可以修改 sitemap 信息，標題和起始地址。

Scrape:開始數據抓取工作。

Export data as CSV:將抓取的數據以 CSV 格式導出。

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

案例實踐

簡單試水 hao123

由淺入深，先以一個最簡單的例子為入口，只是作為進一步認識 Web Scraper 服務

需求背景：看到下面 hao123 頁面中紅色框住的部分了吧，我們的需求就是統計這部分區域中的所有網站名稱和鏈接地址，最后以生成到 Excel 中。 因為這部分內容足夠簡單，當然真正的需求可能比這復雜，這么幾個數據手工統計的時間也很快。

12.png

開始操作

1、假設我們已經打開了 hao123 頁面，并且在此頁面的底部打開了開發者工具，并且定位到了 Web Scraper 標簽欄；

2、點擊“Create Sitemap”；

13.png

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

14.png

4、之后 Web Scraper 自動定位到這個 sitemap，接下來我們添加一個選擇器，點擊“add new selector”；

15.png

5、首先給這個 selector 指定一個 id，就是一個便于識別 名字而已，我這里命名為 hot。因為要獲取名稱和鏈接，所以將Type 設置為 Link，這個類型就是專門為網頁鏈接準備的，選擇 Link 類型后，會自動提取名稱和鏈接兩個屬性；

16.png

6、之后點擊 select ,然后我們在網頁上移動光標，會發現光標所到之處會有顏色變化，變成綠色的，表示就是我么當前選擇的區域。我們將光標定位到需求里說的那一欄的某個鏈接處，例如第一個頭條新聞，在此處單擊，這個部分就會變成紅色，說明已經選中了，我們的目的是要選多個，所以選中這個之后，繼續選第二個，我們會發現，這一行的鏈接都變成了紅色，沒錯，這就是我們要的效果。然后點擊"Done selecting!"(data preview是選中元素的標識符，可手動修改，通過class 、元素名稱來確定元素 如：div.p_name a)，最后別忘了勾選 Multiple ，表示要采集多條數據；

17.png

7、最后保存，save selector。點擊Element preview 可以預覽選擇的區域，點擊 Data preview 可以在瀏覽器里預覽抓取的數據。 后面的文本框里的內容，對于懂技術的同學來說很清楚，這就是 xpath，我們可以不通過鼠標操作，直接手寫 xpath 也可以；

完整操作過程如下：

18.gif

8、上一步操作完，其實就可以導出了。先別急，看一下其他的操作，Sitemap hao123 下的 Selector graph，可以看出拓撲結構圖，_root 是根 selector ，創建一個 sitemap 自動會有一個 _root 節點，可以看到它的子 selector，就是我們創建的 hot selector；

19.png

9、Scrape ，開始抓取數據。

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

20.png

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

21.png

怎么樣，趕緊試一下吧

抓取知乎問題所有回答

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

知乎的特點是，頁面向下滾動才會加載后面的回答

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

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

22.png

3、接下來，開始添加選擇器，點擊 Add new selector；

4、先來分析一下知乎問題的結構，如圖，一個問題由多個這種區域組成，一個區域就是一個回答，這個回答區域包括了昵稱、贊同數、回答內容和發布時間等。紅色框住的部分就是我們要抓取的內容。所以我們抓取數據的邏輯是這樣的：由入口頁進入，獲取當前頁面已加載的回答，找到一個回答區域，提取里面的昵稱、贊同數、回答內容，之后依次向下執行，當已加載的區域獲取完成，模擬向下滾動鼠標，加載后續的部分，一直循環往復，直到全部加載完畢；

23.png

5、內容結構的拓撲圖如下，_root 根節點下包含若干個回答區域，每個區域下包含昵稱、贊同數、回答內容；

24.png

6、按照上面這個拓撲圖，開始來創建選擇器，填寫 selector id 為 answer（隨意填），Type 選擇 Element scroll down 。解釋一下：Element 就是針對這種大范圍區域的，這個區域還要包含子元素，回答區域就對應 Element，因為要從這個區域獲取我們所需的數據，而 Element scroll down 是說這個區域利用向下滾動的方式可以加載更多出來，就是針對這種下拉加載的情況專門設計的。

25.png

7、接下來點擊 Select，然后鼠標到頁面上來，讓當綠色框框住一個回答區域后點擊鼠標，然后移動到下一個回答，同樣當綠色框框住一個回答區域后點擊鼠標。這時，除了這兩個回答外，所有的回答區域都變成了紅色框，然后點擊"Done selecting！”，最后別忘了選擇 Multiple ，之后保存；

26.gif

8、接下來，單擊紅色區域，進入剛剛創建的 answer 選擇器中，創建子選擇器；

27.png

9、創建昵稱選擇器，設置 id 為 name，Type 設置為 Text，Select 選擇昵稱部分，如果沒經驗的話，可能第一次選的不準，發現有錯誤，可以調整，保存即可；

28.gif

10、創建贊同數選擇器；

29.gif

11、創建內容選擇器，由于內容是帶有格式的并且較長，所以有個技巧，從下面選擇會比較方便；

30.gif

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

31.png