Puppeteer开发调试的4个Tip

[zhaoqize]

翻译自官方 debugging-tips

1.关闭无头模式 - 有时查看浏览器显示的内容很有用。替换无头模式，使用 headless: false 启动完整版本的浏览器

const browser = await puppeteer.launch({headless: false});

2.慢下来 - slowMo 选项会将 Puppeteer 操作浏览器减慢指定的毫秒数。 这是帮助看看发生了什么的另一种方法

const browser = await puppeteer.launch({
    headless: false,
    slowMo: 250 // 减慢 250 毫秒
});

3.捕获控制台输出 - 你能够监听控制台事件。在 page.evaluate() 中调试代码时这也很方便

page.on('console', msg => console.log('PAGE LOG:', msg.text()));

await page.evaluate(() => console.log(`url is ${location.href}`));

await page.evaluate(() => console.log(`url is ${location.href}`));

4.启用详细的日志 - 所有公共 API 调用和内部协议流量都将通过 puppeteer 命名空间下的调试模块进行记录

# 基础的详细日志
env DEBUG="puppeteer:*" node script.js

# 调试输出可以通过命名空间来启用/禁用
env DEBUG="puppeteer:*,-puppeteer:protocol" node script.js # everything BUT protocol messages
env DEBUG="puppeteer:session" node script.js # protocol session messages (protocol messages to targets)
env DEBUG="puppeteer:mouse,puppeteer:keyboard" node script.js # only Mouse and Keyboard API calls

# 协议通信时消息可能比较杂乱。 此示例就是过滤掉所有网络域的消息
env DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'