Headless Chrome无限运行问题：chrome-remote-interface未触发loadEventFired

我之前也碰到过类似的情况，大概率是页面加载过程中存在异常（比如无限加载的资源、重定向未正确处理），或者Headless模式下的渲染/加载逻辑和普通Chrome有差异导致的。下面给你几个可行的解决方案：

1. 增加超时机制，避免程序无限挂起 #

有时候页面可能因为某些资源加载卡住，永远不会触发loadEventFired，先加个超时兜底是很有必要的：

const CDP = require('chrome-remote-interface');
const timeout = 30000; // 30秒超时

CDP((client) => {
    const {Network, Page} = client;
    let timeoutId = setTimeout(() => {
        console.log('页面加载超时，强制关闭连接');
        client.close();
    }, timeout);

    Network.requestWillBeSent((params) => {
        console.log('请求触发:', params.request.url);
    });

    // 监听DOM内容加载完成事件，作为loadEventFired的备选
    Page.domContentEventFired(() => {
        console.log('DOM内容加载完成');
        // 如果不需要等待所有资源加载，可以在这里提前关闭
        // clearTimeout(timeoutId);
        // client.close();
    });

    Page.loadEventFired(() => {
        console.log('页面完全加载完成');
        clearTimeout(timeoutId);
        client.close();
    });

    // 监听资源加载失败/完成事件，排查是否有资源卡住
    Network.loadingFailed((params) => {
        console.error('资源加载失败:', params.request.url, params.errorText);
    });

    Network.loadingFinished((params) => {
        console.log('资源加载完成:', params.requestId);
    });

    Promise.all([
        Network.enable(),
        Page.enable()
    ]).then(() => {
        return Page.navigate({url: 'https://www.gsksaglik.com/internal-redirects.html'});
    }).catch((err) => {
        console.error('导航出错:', err);
        clearTimeout(timeoutId);
        client.close();
    });
}).on('error', (err) => {
    console.error('无法连接到Chrome远程端点:', err);
});

2. 检查页面重定向逻辑 #

你的目标页面是internal-redirects.html，大概率存在内部重定向。可以监听Page.frameNavigated事件，追踪所有页面跳转，确认最终是否到达了预期的页面：

Page.frameNavigated((params) => {
    console.log('页面跳转:', params.frame.url);
});

这个事件会在每次页面（包括子框架）跳转时触发，能帮你看清整个导航流程是否正常。

3. 启用Headless模式的完整渲染（如果需要） #

有时候Headless模式默认的配置会禁用一些特性，导致页面加载异常。你启动Chrome的时候可以尝试加上这些参数：

chrome --headless=new --remote-debugging-port=9222 --disable-gpu --no-sandbox --enable-logging=stderr

--headless=new是新版的Headless模式，更接近普通Chrome的行为，可能能解决一些兼容性问题。

4. 排查Network请求异常 #

通过requestWillBeSent和responseReceived事件的输出，看看是否有请求没有正常返回，或者页面发起了无限循环的请求：

Network.responseReceived((params) => {
    console.log('收到响应:', params.response.url, params.response.status);
});

如果看到某个请求一直处于pending状态，那可能就是导致页面无法触发loadEventFired的原因。

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