CODEWITHSUNDEEP
typescriptvisual-studio-codeelectron
ehiller
ehiller

Reputation: 1547

Debug typescript electron program in vscode

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"
//          }

        }
}

Upvotes: 4

Views: 6733

Answers (2)

georgiosd
georgiosd

Reputation: 3059

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"
    }
]
}

Upvotes: 10

ozczecho
ozczecho

Reputation: 8849

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,

Upvotes: -2

Related Questions