使用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的工具应该也是同样能够用的。

参考文章：

• puppeteer.connect
• browser.wsEndpoint