Debug typescript electron program in vscode

Question

I am running the newest 1.2 version of vscode and 1.8 of typescript. I have tried every possible combination of launch.json I can conceive of , both of type 'node' and 'chrome' but I have yet to find a combination that populates any fields within vscode itself. I mostly get the program to launch, but no debugging takes place within vscode itself. I was wondering whether anyone had a working example of debugging a typescript electron program in vscode? Or is it not possible?

Any help would be greatly appreciated!

update

I now have the console within vscode providing the debug output of electron - but still no variable or other output -- this is my current launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug",
            "type": "chrome",
            "request": "launch",
//          "program": "${workspaceRoot}/src/main.ts",
//          "program": "${workspaceRoot}/bin/main.js",
//          "stopOnEntry": false,
//          "args": [],
//          "cwd": "${workspaceRoot}",
            "sourceMaps": true,
//          "preLaunchTask": "build",
//          "externalConsole": false,
//          "outDir": "${workspaceRoot}/bin",
            "runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/electron.exe",
            //"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
            // Optional arguments passed to the runtime executable.
            "runtimeArgs": [
//              "--enable-logging",
//              "--nolazy",
                "--remote-debugging-port=9222",
                "--host-rules='MAP * 127.0.0.1'",
                "${workspaceRoot}"
//          ],
            ]
            // Environment variables passed to the program.
//          "env": {
//              "NODE_ENV": "development"
//          }

        }
}

georgiosd · Accepted Answer · 2016-12-10 09:01:41Z

10

After a few hours of head-banging and some Github tickets, I found how to debug both the main and renderer processes, AND use typescript.

My app is structured as:

electron
| - src (source files)
| - dist (built files)

gulpfile.js task to generate typescript with source maps:

gulp.task('electron:transpile:ts', () => {
var ts = require('gulp-typescript');
var project = ts.createProject('./tsconfig.json');
var tsResult = project.src()
    .pipe(sourcemaps.init())
    .pipe(project());

return tsResult.js
    .pipe(sourcemaps.write('.', {
        sourceRoot: './'
    }))
    .pipe(gulp.dest('./dist'));
});

launch.json for VS Code:

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Debug main process",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/src/main.ts",
        "stopOnEntry": false,
        "args": [],
        "cwd": "${workspaceRoot}/dist",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
        "runtimeArgs": [
            "--enable-logging"
        ],
        "env": {},
        "sourceMaps": true,
        "outFiles": [
            "${workspaceRoot}/dist/**/*.js"
        ],
        "internalConsoleOptions": "openOnSessionStart",
        "console": "integratedTerminal",
        "preLaunchTask": "build"
    },
    {
        "name": "Debug renderer process",
        "type": "chrome",
        "request": "launch",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
        "runtimeArgs": [
            "${workspaceRoot}/dist",
            "--enable-logging",
            "--remote-debugging-port=9222"
        ],
        "webRoot": "${workspaceRoot}/dist",
        "sourceMaps": true,
        "internalConsoleOptions": "openOnSessionStart"
    }
]
}

answered Dec 10, 2016 at 9:01

georgiosd

3,0594 gold badges41 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matt Aimonetti Over a year ago

A quick note in case you are using webpack and can't set breakpoints because the sourceMapping isn't working. I had to set some mapping overrides, in my case: ` "sourceMapPathOverrides": { "webpack:///./*": "${workspaceRoot}/renderer/*" }, ` Where renderer is the directory containing my source code for the renderer code. Play with the .scripts debug command to see how mappings are set.

rococo Over a year ago

Adding the renderer process launch config worked for me! Thank you so much for sharing :)

Nick Over a year ago

setting webroot to workspace root worked for me as listed here github.com/microsoft/vscode-chrome-debug/issues/…

ozczecho · Accepted Answer · 2016-07-02 06:40:20Z

-2

This works for me. Except I am not using typescript.

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch Electron",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/index.js",
        "stopOnEntry": false,
        "args": [],
        "cwd": "${workspaceRoot}",
        "preLaunchTask": null,
        "runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/electron.exe",
        "runtimeArgs": [],
        "env": {},
        "externalConsole": false,
        "sourceMaps": false,
        "outDir": null
    }

I can put a break point in my "index.js", I go to the debug area, select "Launch Electron", hit F5 and my breakpoint is hit.I am running vscode (1.2.1) on Windows 10,

answered Jul 2, 2016 at 6:40

ozczecho

8,9098 gold badges39 silver badges42 bronze badges

2 Comments

ehiller Over a year ago

does that debug both the main process as well as the renderer process? My issue with that was that it only covered the main process?

Deilan Over a year ago

@ehiller, No, it doesn't debug renderer process.

Collectives™ on Stack Overflow

Debug typescript electron program in vscode

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related