如何使用无头的Chrome开发者工具查看量角器进度，而不会干扰测试？

如何解决如何使用无头的Chrome开发者工具查看量角器进度，而不会干扰测试？

背景

我正在为Angular 2应用程序进行端到端测试。我的量角器功能是使用Chrome浏览器配置的，并且可以在无头模式下运行。我创建了一个Docker Compose堆栈，用于在container中使用无头Chrome运行E2E测试。它运行良好，但是运行堆栈时，我看不到浏览器中的规格。我必须以窗口模式在堆栈外部运行测试，以获得图形反馈。

问题

我想使用E2E堆栈并通过端口chrome-devtools-frontend.appspot.com连接到Chrome开发者工具远程调试前端（通过9222）。 DevTools之所以出色，是因为它有一个显示无头浏览器正在执行的操作以及所有出色工具的窗口。不幸的是，屏幕投射似乎在打开时会干扰测试用例。单击按钮失败，并选择随机文本。在没有屏幕投射预览窗口的情况下运行测试可以避免该问题，但是随后我看不到发生了什么。

问题

是否可以在无头Chrome上运行我的量角器测试，从而允许我在测试运行时访问Chrome开发人员工具远程调试前端而不会影响结果？

研究

我已经研究了Chrome capabilities和Chrome options，但是找不到能够启用“仅查看”设备窗口的功能。我也考虑过使用VNC远程桌面，但我希望拥有集成的开发经验。我认为如果无法使用DevTools预览，则结合使用VNC和Chrome DevTools可能是一个不错的选择。

配置

function buildChromeArgs() {
    const args = [
        '--no-sandbox','--disable-dev-shm-usage','--window-size=1920,1080','--disable-gpu','--force-device-scale-factor=1','--remote-debugging-address=0.0.0.0','--remote-debugging-port=9222'
    ];

    if (headless == true || headless == 'true') {
        args.push('--headless');
    }

    return args;
}

multiCapabilities: [
    {
        'browserName': 'chrome','chromeOptions': {
            'args': buildChromeArgs()
        },},]