How to debug typescript written for electron in vscode


#1

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?

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

How can I get actual debug-ability with variable output, stepping, etc?


#2

I have issues with setting up debugging typescript within electron app so i left with debugging within electron chrome developer tools. And anyway chrome debugging is better than provided by vscode. You need to have enabled generating typescript source maps and you good to go to debug ts sources within chrome dev tools. Make sure you have installed source-map-support npm package and registered with require('source-map-support').install(...) so you have error stack traces points to your typescript source files.


#3

Thank you very much for the assistance! It really helped me get on my way. I came up with this (gist) and it works beautifully. If it helps others, great.


#4

You’re welcome.