Puppeteer配置语言无效如何正确加载指定语言网页

你之前的配置存在4个核心兼容问题，是该版本Puppeteer搭配Windows系统的常见坑：

• --lang=fr启动参数在对应版本Chrome的Windows环境下，仅修改浏览器顶层UI语言，不会同步修改内核的默认区域设置，也不会自动带上对应语言的请求头
• 启动时传入的LANGUAGE环境变量仅在Linux/macOS系统下对Chrome生效，Windows环境会直接忽略该参数
• setExtraHTTPHeaders仅对配置完成后发起的请求生效，如果配置后直接打开页面，首次导航的请求不会带上自定义头
• 仅覆写navigator.language/navigator.languages不够，目前多数网站会优先读取Intl接口返回的系统区域，这部分没改的话语言检测会直接失效

可直接运行的完整修复代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false, // 替换为你需要的headless配置
    args: [
      '--lang=fr-FR',
      '--accept-lang=fr-FR,fr' // 内核层强制默认请求头语言
    ]
    // 兜底可加自定义用户目录，避免读取系统缓存配置：
    // userDataDir: './puppeteer_temp_profile'
  });

  const page = await browser.newPage();

  // 所有配置必须在第一次page.goto前完成
  await page.setExtraHTTPHeaders({
    'Accept-Language': 'fr-FR,fr;q=0.9,en;q=0.8'
  });

  await page.evaluateOnNewDocument(() => {
    // 覆写navigator语言属性
    Object.defineProperty(navigator, 'language', {
      get: () => 'fr-FR',
      configurable: true
    });
    Object.defineProperty(navigator, 'languages', {
      get: () => ['fr-FR', 'fr'],
      configurable: true
    });
    // 必加：覆写Intl默认区域，绝大多数不生效问题都是漏了这步
    const originResolve = Intl.DateTimeFormat.prototype.resolvedOptions;
    Intl.DateTimeFormat.prototype.resolvedOptions = function() {
      const res = originResolve.call(this);
      res.locale = 'fr-FR';
      return res;
    };
  });

  // 配置完成后再跳转目标页
  await page.goto('替换为你的目标页面URL', { waitUntil: 'networkidle2' });
})();

验证方法 #

先用有头模式启动，打开页面后在开发者工具控制台执行三个命令校验配置是否生效：

1. navigator.language 预期返回fr-FR
2. Intl.DateTimeFormat().resolvedOptions().locale 预期返回fr-FR
3. performance.getEntriesByType('navigation')[0].requestHeaders['accept-language'] 预期包含fr-FR
   三个校验都通过的话页面就会正常加载法语版本，校验通过后再切换为无头模式即可。

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