在 Electron 中使用“remote-debugging-port”时如何获取 Chrome 的远程调试 URL？答案

【问题标题】：How can I get Chrome's remote debug URL when using the "remote-debugging-port" in Electron?在 Electron 中使用“remote-debugging-port”时如何获取 Chrome 的远程调试 URL？
【发布时间】：2019-08-29 22:28:10
【问题描述】：

我在我的 Electron 主进程中为 Chrome 设置了 remote-debugging-port 选项：

app.commandLine.appendSwitch('remote-debugging-port', '8315')

现在，我如何获取可用于连接 Chrome 的ws:// URL？

我看到运行 Electron 时的输出显示

DevTools listening on ws://127.0.0.1:8315/devtools/browser/52ba17be-0c0d-4db6-b6f9-a30dc10df13c

但我想从主进程中获取此 URL。网址每次都不一样。如何从 Electron 主进程中获取它？

我可以从我的主进程 JavaScript 代码中以某种方式读取我的 Electron 的主进程输出吗？

【问题讨论】：

标签： javascript google-chrome electron

【解决方案1】：

以下是如何从您的 Electron 主进程代码将 Puppeteer 连接到您的 Electron 窗口：

app.commandLine.appendSwitch('remote-debugging-port', '8315')

async function test() {
    const response = await fetch(`http://localhost:8315/json/list?t=${Math.random()}`)
    const debugEndpoints = await response.json()

    let webSocketDebuggerUrl = ''

    for (const debugEndpoint of debugEndpoints) {
        if (debugEndpoint.title === 'Saffron') {
            webSocketDebuggerUrl = debugEndpoint.webSocketDebuggerUrl
            break
        }
    }

    const browser = await puppeteer.connect({
        browserWSEndpoint: webSocketDebuggerUrl
    })

    // use puppeteer APIs now!
}

// ... make your window, etc, the usual, and then: ...

  // wait for the window to open/load, then connect Puppeteer to it:
  mainWindow.webContents.on("did-finish-load", () => { 
    test()
  })

【讨论】：