网页数据抓取入门教程，简单实用人人能学

环境需求

这个工具对环境的要求非常简单，只需一台能上网的电脑和一个版本号大于31的Chrome浏览器即可。当然，浏览器版本越新越好，目前Chrome浏览器已更新至60多版本，满足要求并不难。

在线安装过程

在线安装需要能够翻墙，访问Chrome应用商店

1. 在线访问Web Scraper插件页面，点击“添加至Chrome”按钮。

2. 在弹出的对话框中点击“添加扩展程序”。

3. 安装完成后，Web Scraper的图标将显示在浏览器顶部工具栏中。

本地安装过程

无法翻墙的用户可以使用本地安装方式，在本公众号回复「爬虫」可下载Chrome和Web Scraper扩展插件

1. 打开Chrome浏览器，在地址栏输入chrome://extensions/，进入扩展程序管理界面，然后将下载好的扩展插件Web-Scraper_v0.3.7.crx拖拽到此页面，点击“添加到扩展程序”即可完成安装。如图：

2. 安装完成后，Web Scraper的图标将显示在浏览器顶部工具栏中。

初识Web Scraper

开发人员可以跳过此部分，直接看后面的内容

在Windows系统下，可以使用快捷键F12（某些笔记本可能需要按Fn+F12）；

在Mac系统下，可以使用快捷键Command+Option+I；

也可以直接在Chrome界面上操作，点击设置->更多工具->开发者工具。

打开后的效果如下，其中绿色框部分是开发者工具的完整界面，红色框部分是Web Scraper区域，我们将在后续操作中使用。

注意：如果开发者工具显示在浏览器的右侧区域，需要将其调整到浏览器底部。

原理及功能说明

我们抓取数据通常是为了批量获取信息，而手动操作过于耗时甚至无法完成。例如，抓取微博热门前100条或知乎某个问题的所有答案。

基于这种需求，数据采集通常有两种方式：“我们程序员的方式”和“你们普通人的方式”。

“程序员的方式”是指开发人员根据需求编写爬虫或使用爬虫框架，如Scrapy（Python）、WebMagic（Java）、Crawler4j（Java），视需求复杂程度，编写时间从几小时到几天不等。对于复杂需求，普通人的方式可能不适用。

本文主要介绍“普通人的方式”，即使用Web Scraper工具。其界面简洁、操作简单，且支持导出Excel格式，适合非开发人员快速上手。对于简单需求，开发人员也无需自己编写爬虫，几下鼠标操作比编写代码更快捷。

数据爬取的思路可以概括为：

1. 通过一个或多个入口地址获取初始数据，如文章列表页或带分页的列表页；
2. 根据入口页面中的链接进入下一级页面，获取必要信息；
3. 根据上一级的链接继续进入下一层，获取必要信息（可无限循环）。

接下来，我们正式认识Web Scraper工具。打开开发者工具，切换到Web Scraper标签页，界面分为三个部分：

Create new sitemap：sitemap即网站地图，可以理解为入口地址，针对一个网站或需求创建一个sitemap。例如，抓取知乎某个问题的所有回答，就创建一个sitemap，将问题地址设置为Start URL，然后点击“Create Sitemap”。

Sitemaps：所有创建过的sitemap的集合，可以在这里查看、修改和进行数据抓取。

Sitemap：进入具体的sitemap，可以进行一系列操作，如下图：

其中红色框部分的Add new selector是必不可少的步骤。selector即选择器，对应网页上包含我们要收集数据的区域。

一个sitemap下可以有多个selector，每个selector可以包含子selector，一个selector可以只对应一个标题，也可以对应包含标题、副标题、作者信息、内容等的整个区域。

Selectors：查看所有选择器。

Selector graph：查看当前sitemap的拓扑结构图，显示根节点和选择器的层级关系。

Edit metadata：修改sitemap信息，包括标题和起始地址。

Scrape：开始数据抓取工作。

Export data as CSV：以CSV格式导出抓取的数据。

案例实践

简单试水hao123

由浅入深，以一个最简单的例子作为入门

操作步骤：

1. 打开hao123页面，并在页面底部打开开发者工具，定位到Web Scraper标签栏；
2. 点击“Create Sitemap”；

3. 输入sitemap名称和start url，名称为hao123（不支持中文），start url为hao123网址，然后点击“Create Sitemap”；

4. Web Scraper自动定位到这个sitemap，点击“Add new selector”添加选择器；

5. 给selector指定id（如hot），选择Type为Link，Link类型会自动提取名称和链接两个属性；

6. 点击“Select”，在网页上移动光标，选中所需区域（如头条新闻），继续选中其他链接，确保所有相关链接变为红色，然后点击“Done selecting!”，勾选Multiple表示采集多条数据；

7. 保存选择器，点击“Element preview”预览选择区域，点击“Data preview”在浏览器中预览抓取的数据，文本框中的内容是xpath，可以手动编写xpath；

完整操作过程如下：

8. 操作完成后，可以导出数据。查看Sitemap hao123下的Selector graph，了解拓扑结构图，_root是根selector，包含子selector hot；

9. 点击“Scrape”开始抓取数据。

10. 在Sitemap hao123下的Browse中，通过浏览器直接查看抓取结果；

11. 最后，使用“Export data as CSV”以CSV格式导出数据，其中hot列是标题，hot-href列是链接；

赶紧尝试一下吧！

抓取知乎问题所有回答

知乎的特点是页面向下滚动才会加载后面的回答

1. 在Chrome中打开链接（https://www.zhihu.com/question/30692237），调出开发者工具，定位到Web Scraper标签栏；
2. 点击“Create new sitemap”，填写sitemap名称和start url；

3. 开始添加选择器，点击“Add new selector”；

4. 分析知乎问题的结构，每个回答区域包括昵称、赞同数、回答内容和发布时间等。红色框住的部分是我们要抓取的内容。抓取数据的逻辑是：由入口页进入，获取当前页面已加载的回答，找到回答区域，提取昵称、赞同数、回答内容，依次向下执行，模拟向下滚动鼠标，加载后续部分，循环往复，直到全部加载完毕；

5. 内容结构的拓扑图如下，_root根节点下包含多个回答区域，每个区域下包含昵称、赞同数、回答内容；

6. 根据拓扑图创建选择器，填写selector id为answer，Type选择Element scroll down。Element适用于大范围区域，包含子元素，回答区域对应Element，Element scroll down适用于下拉加载的情况；

7. 点击“Select”，鼠标移动到页面，让绿色框框住一个回答区域后点击鼠标，移动到下一个回答，同样框住后点击鼠标，所有回答区域变成红色框后，点击“Done selecting!”，选择Multiple，保存；

8. 点击红色区域，进入answer选择器，创建子选择器；

9. 创建昵称选择器，设置id为name，Type为Text，选择昵称部分，保存；

10. 创建赞同数选择器；

11. 创建内容选择器，由于内容较长且有格式，从下方选择会更方便；

12. 执行“Scrape”操作，由于内容较多，可能需要几分钟，如果是测试，可以选择回答数较少的问题。

资源获取

在本公众号内回复「爬虫」，获取Chrome和Web Scraper扩展程序的安装包。在本公众号内回复「sitemap」，获取本文中抓取hao123和知乎的sitemap文本。获取的sitemap是一段json文本，通过“Create new Sitemap”下的“Import Sitemap”，输入获取到的sitemap json串，起个名字，点击导入按钮即可。