Electron-vue: Debuging renderer in WebStorm or Visual Studio Code

[alexiej]

Describe the issue / bug.

Is it possible to debug renderer process in WebStorm. I tried instruction from https://blog.jetbrains.com/webstorm/2016/05/getting-started-with-electron-in-webstorm/ but nothing.

When I'm putting a breakpoint in the "App.vue" or "main.js" but nothing happened. Is it possible to break the code in that place?

Tell me about your development environment.

• NPM version: 4.2.0
• Operating System: Windows 10 64bit
• Vue.js: 2.3.4
• Electron: 1.7.3
• Node: 7.9.0
• WebStorm: 2017.1

[SimulatedGREG]

@alexiej sorry for the late reply.

I'm currently out of town and don't have much time to investigate this, but here's some information that could lead you in the right direction (or at least until I find some time to test this myself). When running npm run dev, the script will load its own instances of webpack and electron, so starting another instance from a code editor, which would be outside of webpack, isn't going to work. What you need to configure is a way to enable some sort of remote debugging. This is possible with the --remote-debugging-port=5757 flag (port 5757 is just an example). You can append this flag here, and then configure your text editor to remotely connect localhost:5757.

[mackmm145]

this isn't an answer for webstorm, but since the title says 'or Visual Studio Code' so to try to help anyone coming for help with that.

You'll also need the chrome debugger extension installed.

1) add this line to src/main/index.js right after the import(line 1) - i tried adding a switch to the spawn line at dev-runner.js, but i got better results with this.

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

2) change showDevTools to false in src/main/index.dev.js - it gets ornery when there's multiple F12's open.

require('electron-debug')({
  showDevTools: false
})

3) then launch.json should look something like this.

{
  "version": "0.2.0",
  "configurations": [
  {
    "type": "chrome",
    "request": "attach",
    "name": "Attach to ReservFE",
    "port": 8315,
    "webRoot": "${workspaceRoot}/src",
    "sourceMapPathOverrides": {
    "webpack:///*": "${workspaceRoot}/*"
    }
  }
  ]
}

the big drawback to this is that the debugger opens a new editor with the same filename that's read-only - the path will say "read-only inlined content from source map."

[SimulatedGREG]

Going to close as multiple solutions have been posted. In the end, you will have to go with some sort of remote debugging approach.