Debug with Visual Studio Code

Just wondering what your development process is for using Visual Studio code to debug your Electron instance. Is it possible to use VS Code to debug the instance started with hot module replacement (npm run start)? I’ve tried to use a launch configuration to attach to the process (“request”: “attach”) but haven’t been successful. I have been able to debug an instance started from VS Code (“request”: “launch”).
To do so I had to: edit /config/webpack.dev.js and change (line 53) devtool: ‘cheap-module-source-map’ to devtool: ‘source-map’ Build with: npm run build:dev

Then modify the included launch configuration slightly so the source maps were found:

      {
            "name": "Debug Dev Renderer Process",
            "type": "chrome",
            "request": "launch",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
            "runtimeArgs": [
              "${workspaceRoot}/dist",
              "--enable-logging",
              "--remote-debugging-port=9222"
            ],
            "sourceMaps": true,     
            //"trace": "verbose",       
            "webRoot": "${workspaceRoot}"             
        }

The only change is webRoot was changed from:

“webRoot”: “${workspaceRoot}/dist”

to

“webRoot”: “${workspaceRoot}”

Note I ran a build:dev but started a debug against the “dist” directory. This seems counter intuitive.

With this approach I’m having to manually build to pick up any source changes (stop debugging, npm run build:dev, launch debug). If I do “npm run watch” my sources get auto built on a source change but if there is a debug instance running the debugger loses sync (break points no longer hit).

So I figured starting an instance with HMR would be the answer. But no luck doing so. Is my only debug option for HMR the embedded Chrome debugger?

Thanks. Greg.

• Please tell us about your environment: Windows 8.1 Visual Studio Code:

Version 1.10.2 Commit 8076a19fdcab7e1fc1707952d652f0bb6c6db331 Date 2017-03-08T14:02:52.799Z Shell 1.4.6 Renderer 53.0.2785.143 Node 6.5.0

NPM --version: 3.10.10 webpack 2.2.1 vscode-chrome-debug-core: 3.14.14

[greg9504]

@SlickNutter OK I got this to work with the following modification to the output setting in webpack.electron.js:

output: {
      path: DEV_SERVER ? helpers.root('dev') : helpers.root('dist'),
      filename: '[name].js',
      sourceMapFilename: '[file].map',
      devtoolModuleFilenameTemplate: "..//[absolute-resource-path]",
      devtoolFallbackModuleFilenameTemplate: "..//[absolute-resource-path]?[hash]"
    },

Note the “…//” before the [absolute-resource-path].

and my launch config looks like:

{
           "name": "Debug Main Process",
           "type": "node",
           "request": "launch",
           "cwd": "${workspaceRoot}/dist",
           //"trace": true,
           "sourceMaps": true,
           "protocol": "legacy",             
           //"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
           // Use the following for Windows
           "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
           "outFiles": [
               "${workspaceRoot}/dist/**/*.js"
           ],
           "program": "${workspaceRoot}/dist/index.js"           
       },

Now you should be able to set breakpoints in /src/electron/index.ts had have VS Code break. Remember to rebuild after changing /config/webpack.electron.js

[greg9504]

@SlickNutter you have the wrong protocol set. Either leave it out or set it to legacy.
Then on line 20 of src/electron/index.ts put : debugger; rebuild: npm run build:dev then debug. That should allow you to single step through but not set break points. When you do this you will see VS Code opens a new readonly instance of index.ts. The problem is with the webpack configuration that generates the source maps. This link explains why it is happening: https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_javascript-source-map-tips

Basically for Node debugging VS Code does not support the webpack:/// prefix, which is how the map files are generated. I have managed to get breakpoints to work with the following:

• remove any debugger; lines you added to index.ts
• in /config/webpack.electron.js: add to output config (~line 57): devtoolModuleFilenameTemplate: ‘[resource-path]’ // remove webpack:/// prefix so it looks like:

output: {
      path: DEV_SERVER ? helpers.root('dev') : helpers.root('dist'),
      filename: '[name].js',
      sourceMapFilename: '[file].map',
      devtoolModuleFilenameTemplate: '[resource-path]'  // remove webpack:/// prefix
    },

• rebuild: npm run build:dev
• and this part sucks but I haven’t figured out how to get webpack to do it: edit the generated map file for index.ts: in /dist/index.js.map scroll to bottom of file, you’ll see: “sourceRoot”:“” change that to: “sourceRoot”:“…/”
• set a break point in /src/electron/index.ts debug, your break point should be hit.

Ideally you shouldn’t have to edit the .map file and should be able to set the sourceRoot via webpack configuration. I have tried the following but this did not work, in /config/webpack.electron.js: line 85 under plugins:

new webpack.SourceMapDevToolPlugin({
        moduleFilenameTemplate:'[absolute-resource-path]',
        fallbackModuleFilenameTemplate:'[absolute-resource-path]?[hash]',
        filename: "[file].map",
        sourceRoot:"../"}
      )

Unfortunately that does not produce a valid map file. Still looking for the correct solution. What is happening in our case is that VS Code is looking for the source under /dist but we want it to look under root, that’s why setting the sourceRoot:“…/” in the map works. I’m going to try to update to the latest webpack and try a few more things. Although my understanding of webpack is pretty basic…