Electron-react-boilerplate: Debug with VS Code

[pronebird]

Is it possible to configure VS code to debug this boilerplate? There are plenty of examples on the web but I am not sure how to achieve the same with this boilerplate.

[amilajack]

Can you share links to those examples? I've never used VS code before. Looking at those examples would be helpful

[pronebird]

@amilajack http://electron.rocks/debugging-electron-in-vs-code/

I am sure it's something similar to what we already do in npm run actions. Just need to figure out how to put this together.

After reading through this, it seems it only hooks up the main process... which is probably useless...

[dustintownsend]

@amilajack which editor do you use? Or is there an editor that works best for this boilerplate?

[amilajack]

After reading through this, it seems it only hooks up main process... which is probably useless...

How so? The rendering process can be debugged through devtools. This project currently doesn't have built-in integration for debugging the main thread. Do you use the main thread or rendering thread? Or both?

[pronebird]

@amilajack I am just quoting the article I referenced. I am not exactly sure.

[amilajack]

From what it looks like, it seems like you can only debug the main process in VS code and not the rendering process.

Important thing to note is that you can only actually debug your main process. Which is quite sad since most of the development will be done in Browser windows which are render processes.

[amilajack]

@pronebird Can Visual Studio Code be installed on mac? I want to test this out

[katopz]

@amilajack Yes it is, and it can debug server side (client browser will need extensions). here's the detail

[amilajack]

@katopz great! What can we do to make VS code integration with this better out of the box?

[katopz]

@amilajack Here's what it look like atm
Install VSCode then

npm i
code .

Then press F5, VSCode will generated .vscode/launch.json
replace it with

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/server.js",
            "cwd": "${workspaceRoot}",
            "env": {
                "HOT": 1,
                "NODE_ENV": "development"
            },
            "runtimeArgs": [
                "--max_old_space_size=2096",
                "-r",
                "babel-register"
            ],
            "sourceMaps": true
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Process",
            "port": 5858
        }
    ]
}

Now press F5 again, server will spin up and then

npm run start-hot

And you can now debug server side via VSCode, btw this is still halfway done, for render process it'll need VSCode chrome extension but it's too complicated to set it up so this is as far as I can go.

I'm off to bed now, Sorry!

[ChinW]

@katopz Hi, thanks for your solution at first! But is this only work for server.js? I set the breakpoints in main.development.js, but it doesn't work... Any advice would be appreciated!

[katopz]

@ChinW Like I said you will need chrome dev tools, do try this one http://electron.rocks/debugging-electron-in-vs-code-revised/ and give us your results also PR would be nice. :)

Cheers

[wangpin34]

@katopz I use es6 in main.development.js but found the breakpoint doesn't work. Restart and Stop buttons work as expected. May be there is an issue with my sourcemap settings.

Here is my configuration:

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
      "args": [],
      "runtimeArgs": [
        "-r",
        "babel-register",
        "-r",
        "babel-polyfill"
      ],
      "program": "${workspaceRoot}\\src\\main.development.js",
      "env": { "NODE_ENV": "development", "HOT": "1" },
      "console": "internalConsole",
      "sourceMaps": true
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Process",
      "address": "localhost",
      "protocol": "inspector",
      "port": 5858,
    }
  ]
}

[amilajack]

I found a small repo that demos this

[omencat]

@amilajack That is exactly what I was looking for. Most of the boilerplate examples have a main and renderer file, but I am injecting react components, and the breakpoints work on the few jsx files I have tested.

[Mia-The-Coding-Cat]

Any update on this? None of the solutions mentioned here work for me. Are we just SOL since we inject the React stuff?

[asmallfurrywombat]

I've tried using these instructions with the latest electron quick start and they work for both main and renderer. So far no luck using the latest electron-react-boilerplate, though. I tried changing the webroot to ${workspaceRoot}/app, but so far no luck. These are the Microsoft instructions so targeting them would seem to make sense. Any ideas appreciated!
https://github.com/Microsoft/vscode-recipes/tree/master/Electron

[SirWindfield]

