在Electron中使用“remote-debugging-port”時，如何獲取Chrome的遠程調試URL？

Question

我在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。 URL每次都不同。 如何從Electron主流程中獲取它？

我可以以某種方式從我的主進程JavaScript代碼中讀取我的Electron的主進程輸出嗎？

Answer 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()
  })