使用Puppeteer进行数据抓取(四)——快速调试

在我们使用chrome作为爬虫获取网页数据时，往往需如下几步。

1. 打开chrome
2. 导航至目标页面
3. 等待目标页面加载完成
4. 解析目标页面数据
5. 保存目标页面数据
6. 关闭chrome

我们实际的编码往往集中在第4步，并且，在开发过程中，解析网页数据往往不是一步到位的，需要经过反复多次调试才行。如果每次调试都需要经过这一个过程就显得效率过低。

此时，我们希望有一种类似调试程序中的"附加到进程"类似的方法，不必每次都打开chrome，跳转到目标页面，直接进行第4步，解析现有页面。本文这里就介绍一个这样的方法。

以远程调试的方式启动chrome：

"C:\Program Files (x86)\Google\Chrome\Application\Chrome.exe" -- remote - debugging - port = 9222 -- user - data - dir = ".\UserData"

手动跳转到目标网页。

获取调试借口

访问 http://127.0.0.1:9222/json/version 可以得到如下信息

{
"Browser" : "Chrome/71.0.3578.98" ,
     "Protocol-Version" : "1.3" ,
     "User-Agent" : "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36" ,
     "V8-Version" : "7.1.302.31" ,
     "WebKit-Version" : "537.36 (@15234034d19b85dcd9a03b164ae89d04145d8368)" ,
     "webSocketDebuggerUrl" :      "ws://127.0.0.1:9222/devtools/browser/1b9f6012-6b9b-4450-a6a5-a0bbc8b54ee8"
}

其中的webSocketDebuggerUrl就是主动连接的调试接口。在实际运行过程中，可以通过axios库来自动获取这个地址：

const axios = require ( 'axios' );
async function get_debug_url () {
     var rsp = await axios . get ( 'http://127.0.0.1:9222/json/version' );
     return rsp . data . webSocketDebuggerUrl ;
}

注：这个地址的获取方式在不同的chrome版本中貌似有变化，我之前是在 http://127.0.0.1:9222/json 中获取的，但在chrome71中貌似就不行了。具体可以参看官方文档 devtools protocol 和  browser endpoint 的信息。

连接调试接口

利用 puppeteer.connect(options) 连接，获得的是一个browser对象，再利用 browser.pages() 获取当前打开的page，直接操作page即可。

async function run () {
     var ws = await get_debug_url ();
     console . log ( ws );
     const browser = await puppeteer . connect ({
        browserWSEndpoint: ws ,
        defaultViewport: null
    });
     const pages = await browser . pages ();
     const page = pages [ 0 ];
     await page . screenshot ({ path: 'screen.png' });
     console . log ( "finished" );
};

run ();

究其本质，这里和我文章 使用CefSharp在.Net程序中嵌入Chrome浏览器（六）——调试 中的远程调试的原理是一样的。这里我虽然是用的puppeteer为例，其它基于Chrome DevTools Protocol的 工具 应该也是一样可以用的。