@asmallfurrywombat Did you figure it out? I was trying to debut the main process but it keeps messing up the breakpoints, they always jump to the first line of my main file. Here is my configuration:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Main Process",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceRoot}",
            "args": [],
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
            },
            "runtimeArgs": [
                "-r",
                "babel-register",
                "${workspaceRoot}/src/main-process/main.js"
            ],
            "env": {
                "NODE_ENV": "development",
                "HOT": "1"
            },
            "protocol": "inspector",
            "sourceMaps": true,
            "outFiles": [],
            "stopOnEntry": false
        }
    ],
    "compounds": []
}

I am pretty sure babel-register messes the stuff up. Even though I added sourceMaps and retainLines to my .babelrc file.
I had another project around a year ago. The main electron file was not written using ES6 and it worked perfectly there.

[Almenon]

+1 ~ I'm suprised no-one has a working vscode config yet

[SirWindfield]

I got it working though. I will push it to a repo and link it here if you want @Almenon

[Almenon]

@chentsulin that would be great :)

Edit: meant to mention @SirWindfield

On Fri, Apr 27, 2018, 8:52 AM Sven Lechner [e-mail] wrote:

I got it working though. I will push it to a repo and link it here if you
want @Almenon https://github.com/Almenon

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/chentsulin/electron-react-boilerplate/issues/528#issuecomment-385013359,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMeZheljwjFf3zC4vIDDB8WuJjvRwmtwks5tsz7IgaJpZM4Ksjag
.

[weifuchuan]

I can resolve it. It must be run the renderer and main processes separately. First, run npm run start-renderer-dev; config in vscode:
{ "name": "Debug Main Process", "type": "node", "request": "launch", "cwd": "${workspaceRoot}", "args": [], "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron", "windows": { "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd" }, "runtimeArgs": [ "-r", "babel-register", "./app/main.dev.js" ], "env": { "NODE_ENV": "development", "HOT": "1" }, "protocol": "inspector", "sourceMaps": true, "outFiles": [], "stopOnEntry": false }
then you can debug main process in vscode.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[PitterL]

I can resolve it. It must be run the renderer and main processes separately. First, run npm run start-renderer-dev; config in vscode:
{ "name": "Debug Main Process", "type": "node", "request": "launch", "cwd": "${workspaceRoot}", "args": [], "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron", "windows": { "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd" }, "runtimeArgs": [ "-r", "babel-register", "./app/main.dev.js" ], "env": { "NODE_ENV": "development", "HOT": "1" }, "protocol": "inspector", "sourceMaps": true, "outFiles": [], "stopOnEntry": false }
then you can debug main process in vscode.

Why i use this config, it reported Uncaught Exception: Import xxx ....
Looks like it need change all import syntax to require() ?

[weifuchuan]

I can resolve it. It must be run the renderer and main processes separately. First, run npm run start-renderer-dev; config in vscode:
{ "name": "Debug Main Process", "type": "node", "request": "launch", "cwd": "${workspaceRoot}", "args": [], "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron", "windows": { "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd" }, "runtimeArgs": [ "-r", "babel-register", "./app/main.dev.js" ], "env": { "NODE_ENV": "development", "HOT": "1" }, "protocol": "inspector", "sourceMaps": true, "outFiles": [], "stopOnEntry": false }
then you can debug main process in vscode.

Why i use this config, it reported Uncaught Exception: Import xxx ....
Looks like it need change all import syntax to require() ?

It is maybe new version that has some change that let debug to be abnormal. I don't use this boilerplate right now, so there is no opinion to solve it.

[Anson5555555Lee]

I can resolve it. It must be run the renderer and main processes separately. First, run npm run start-renderer-dev; config in vscode:
{ "name": "Debug Main Process", "type": "node", "request": "launch", "cwd": "${workspaceRoot}", "args": [], "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron", "windows": { "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd" }, "runtimeArgs": [ "-r", "babel-register", "./app/main.dev.js" ], "env": { "NODE_ENV": "development", "HOT": "1" }, "protocol": "inspector", "sourceMaps": true, "outFiles": [], "stopOnEntry": false }
then you can debug main process in vscode.

Why i use this config, it reported Uncaught Exception: Import xxx ....
Looks like it need change all import syntax to require() ?

