Web Scraper傻瓜式爬蟲插件之基礎套路

圖文|娘酷

第一次知道Web Scraper, 是在 知乎用戶@陳大欣 在 零基礎如何學爬蟲技術？的答案中看見的。跟著答案試了一試，內心的驚喜無以言表！！！

我的天哪居然還有這麼方便就可以抓取網頁的軟體，那我還學什麼代碼！！（暴風哭泣

不需要會爬蟲，不需要懂網頁結構，不需要會編程，分分鐘收集網頁數據，新大陸啊朋友們！！簡直太適合我這個懶惰的皮皮蝦了！！

當然，你可以使用任何你熟悉的語言去編寫一個爬蟲，但是當數據量很少只需要抓幾千條或者幾百條的時候，寫代碼的時間都可以手動複製黏貼出來了，於是就完全沒有必要了。

由於大欣的介紹是針對網址帶頁碼的網頁的，接下來我將更深入具體介紹一下靜態網頁和不同的動態載入情況下該如何用Web Scraper來偷懶爬到我們想要的內容。如有不對的地方，請各位不要客氣的指教。

Web Scraper 是什麼？

Web Scraper 是一個 Chrome 谷歌瀏覽器的插件：http://webscraper.io/

這是一個可視化的抓數據的工具。可視化意味著，你只需要知道你要的對象是什麼，在網頁上的哪裡，滑鼠移到目標上單擊，就完成了全部的操作。它的工作原理是模擬人在瀏覽器上的操作並重複這一動作直至所有指定目標被收集結束。

裝上 http://webscraper.io 提供的的插件之後，打開 Chrome 的 Developer Tool，會看到一個 Web Scraper 標籤。Shift+Ctrl+I 喚出開發者工具就可以使用了。將開發者工具置底（在開發者工具的右上角可以選擇放置方式）

準備工作就緒，它就可以指哪爬哪了。接下來介紹一些WS的基本套路

基本套路

以我的簡書關注列表為例，我想要收集我都關注了誰，僅需要他們的網名

圖中可以看到我關注了96個人，第一位是國學上官清晨

新建：打開開發者工具 -> 選擇Web Scraper -> "Create New Sitemap" -> "Create Sitemap" ->給你的蟲子取個名字然後把目標網頁地址放進去（名稱必須為小寫英文字母）,我們就把這個爬蟲命名為「niangkufollwers」

放入鏈接：https://www.jianshu.com/users/f354e815185f/following

添加對象：單擊Add New Selector，Selector即你想收集的目標信息，此處我們先僅收集關注者的名稱。「id」處給對象取個名字，「Type」選擇Text（收集的人名是文本屬性），「Selector」處點擊「Select」按鈕後，將滑鼠移到頁面上，移過之處會變成綠色，單擊目標後會變成紅色。此處單擊「國學上官清晨」和「談心社」兩個名字後，頁面上的其他相同類型的數據也會被自動圈起。該頁被選中多個網名，記得勾選multiple，Done Selecting! -> Save Selector

一個頁面上出現多個目標時記得勾選Multiple

啟動爬蟲！：Sitemap（niangkufollowers） -> Scrape

導出數據（EXPORT）：Sitemap(niangkufollwers) -> Export data as CSV 。CSV格式的文件排版可能亂，需要打開再整理一下。同時你編寫的這個Sitemap也可以導出成語句發給別人使用，你也可以使用別人編寫的蟲蟲。

試試看下面的這個, 在Create New Sitemap -> import sitemap下導入。

{"startUrl":"https://www.jianshu.com/users/f354e815185f/following","selectors":[{"parentSelectors":["_root"],"type":"SelectorElement","multiple":true,"id":"element","selector":"ul.user-list li","delay":""},{"parentSelectors":["element"],"type":"SelectorText","multiple":false,"id":"name","selector":"a.name","regex":"","delay":""},{"parentSelectors":["element"],"type":"SelectorText","multiple":false,"id":"following","selector":"div.meta span:nth-of-type(1)","regex":"","delay":""},{"parentSelectors":["element"],"type":"SelectorText","multiple":false,"id":"follower","selector":"span:nth-of-type(2)","regex":"","delay":""},{"parentSelectors":["element"],"type":"SelectorText","multiple":false,"id":"posts","selector":"span:nth-of-type(3)","regex":"","delay":""},{"parentSelectors":["element"],"type":"SelectorText","multiple":false,"id":"counts","selector":"div.meta:nth-of-type(2)","regex":"","delay":""}],"_id":"ningkufollowers"}

層級圖

導入上面的sitemap後，層級圖在sitemap(niangkufollwers) -> selector graph 中查看

層級圖可以很好的幫助我們整理目標對象的包含與被包含關係。element是我設置的一級對象，name，following等是我設置的二級對象。當要收集的對象包含多維度的數據時，如：關注者列表中的每個網友的相關信息，評論列表中的每條留言的相關信息。梳理目標層級關係有助於我們進行更複雜的數據收集。

下一章，我將介紹一些處理多層級的進階套路。