mac 通过 chrome 获取 数据

自从前后端分离后，想要获取数据就比较困难了。现在也有很多无界面浏览器，可以实现数据抓取，例如：Phantomjs。

今天所说的不是无界面浏览器，而通过chrome websocke api来实现，数据的抓取。

1，命令行启动

$ mkdir /Users/zhangying/chrome_debug
$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/Users/zhangying/chrome_debug

chrome_debug这个路径，会存命令行下打开的chrome安装的扩展，用户浏览数据等信息。

命令行下执行成功后，会弹个chrome浏览器。在该浏览器中打开baidu网站，

http://127.0.0.1:9222/json，可以发现以下内容

[{
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/463F428009792A98D095278C653D602F",
   "id": "463F428009792A98D095278C653D602F",
   "title": "localhost:9222/json",
   "type": "page",
   "url": "http://localhost:9222/json",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/463F428009792A98D095278C653D602F"
},{
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/A5DD48135F84592F521F4E09EE501A45",
   "faviconUrl": "https://www.baidu.com/favicon.ico",
   "id": "A5DD48135F84592F521F4E09EE501A45",
   "title": "百度一下，你就知道",
   "type": "page",
   "url": "https://www.baidu.com/",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/A5DD48135F84592F521F4E09EE501A45"
}]

2，js测试

打开F12开发者工具，在console中执行，以下命令

var ws = new WebSocket('ws://localhost:9222/devtools/page/A5DD48135F84592F521F4E09EE501A45');
ws.onopen= function() {
 ws.send('{"id": 1, "method": "Page.navigate", "params": {"url": "http://blog.51yip.com"}}')
};
ws.onmessage= function(evt) {
 console.log('Received a message from the server!'+evt.data);
};

会发现，chrome 标签页跳转了。

3，simple websocket client测试

在firefox中，安装simple websocket client扩展，然后

websocket client 测试

点击send后，chrome 浏览器一个标签页跳转了。

4，执行JS

websocket runtime 执行js

可以看出，可以通过程序的方式，在一个页面中执行JS，并获取返回值。如果在这个页面中注入jquery的话，就可以很轻松的方式，获取页面中的内容了。

Chrome DevTools Protocol的method指令非常的多，最常用的有以下三个：

跳转到指定页面：Page.navigate
执行JS函数：Runtime.evaluate
获取页面cookie：Page.getCookies