对于一些简单的网页，我们可以非常容易的通过Develop Tool来获取其请求报文规律，并仿照其构建报文来获取页面信息。但是，随着网页越来越复杂，许多页面是由js动态渲染生成的。要获取这类信息，则需要蜘蛛程序模拟js渲染过程，此时必须研究其js脚本才能完成信息的获取。

虽然从理论上来讲，任何浏览器能获取到的信息，我们完全可以编写爬虫来获取到。但是而这个分析过程往往并不是一个比较麻烦的过程，往往存在如下困难：

• 逆向分析js费时费力，
• 许多爬虫作者并不是前端工程师，效率不高
• 开发阶段容易分析不全，使用时再改开销很大
• 许多信息需要登陆，点击等操作才能获取到，爬虫模拟这些行为比较费劲
• 爬虫容易被网站屏蔽

对于动态网页，一种策略是：首先通过浏览器访问目标网页，由浏览器完成解析后生成渲染后的Html文件，再由蜘蛛程序解析渲染后的Html文件。这样就非常方便的解决的前面遇到的大多数问题了。

要实现这个操作，则需要一个能与应用程序交互的类浏览器软件。网上看到的文章大多数是介绍通过phantomjs完成这一过程，不过用过它的人估计都会对它吐槽不已的，这里我这里就不一一列举了，感兴趣的朋友可以看看别人的吐槽：让人欢喜让我忧的phantomjs。

后来，发现Chrome本身也是可以通过远程调试协议实现与应用程序交互的，并且功能更加强大，从此果断的切换到了Chrome，使用它作为动态网页的渲染器，本文这里对使用Chrome的优越性并不想做太多介绍，主要介绍如何使用它。

启动Chrome

要使得Chrome支持与应用程序交互，首先需要指定远程调试端口：

chrome.exe --remote-debugging-port=9222

• 如果要指定缓存位置，可以添加启动参数：--user-data-dir=r:\cache
• 如果要使用无GUI模式（Headless），则需要添加参数： --disable-gpu --headless

注： Headless 模式目前尚还没有正式完善，目前的情况是：

1. --headless在Linux的Chrome59中支持，Windows 的Canary版本60以上的版本支持
2. --disable-gpu参数在未来可能不需要，

作为爬虫来说，使用Headless的方式可能更为常见，不过，在学习和开发的过程中，往往还是带着GUI的方式跟为方便些的。这里就使用带GUI的方式启动Chrome。

标签管理

启动后，我们就可以在程序中通过socket的方式实现和chrome的交互了。Chrome Debug API包括两个部分：标签管理和页面管理。首先我们介绍标签管理部分，它是Rest形式的API接口，我们可以通过浏览器进行协议的模拟。

首先用浏览器打开 http://127.0.0.1:9222/json，这是当前所有标签的list接口，可以看到如下接口数据：

[
????{
????????"description": "",
????????"devtoolsFrontendUrl": "/devtools/inspector.html?ws=127.0.0.1:9222/devtools/page/6d4f925f-7220-47cd-a4f9-800686445ffb",
????????"faviconUrl": "http://tianfang.cnblogs.com/favicon.ico",
????????"id": "6d4f925f-7220-47cd-a4f9-800686445ffb",
????????"title": "天方 - 博客园",
????????"type": "page",
????????"url": "http://tianfang.cnblogs.com/",
????????"webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/page/6d4f925f-7220-47cd-a4f9-800686445ffb"
????},
????{
????????"description": "",
????????"devtoolsFrontendUrl": "/devtools/inspector.html?ws=127.0.0.1:9222/devtools/page/92615aad-5862-48d5-983d-248468e9741a",
????????"id": "92615aad-5862-48d5-983d-248468e9741a",
????????"title": "Worker pid:6008",
????????"type": "service_worker",
????????"url": "https://www.google.com/_/chrome/newtab-serviceworker.js",
????????"webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/page/92615aad-5862-48d5-983d-248468e9741a"
????}
]

相信大部分人从这个页面中就可以它的基本信息，这里仍然简单的介绍一下：

• Id：页面的id信息
• devtoolsFrontendUrl：开发工具Url，可以通过chrome访问这个url来实现内置的调试工具访问
• type：当前进程的类型，只有类型为page的才是浏览器页面，其余类型的是后台背景进程，我们不需要操作这类对象
• url：当前页面访问的地址
• webSocketDebuggerUrl：当前页面的调试接口地址

实际上，chrome本身也内置了一个访问调试协议的工具，我们可以直接通过http://127.0.0.1:9222来使用它。

除此之外，常见的访问命令如下：

• http://127.0.0.1:9222/json?：查看已经打开的Tab列表
• http://127.0.0.1:9222/json/version?: 查看浏览器版本信息
• http://127.0.0.1:9222/json/new?http://www.baidu.com?: 新开Tab打开指定地址
• http://127.0.0.1:9222/json/close/92615aad-5862-48d5-983d-248468e9741a?: 关闭指定Id的Tab页面
• http://127.0.0.1:9222/json/activate/92615aad-5862-48d5-983d-248468e9741a?: 切换到指定Id的Tab页面

?

页面操作

前面的API只能做到简单的打开，关闭标签操作，我么往往还需要对页面进行更详细的操作，由于篇幅所限，本文了先介绍到这里，关于页面操作的方式，在后续文章中再做跟进一步的介绍。

使用Chrome快速实现数据的抓取（一）