通过界面调试chrome无头浏览器

1 概述

在无头浏览器中开发应用时，界面状态通常不可见。这时我们可以通过debug模式启动无头浏览器[1]，并新打开一个有界面浏览器来访问无头浏览器，这样就可以在有界面状态下看到无头浏览器的情况。

2 配置

1. debug模式启动一个无头浏览器，并在9222端口监听

chrome 
    --remote-debugging-port=9222 
   --headless 
   --disable-gpu 

2. 打开有界面chrome浏览器并在地址栏输入

http://localhost:9222/json/list

所有无头浏览器可用的websocket连接都会显示在界面上

将devtoolsFrontendUrl标识的地址复制到地址栏

"devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/8FE35484E1E232BF281854A54BCA02B2",
   "id": "8FE35484E1E232BF281854A54BCA02B2",

http://localhost:9222/devtools/inspector.html?ws=localhost:9222/devtools/page/8FE35484E1E232BF281854A54BCA02B2

我们将会在界面上看到无头浏览器的运行状态，这样就方便了我们调试与观察。从console中的输出也可以看到无头浏览器的userAgent。此外当在红色方框上的地址栏即是无头浏览器对应的地址栏，输入新地址可改变无头浏览器的页面。

此外也可以通过json/version[2]来查看版本信息。

http://localhost:9222/json/version

此外通过chrome://inspect/#devices可以查看无界面浏览器，

4 修改无头浏览器参数并观察结果

如果希望改变无头浏览器默认属性，那么可以在启动前注入脚本来实现。
可以通过插件形式，或第三方库来实现。第三方库可以参照参考资料1.

第三方库，例如通过puppeteer-api来修改页面。加载前修改属性，然后通过界面观察状态。

const puppeteer = require('puppeteer-core');
const util = require("./browserUtil");

(async () => {
        const browser = await puppeteer.launch({
            args: [
                '--disable-setuid-sandbox',
                '--no-sandbox',
                '--ignore-certificate-errors',
                '--enable-features=NetworkService',
                '--window-size=1440,900',
                '--remote-debugging=9222'
            ],
            ignoreHTTPSErrors: true,
            headless: true,
            executablePath: "xxx",
        });

            let page = await browser.newPage();
            await page.evaluateOnNewDocument(() => {
                Object.defineProperty(navigator, 'languages', {
                    get: () => ["zh-CN", "zh", "en"]
                });
                Object.defineProperty(navigator, 'language', {
                    get: () => "zh-CN"
                });
            });

            let gPromise = await page.goto("https://www.baidu.com/", {timeout:10000});
})();

5 通过远程机器调试无头浏览器

当打开chrome远程调试端口，默认会绑定localhost地址接收请求。这样可以在本地环境下通过界面观察无头浏览器的页面状态。但当chrome部署在单独的服务器上，默认仅打开远程调试端口，则会出现无法访问的情况，因此需要配置远程调试地址。这是通过–remote-debugging-address选项配置即可。

'--remote-debugging-address=ip'

       const browser = await puppeteer.launch({
            args: [
                '--disable-setuid-sandbox',
                '--no-sandbox',
                '--proxy-server=proxyIp',
                '--ignore-certificate-errors',
                '--remote-debugging-address=ip',
                '--remote-debugging-port=9222',
                '--disable-web-security'
            ],
            ignoreHTTPSErrors: true,
            headless: true,
            executablePath: "/Users/xx/xxx",
        });

6 参考资料

[1]chrome无头浏览器,https://developers.google.com/web/updates/2017/04/headless-chrome
[2]chrome devtools协议,https://chromedevtools.github.io/devtools-protocol/
[3]手机浏览器远程调试工具weinre,https://github.com/nupthale/weinre
[4]远程调试地址配置，https://codereview.chromium.org/1920773003/#ps20001