使用capture-website+Webpack抛Browser未下载错误，Node.js截图求助

针对你遇到的两个问题（截图代码的错误处理问题，以及Webpack打包时的browser not downloaded错误），我分两部分给你解决方案：

一、修正截图代码的异步调用问题 #

你当前的代码里同时使用了await和回调函数，这会导致逻辑冲突——capture-website.file方法支持Promise异步调用，当你用await时，就不需要再传入回调函数了。回调和await混用会让错误捕获逻辑失效，这也是你可能遇到异常无法正确处理的原因之一。

修正后的代码应该是这样：

try {
  await captureWebsite.file('file.html', 'file.png', { overwrite: true });
  console.log('截图成功');
} catch (e) {
  console.log('error in capture image:', e);
}

如果确实需要用回调风格（不推荐，Promise+async/await更清晰），可以去掉await，只保留回调：

captureWebsite.file('file.html', 'file.png', { overwrite: true }, function(error) {
  if (error) {
    console.log('error', error);
  } else {
    console.log('截图成功');
  }
});

二、解决Webpack下的browser not downloaded错误 #

这个错误本质是Puppeteer（capture-website依赖Puppeteer来启动浏览器）在打包后无法找到已下载的Chrome浏览器，或者安装时Chrome没有正确下载。可以尝试以下几种方案：

1. 确保Chrome浏览器已正确下载 #

首先检查Puppeteer是否已经下载了Chrome。如果之前安装时跳过了下载，或者下载失败，可以手动触发下载：

# 重新安装依赖并强制下载Chrome
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=false npm install

# 或者直接手动安装Chrome浏览器
npx puppeteer browsers install chrome

2. 在Webpack配置中排除Puppeteer打包 #

Puppeteer这类依赖浏览器的库不适合被Webpack打包，应该作为外部依赖在运行时加载。在你的webpack.config.js中添加externals配置：

module.exports = {
  // 其他配置...
  externals: {
    puppeteer: 'require("puppeteer")'
  }
};

这样Webpack会跳过打包Puppeteer，运行时直接从Node_modules加载它，避免路径问题。

3. 手动指定Chrome浏览器路径 #

如果Webpack还是无法自动找到Chrome路径，可以在capture-website的配置中手动指定Chrome的可执行文件路径：

await captureWebsite.file('file.html', 'file.png', {
  overwrite: true,
  launchOptions: {
    // 根据你的系统替换路径
    // Windows示例：'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe'
    // Mac示例：'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'
    // Linux示例：'/usr/bin/google-chrome'
    executablePath: '/path/to/your/google-chrome'
  }
});

4. 检查Node版本兼容性 #

你使用的Node.js 12.16.1虽然能运行capture-website@0.8.1，但部分Puppeteer版本对Node 12的支持有限。如果上面的方案都无效，可以尝试升级Node.js到14.x或更高版本（推荐LTS版本），再重新安装依赖。

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