replace babel-register with @babel/register

[rgilmutdinov]

Here is my configuration of vscode to debug this boilerplate.

.vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron: Main",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "args": [],
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}\\node_modules\\.bin\\electron.cmd"
      },
      "preLaunchTask": "Start Webpack Dev",
      "runtimeArgs": [
        "--remote-debugging-port=9223",
        "-r",
        "@babel/register",
        "./app/main.dev.js"
      ],
      "env": {
        "NODE_ENV": "development",
        "HOT": "1",
        "HIDE_DEV_TOOLS": "1"
      },
      "protocol": "inspector",
      "sourceMaps": true,
      "outFiles": [],
      "timeout": 150000
    },
    {
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9223,
      "webRoot": "${workspaceFolder}",
      "timeout": 150000
    }
  ],
  "compounds": [
    {
      "name": "Electron: All",
      "configurations": ["Electron: Main", "Electron: Renderer"]
    }
  ]
}

.vscode/tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "label": "Start Webpack Dev",
      "script": "start-renderer-dev",
      "options": {
        "cwd": "${workspaceFolder}"
      },
      "isBackground": true,
      "problemMatcher": {
        "owner": "custom",
        "pattern": {
          "regexp": "____________"
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": "Compiling\\.\\.\\.$",
          "endsPattern": "(Compiled successfully|Failed to compile)\\.$"
        }
      }
    }
  ]
}

Following changes are required in setupDevelopmentEnvironment() of app/menu.js:

setupDevelopmentEnvironment() {
  if (process.env.HIDE_DEV_TOOLS) {
    this.mainWindow.webContents.once("devtools-opened", () => {
      this.mainWindow.webContents.closeDevTools();
    });
  } else {
    this.mainWindow.openDevTools();
  }
  // skip code...
}

Also, in configs/webpack.config.renderer.dev.babel.js change noInfo property of devServer to false.

[Unforgiven-wanda]

@rgilmutdinov I cannot thank you enough for this, it it amazing.
This absolutely should go into a pull request.

[X140Yu]

Typescript version of @rgilmutdinov 's config,

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [{
      "name": "Electron: Main",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "args": [],
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}\\node_modules\\.bin\\electron.cmd"
      },
      "preLaunchTask": "Start Webpack Dev",
      "runtimeArgs": [
        "--remote-debugging-port=9223",
        "-r",
        "@babel/register",
        "./app/main.dev.babel.js"
      ],
      "env": {
        "NODE_ENV": "development",
        "HOT": "1",
        "HIDE_DEV_TOOLS": "1"
      },
      "protocol": "inspector",
      "sourceMaps": true,
      "outFiles": [],
      "timeout": 150000
    },
    {
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9223,
      "webRoot": "${workspaceFolder}",
      "timeout": 150000
    }
  ],
  "compounds": [{
    "name": "Electron: All",
    "configurations": ["Electron: Main", "Electron: Renderer"]
  }]
}

Other files are the same.

[ethanbonin]

Typescript version of @rgilmutdinov 's config,

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [{
      "name": "Electron: Main",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "args": [],
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}\\node_modules\\.bin\\electron.cmd"
      },
      "preLaunchTask": "Start Webpack Dev",
      "runtimeArgs": [
        "--remote-debugging-port=9223",
        "-r",
        "@babel/register",
        "./app/main.dev.babel.js"
      ],
      "env": {
        "NODE_ENV": "development",
        "HOT": "1",
        "HIDE_DEV_TOOLS": "1"
      },
      "protocol": "inspector",
      "sourceMaps": true,
      "outFiles": [],
      "timeout": 150000
    },
    {
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9223,
      "webRoot": "${workspaceFolder}",
      "timeout": 150000
    }
  ],
  "compounds": [{
    "name": "Electron: All",
    "configurations": ["Electron: Main", "Electron: Renderer"]
  }]
}

Other files are the same.

How is this converted for the typescript version? You still have the runtime argument "./app/main.dev.babel.js"? Maybe I'm missing something, but shouldn't this be "./app/main.dev.ts"`?

For those wondering, this is the answer I found for the typescript version that worked for me on the main process, but not the renderer:
https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/428