如何在Puppeteer-Sharp中记录JavaScript错误排查PDF转换问题

一、先排查JS未生效的常见原因 #

• 检查Puppeteer-Sharp是否等待JS执行完成再生成PDF
  默认情况下，Puppeteer可能在页面DOM加载完成但JS还没执行完就生成PDF，需要设置等待条件：

  await page.WaitForNavigationAsync(new NavigationOptions { WaitUntil = WaitUntilNavigation.Networkidle0 });
  // 或者等待特定元素状态，比如复选框移动后的目标选择器
  await page.WaitForSelectorAsync("你的复选框移动后的目标选择器");
  

• 确认页面JS是否依赖DOMContentLoaded或window.onload
  如果移动复选框的JS绑定在这些事件上，要确保Puppeteer等待到事件触发后再生成PDF。

二、捕获页面错误与控制台日志 #

要获取Puppeteer-Sharp运行时的页面错误和控制台输出，只需注册对应的事件（放在page.GoToAsync之前）：

// 捕获页面错误
page.Error += (sender, e) =>
{
    Console.WriteLine($"页面错误: {e.Message}");
    Console.WriteLine($"错误栈: {e.StackTrace}");
};

// 捕获控制台日志（包括console.log、console.error等）
page.Console += (sender, e) =>
{
    Console.WriteLine($"控制台[{e.Type}]: {string.Join(" ", e.Args.Select(a => a.JsonValueAsync().Result))}");
};

// 捕获页面加载时的请求错误
page.RequestFailed += (sender, e) =>
{
    Console.WriteLine($"请求失败: {e.Request.Url}，错误: {e.Failure.ErrorText}");
};

这些事件会在生成PDF过程中实时输出页面相关的错误和日志，帮你定位JS是否执行失败、有没有资源加载问题等。

三、额外调试技巧 #

• 启用Headless模式的调试端口，直接在Chrome中查看页面状态：

  var browser = await Puppeteer.LaunchAsync(new LaunchOptions
  {
      Headless = true,
      Args = new[] { "--remote-debugging-port=9222" }
  });
  

  启动后打开Chrome访问chrome://inspect，就能远程调试Puppeteer打开的页面，直接查看JS执行情况、DOM状态，和本地浏览器调试流程一致。

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