图文|娘酷
第一次知道Web Scraper, 是在 知乎用户@陈大欣 在 零基础如何学爬虫技术？的答案中看见的。跟着答案试了一试，内心的惊喜无以言表！！！
我的天哪居然还有这么方便就可以抓取网页的软件，那我还学什么代码！！（暴风哭泣
不需要会爬虫，不需要懂网页结构，不需要会编程，分分钟收集网页数据，新大陆啊朋友们！！简直太适合我这个懒惰的皮皮虾了！！
当然，你可以使用任何你熟悉的语言去编写一个爬虫，但是当数据量很少只需要抓几千条或者几百条的时候，写代码的时间都可以手动复制黏贴出来了，于是就完全没有必要了。
由于大欣的介绍是针对网址带页码的网页的，接下来我将更深入具体介绍一下静态网页和不同的动态加载情况下该如何用Web Scraper来偷懒爬到我们想要的内容。如有不对的地方，请各位不要客气的指教。
Web Scraper 是什么？
Web Scraper 是一个 Chrome 谷歌浏览器的插件：http://webscraper.io/
这是一个可视化的抓数据的工具。可视化意味着，你只需要知道你要的对象是什么，在网页上的哪里，鼠标移到目标上单击，就完成了全部的操作。它的工作原理是模拟人在浏览器上的操作并重复这一动作直至所有指定目标被收集结束。
装上 webscraper.io 提供的的插件之后，打开 Chrome 的 Developer Tool，会看到一个 Web Scraper 标签。Shift+Ctrl+I 唤出开发者工具就可以使用了。将开发者工具置底（在开发者工具的右上角可以选择放置方式）
准备工作就绪，它就可以指哪爬哪了。接下来介绍一些WS的基本套路
基本套路
以我的简书关注列表为例，我想要收集我都关注了谁，仅需要他们的网名
新建：打开开发者工具 -> 选择Web Scraper -> "Create New Sitemap" -> "Create Sitemap" ->给你的虫子取个名字然后把目标网页地址放进去（名称必须为小写英文字母）,我们就把这个爬虫命名为“niangkufollwers”
添加对象：单击Add New Selector，Selector即你想收集的目标信息，此处我们先仅收集关注者的名称。“id”处给对象取个名字，“Type”选择Text（收集的人名是文本属性），“Selector”处点击“Select”按钮后，将鼠标移到页面上，移过之处会变成绿色，单击目标后会变成红色。此处单击“国学上官清晨”和“谈心社”两个名字后，页面上的其他相同类型的数据也会被自动圈起。该页被选中多个网名，记得勾选multiple，Done Selecting! -> Save Selector
启动爬虫！：Sitemap（niangkufollowers） -> Scrape
导出数据（EXPORT）：Sitemap(niangkufollwers) -> Export data as CSV 。CSV格式的文件排版可能乱，需要打开再整理一下。同时你编写的这个Sitemap也可以导出成语句发给别人使用，你也可以使用别人编写的虫虫。
试试看下面的这个, 在Create New Sitemap -> import sitemap下导入。
{"startUrl":"//www.greatytc.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等是我设置的二级对象。当要收集的对象包含多维度的数据时，如：关注者列表中的每个网友的相关信息，评论列表中的每条留言的相关信息。梳理目标层级关系有助于我们进行更复杂的数据收集。
下一章，我将介绍一些处理多层级的进阶套路。
