Puppeteer应用在Headless模式下始终显示移动端界面问题求助

你的代码存在几个导致Headless模式下返回移动端界面的问题，以下是具体修复步骤：

1. 无效的三元表达式 #

你写的三元判断两边赋值的defaultViewport完全相同，这部分代码毫无意义，直接删除即可，避免污染从package.json导入的puppeteerOptions对象。

2. 过时的page.emulate()方法 #

新版Puppeteer中page.emulate()已被废弃，建议分开使用page.setViewport()和page.setUserAgent()来明确设置桌面端参数，避免兼容性问题。

3. Headless模式下窗口参数失效 #

--start-maximized在Headless模式下不生效，必须通过defaultViewport明确指定桌面尺寸，同时确保isMobile被设置为false。

修复后的完整代码 #

const puppeteer = require('puppeteer');
const puppeteerOptions = require('../../../package.json').puppeteerOptions;

/**
 * To Manage the Puppeteer browser and page objects.
 */
class BrowserScope {
    constructor(args) {
        this.browser = null;
        this.config = null;
        this.page = null;
        this.worldParameters = args && args.parameters ? args.parameters : {};
        this.attach = args && args.attach ? args.attach : null;
    }

    async init() {
        const defaultOptions = {
            args: ['--disable-gpu', '--no-sandbox', '--disable-dev-shm-usage', '--disable-setuid-sandbox'],
            ignoreHTTPSErrors: true,
            defaultViewport: { width: 1920, height: 1080 }, // 直接设置桌面端视口
            isMobile: false // 强制禁用移动端模式
        };

        this.close();

        // 合并配置，优先使用传入的参数，避免修改原始puppeteerOptions
        this.config = { 
            ...defaultOptions, 
            ...puppeteerOptions, 
            ...this.worldParameters 
        };

        if ('browserWSEndpoint' in this.config) {
            this.browser = await puppeteer.connect(this.config);
        } else {
            this.browser = await puppeteer.launch(this.config);
        }

        this.page = await this.browser.newPage();
        
        // 明确设置桌面端User-Agent和视口
        await this.page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36');
        await this.page.setViewport({ width: 1920, height: 1080 });
    }

    async close() {
        if (this.browser) {
            if ('browserWSEndpoint' in this.config) {
                await this.browser.disconnect();
            } else {
                const pages = await this.browser.pages();
                await Promise.all(pages.map(page => page.close()));
                await this.browser.close();
            }
        }

        this.browser = null;
        this.config = null;
        this.page = null;
    }
}

module.exports = BrowserScope;

关键修复点说明 #

• 移除了无效的三元表达式，不再修改原始的puppeteerOptions对象，避免意外的全局污染。
• 在defaultOptions中直接设置isMobile: false和桌面端视口尺寸，确保启动时就以桌面模式初始化。
• 替换废弃的page.emulate()为page.setUserAgent()和page.setViewport()，明确控制浏览器标识和窗口尺寸。
• 删除了Headless模式下无效的--start-maximized参数，改用明确的视口设置。

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