puppeteer快速调试

Posted 2021-01-26 tianfang

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

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

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

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

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

"C:Program Files (x86)GoogleChromeApplicationChrome.exe" --remote-debugging-port=9222 --user-data-dir="r:chromecache"

手动跳转到目标网页。

此时就可以通过http://127.0.0.1:9222/json查看调试信息了。

[{
"description": "",
"devtoolsFrontendUrl": "/devtools/inspector.html?ws=127.0.0.1:9222/devtools/page/9067DC581E400BFF607DC63792BBCD2E",
"faviconUrl": "https://tianfang.cnblogs.com/favicon.ico",
"id": "9067DC581E400BFF607DC63792BBCD2E",
"title": "天方 - 博客园",
"type": "page",
"url": "https://tianfang.cnblogs.com/",
"webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/page/9067DC581E400BFF607DC63792BBCD2E"
}]

调试地址为： "ws://127.0.0.1:9222/devtools/page/9067DC581E400BFF607DC63792BBCD2E"。在实际运行过程中，可以通过axios库来自动获取这个地址：

const axios = require(‘axios‘);

async function get_debug_url() {
var rsp = await axios.get(‘http://127.0.0.1:9222/json‘);
return rsp.data[0].webSocketDebuggerUrl;
}

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

const puppeteer = require(‘puppeteer-core‘);

async function run() {
var ws = await get_debug_url();
const browser = await puppeteer.connect({
"browserWSEndpoint": ws,
"defaultViewport": { width: 1000, height: 600 }
});
const pages = await browser.pages();
const page = pages[0];
await page.screenshot({ path: ‘screen.png‘ });
console.log("complte");
};

run();

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

?