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"
// }
}
}
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"
}
]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With