Puppeteer访问特定网站反复出现ProtocolError: Target closed问题求助

问题概述 #

使用Puppeteer调用http://www.carlosag.net/tools/codetranslator/进行C#到TypeScript的批量转换时，有头模式下第一次循环可正常完成，第二次循环执行到page.evaluate()获取#_result元素内容时，抛出ProtocolError: Protocol error (Runtime.callFunctionOn): Target closed错误。已排除内存不足、提前调用browser.close()的可能性。

实用调试方法 #

1. 启用Puppeteer详细日志
   启动浏览器时添加dumpio: true参数，或设置环境变量DEBUG=puppeteer:*，直接查看浏览器进程的输出日志，定位页面崩溃、导航异常等问题：

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

2. 监听页面核心事件
   给页面绑定close、crash、error事件，捕获异常触发时机与细节：

   page.on('close', () => console.log('[事件] 页面已关闭'));
   page.on('crash', () => console.log('[事件] 页面进程崩溃'));
   page.on('error', err => console.error('[事件] 页面错误:', err));
   page.on('framenavigated', frame => console.log('[事件] 页面导航:', frame.url()));
   

3. 手动复现流程
   打开有头浏览器，手动重复脚本的循环操作，观察网站是否有反爬弹窗、会话过期、强制跳转等行为，或第二次转换时页面是否出现加载异常。

4. 验证页面加载状态
   在执行evaluate()前，确保页面元素已完全渲染，使用waitForSelector或waitForNavigation确认状态：

   await page.waitForSelector('#_result', { timeout: 10000 });
   // 或等待网络请求稳定
   await page.waitForNavigation({ waitUntil: 'networkidle2' });
   

针对性解决方案 #

1. 避免复用Page实例 #

不要在循环中复用同一个page对象，每次转换都新建页面并在完成后关闭，防止页面状态污染或进程崩溃：

async function convertSingleCode(csharpCode) {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  
  try {
    // 执行转换逻辑
    await page.goto('http://www.carlosag.net/tools/codetranslator/', { waitUntil: 'networkidle2' });
    // ... 选择语言、输入代码、点击转换等操作
    await page.waitForSelector('#_result', { timeout: 10000 });
    const result = await page.evaluate(() => document.getElementById('_result').value);
    return result;
  } finally {
    await page.close();
    await browser.close();
  }
}

// 循环调用单例转换函数
for (const code of csharpCodeList) {
  const result = await convertSingleCode(code);
}

2. 增加重试机制 #

针对页面偶尔加载失败的情况，给evaluate()操作添加重试逻辑：

async function getResultWithRetry(page, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      await page.waitForSelector('#_result', { timeout: 5000 });
      return await page.evaluate(() => document.getElementById('_result').value);
    } catch (err) {
      if (i === maxRetries - 1) throw err;
      await page.reload({ waitUntil: 'networkidle2' });
    }
  }
}

3. 调整浏览器启动参数 #

有头模式下添加参数避免浏览器进程崩溃：

const browser = await puppeteer.launch({
  headless: false,
  args: [
    '--no-sandbox',
    '--disable-setuid-sandbox',
    '--disable-dev-shm-usage',
    '--disable-accelerated-2d-canvas',
    '--single-process'
  ]
});

完整可运行脚本 #

const puppeteer = require('puppeteer');

async function convertCSharpToTypeScript(csharpCode) {
  const browser = await puppeteer.launch({
    headless: false,
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--disable-dev-shm-usage'
    ],
    dumpio: true
  });

  const page = await browser.newPage();
  // 绑定事件监听
  page.on('crash', () => console.log('[警告] 页面进程崩溃'));
  page.on('error', err => console.error('[错误] 页面异常:', err));

  try {
    await page.goto('http://www.carlosag.net/tools/codetranslator/', { waitUntil: 'networkidle2' });

    // 选择转换方向：C# -> TypeScript
    await page.select('#sourceLanguage', 'CSharp');
    await page.select('#targetLanguage', 'TypeScript');

    // 输入C#代码
    await page.type('#sourceCode', csharpCode, { delay: 50 });

    // 点击转换按钮
    await page.click('#translateButton');

    // 等待结果加载
    await page.waitForSelector('#_result', { timeout: 10000 });

    // 获取转换结果
    const tsCode = await page.evaluate(() => {
      const resultEl = document.getElementById('_result');
      return resultEl ? resultEl.value.trim() : '';
    });

    return tsCode;
  } finally {
    await page.close();
    await browser.close();
  }
}

// 批量测试
async function runBatchTest() {
  const testCodes = [
    'public class User { public int Id { get; set; } public string Name { get; set; } }',
    'public void PrintMessage(string msg) { Console.WriteLine(msg); }'
  ];

  for (const [index, code] of testCodes.entries()) {
    console.log(`=== 开始转换第 ${index + 1} 段代码 ===`);
    try {
      const result = await convertCSharpToTypeScript(code);
      console.log('转换结果:\n', result);
    } catch (err) {
      console.error('转换失败:', err.message);
    }
    // 循环间隔，避免触发网站限制
    await new Promise(resolve => setTimeout(resolve, 2000));
  }
}

runBatchTest();

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