Puppeteer出现异常诡异行为的技术问询

我来帮你梳理下可能导致Puppeteer出现诡异行为的几个常见坑点，结合你给出的代码片段逐一分析：

1. 先补全未完成的代码片段 #

你贴的代码里await page.setViewport({width: 1000, he...明显没写完，这种语法错误会直接导致脚本运行异常，先把它补全（比如加上height: 800），语法问题往往是最容易被忽略的“诡异”源头。

2. 完善异常处理与资源释放 #

你虽然加了全局的unhandledRejection监听，但当前的try/catch和资源释放逻辑还有优化空间：

• 把browser变量提到try外部，确保在finally块里能关闭浏览器，避免僵尸进程（这会导致后续启动失败、端口占用等诡异问题）
• 全局的unhandledRejection可以保留，但try/catch要覆盖所有异步操作

优化后的代码示例：

process.on("unhandledRejection", (reason, p) => {
  console.error("Unhandled Rejection at: Promise", p, "reason:", reason);
});

const puppeteer = require('puppeteer');

async function getPic() {
  let browser; // 提到外部，确保finally能访问
  try {
    browser = await puppeteer.launch(/*{headless: false}*/);
    const page = await browser.newPage();
    await page.setViewport({width: 1000, height: 800}); // 补全参数
    // 这里添加你的其他操作：比如page.goto、截图、元素操作等
  } catch (err) {
    console.error('执行过程出错:', err); // 捕获并打印具体错误
  } finally {
    if (browser) await browser.close(); // 不管成功失败，都关闭浏览器
  }
}

3. 检查Headless模式的差异 #

你注释掉了{headless: false}，无头模式和有头模式的渲染、反爬检测逻辑可能有差异。建议临时打开有头模式，直观查看浏览器里的实际运行情况——比如页面是否加载卡住、元素是否存在、有没有弹出反爬验证框，这些在无头模式下很难察觉。

4. 确保异步操作的等待时机 #

Puppeteer的很多操作依赖页面加载状态，比如page.goto()默认只等待load事件，但如果页面有动态渲染的内容，过早操作DOM会导致找不到元素、内容为空等“诡异”结果。建议明确添加等待逻辑：

await page.goto('你的目标URL');
// 等待目标元素出现，确保内容加载完成
await page.waitForSelector('#需要操作的元素ID', {timeout: 5000});
// 或者等待页面导航完成
await page.waitForNavigation({waitUntil: 'networkidle2'});

5. 排查资源加载问题 #

页面加载慢、某些资源（比如图片、视频）加载失败也会导致后续操作异常。可以通过拦截不必要的资源来加快加载速度，同时排查资源错误：

const page = await browser.newPage();
await page.setRequestInterception(true);
page.on('request', (req) => {
  // 拦截图片、视频等非必要资源
  if (['image', 'media', 'font'].includes(req.resourceType())) {
    req.abort();
  } else {
    req.continue();
  }
});
page.on('requestfailed', (req) => {
  console.error('资源加载失败:', req.url(), req.failure().errorText);
});

如果以上步骤都排查过还是存在问题，建议把完整的代码和具体的错误信息（比如unhandledRejection里打印的reason）贴出来，这样能更精准地定位问题。

内容的提问来源于stack exchange，提问作者user1584421