Accessing child window in an electron app

  • Hi there

    I would like to introduce a child window for some debug functionality in my current app project (electron). I managed to create the child window (as expected in electron-main.js and it works. The main window is called, well, mainWindow and the child window is named debugWindow.

    My issue is now on how to get on from here:

    1. How do I access the childWindow from my vue-page’s code?
    2. How does layout assignment / dressing (i.e. custom chrome, etc) work for the child window?

    I haven’t yet found any documentation that shows how to tie this all together in an electron app.

    Any advice?


  • More specifically, I would need a tip on what the actual URL for debugWindow.loadUrl() needs to be if I want to load pages/Debug.vue.

    The current state of affairs is:

    function createDebugWindow () {
      debugWindow = new BrowserWindow({
        parent: mainWindow,
        width: 1000,
        height: 700,
        minWidth: 600,
        minHeight: 300,
        useContentSize: true,
        show: false,
        webPreferences: {
          nodeIntegration: true
      let debugUrl = require('url').format({
        protocol: 'file',
        slashes: true,
        pathname: require('path').join(__dirname, 'pages/Debug.vue')

    But that doesn’t do anything…

Log in to reply