欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-27 09:02:42
...

1 概述

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

2 配置

  1. debug模式启动一个无头浏览器,并在9222端口监听
chrome 
    --remote-debugging-port=9222 
   --headless 
   --disable-gpu 
  1. 打开有界面chrome浏览器并在地址栏输入
http://localhost:9222/json/list

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

通过界面调试chrome无头浏览器
将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。此外当在红色方框上的地址栏即是无头浏览器对应的地址栏,输入新地址可改变无头浏览器的页面。
通过界面调试chrome无头浏览器

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

http://localhost:9222/json/version

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