VSCode debug not working for angular2 template

pegatron commented 7 years ago

[x] I have read the contribution documentation for this project.
[x] I agree to follow the code of conduct that this project follows, as appropriate.
[x] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Please describe your issue:

I have initialized a new electron-forge project with the angular2 template and wanted to have debugging support from Visual Studio Code. Following the documentation works for the default template, but not for the angular2 template.

After starting the debugging session, the red marked break points are getting grey, what means, that VSCode cannot debug them. I set them in (unmodified) src/index.ts from the template.

It would be great if the VSCode integration would work also for the angular2 template.

*Console output when you run electron-forge init with the environment variable `DEBUG=electron-forge:`. (Instructions on how to do so here). Please include the stack trace if one exists.**

gam@GAM-SURFACE3 C:\Users\gam\Downloads\testchen
> electron-forge init test-init
WARNING: DEBUG environment variable detected.  Progress indicators will be sent over electron-forge:lifecycle
  electron-forge:lifecycle Process Started: Checking your system +0ms
  electron-forge:lifecycle Process Succeeded: Checking your system +159ms
  electron-forge:runtime-config setting key: verbose to value: false +19ms
WARNING: DEBUG environment variable detected.  Progress indicators will be sent over electron-forge:lifecycle
  electron-forge:init Initializing in: C:\Users\gam\Downloads\testchen\test-init +0ms
  electron-forge:lifecycle Process Started: Initializing Project Directory +3ms
  electron-forge:init:directory creating directory: C:\Users\gam\Downloads\testchen\test-init +2ms
  electron-forge:lifecycle Process Succeeded: Initializing Project Directory +7ms
  electron-forge:lifecycle Process Started: Initializing Git Repository +5ms
  electron-forge:init:git executing "git init" in directory: C:\Users\gam\Downloads\testchen\test-init +2ms
  electron-forge:lifecycle Process Succeeded: Initializing Git Repository +214ms
  electron-forge:lifecycle Process Started: Copying Starter Files +1ms
  electron-forge:init:starter-files creating directory: C:\Users\gam\Downloads\testchen\test-init\src +1ms
  electron-forge:init:starter-files copying "C:\Users\gam\AppData\Roaming\npm\node_modules\electron-forge\tmpl\_gitignore" --> "C:\Users\gam\Downloads\testchen\test-init\.gitignore" +2ms
  electron-forge:init:starter-files copying "C:\Users\gam\AppData\Roaming\npm\node_modules\electron-forge\tmpl\_compilerc" --> "C:\Users\gam\Downloads\testchen\test-init\.compilerc" +4ms
  electron-forge:init:starter-files copying "C:\Users\gam\AppData\Roaming\npm\node_modules\electron-forge\tmpl\_eslintrc" --> "C:\Users\gam\Downloads\testchen\test-init\.eslintrc" +1ms
  electron-forge:init:starter-files copying "C:\Users\gam\AppData\Roaming\npm\node_modules\electron-forge\tmpl\index.js" --> "C:\Users\gam\Downloads\testchen\test-init\src\index.js" +3ms
  electron-forge:init:starter-files copying "C:\Users\gam\AppData\Roaming\npm\node_modules\electron-forge\tmpl\index.html" --> "C:\Users\gam\Downloads\testchen\test-init\src\index.html" +1ms
  electron-forge:lifecycle Process Succeeded: Copying Starter Files +3ms
  electron-forge:lifecycle Process Started: Initializing NPM Module +4ms
  electron-forge:init:npm writing package.json to: C:\Users\gam\Downloads\testchen\test-init +17ms
  electron-forge:lifecycle Process Succeeded: Initializing NPM Module +7ms
  electron-forge:lifecycle Process Started: Installing NPM Dependencies +1ms
  electron-forge:init:npm installing dependencies +2ms
  electron-forge:dependency-installer installing ["electron-compile"] in: C:\Users\gam\Downloads\testchen\test-init dev=false,exact=false,withYarn=false +116ms
  electron-forge:dependency-installer executing ["install","electron-compile","--save"] in: C:\Users\gam\Downloads\testchen\test-init +0ms
  electron-forge:runtime-config fetching key verbose +1ms
  electron-forge:runtime-config fetching key verbose +44ms
  electron-forge:init:npm installing devDependencies +15s
  electron-forge:dependency-installer installing ["babel-preset-env","babel-preset-react","babel-plugin-transform-async-to-generator"] in: C:\Users\gam\Downloads\testchen\test-init dev=true,exact=false,withYarn=false +1ms
  electron-forge:dependency-installer executing ["install","babel-preset-env","babel-preset-react","babel-plugin-transform-async-to-generator","--save-dev"] in: C:\Users\gam\Downloads\testchen\test-init +1ms
  electron-forge:runtime-config fetching key verbose +1ms
  electron-forge:runtime-config fetching key verbose +53ms
  electron-forge:init:npm installing exact dependencies +19s
  electron-forge:dependency-installer installing ["electron-prebuilt-compile"] in: C:\Users\gam\Downloads\testchen\test-init dev=true,exact=true,withYarn=false +1ms
  electron-forge:dependency-installer executing ["install","electron-prebuilt-compile","--save-exact","--save-dev"] in: C:\Users\gam\Downloads\testchen\test-init +0ms
  electron-forge:runtime-config fetching key verbose +1ms
  electron-forge:runtime-config fetching key verbose +70ms
  electron-forge:init:npm installing airbnb linting dependencies +1m
  electron-forge:dependency-installer installing ["eslint","eslint-config-airbnb","eslint-plugin-import","eslint-plugin-jsx-a11y@^3.0.0","eslint-plugin-react"] in: C:\Users\gam\Downloads\testchen\test-init dev=true,exact=false,withYarn=false +0ms
  electron-forge:dependency-installer executing ["install","eslint","eslint-config-airbnb","eslint-plugin-import","eslint-plugin-jsx-a11y@^3.0.0","eslint-plugin-react","--save-dev"] in: C:\Users\gam\Downloads\testchen\test-init +1ms
  electron-forge:runtime-config fetching key verbose +1ms
  electron-forge:runtime-config fetching key verbose +57ms
  electron-forge:lifecycle Process Succeeded: Installing NPM Dependencies +35s

gam@GAM-SURFACE3 C:\Users\gam\Downloads\testchen
> electron-forge init test-init-angular2 --template=angular2
WARNING: DEBUG environment variable detected.  Progress indicators will be sent over electron-forge:lifecycle
  electron-forge:lifecycle Process Started: Checking your system +0ms
  electron-forge:lifecycle Process Succeeded: Checking your system +171ms
  electron-forge:runtime-config setting key: verbose to value: false +26ms
WARNING: DEBUG environment variable detected.  Progress indicators will be sent over electron-forge:lifecycle
  electron-forge:init Initializing in: C:\Users\gam\Downloads\testchen\test-init-angular2 +0ms
  electron-forge:lifecycle Process Started: Initializing Project Directory +3ms
  electron-forge:init:directory creating directory: C:\Users\gam\Downloads\testchen\test-init-angular2 +2ms
  electron-forge:lifecycle Process Succeeded: Initializing Project Directory +9ms
  electron-forge:lifecycle Process Started: Initializing Git Repository +1ms
  electron-forge:init:git executing "git init" in directory: C:\Users\gam\Downloads\testchen\test-init-angular2 +2ms
  electron-forge:lifecycle Process Succeeded: Initializing Git Repository +206ms
  electron-forge:lifecycle Process Started: Copying Starter Files +1ms
  electron-forge:init:starter-files creating directory: C:\Users\gam\Downloads\testchen\test-init-angular2\src +1ms
  electron-forge:init:starter-files copying "C:\Users\gam\AppData\Roaming\npm\node_modules\electron-forge\tmpl\_gitignore" --> "C:\Users\gam\Downloads\testchen\test-init-angular2\.gitignore" +2ms
  electron-forge:init:starter-files copying "C:\Users\gam\AppData\Roaming\npm\node_modules\electron-forge\tmpl\_compilerc" --> "C:\Users\gam\Downloads\testchen\test-init-angular2\.compilerc" +2ms
  electron-forge:init:starter-files copying "C:\Users\gam\AppData\Roaming\npm\node_modules\electron-forge\tmpl\index.js" --> "C:\Users\gam\Downloads\testchen\test-init-angular2\src\index.js" +1ms
  electron-forge:init:starter-files copying "C:\Users\gam\AppData\Roaming\npm\node_modules\electron-forge\tmpl\index.html" --> "C:\Users\gam\Downloads\testchen\test-init-angular2\src\index.html" +1ms
  electron-forge:lifecycle Process Succeeded: Copying Starter Files +2ms
  electron-forge:lifecycle Process Started: Initializing NPM Module +3ms
  electron-forge:init:npm writing package.json to: C:\Users\gam\Downloads\testchen\test-init-angular2 +11ms
  electron-forge:lifecycle Process Succeeded: Initializing NPM Module +4ms
  electron-forge:lifecycle Process Started: Installing NPM Dependencies +1ms
  electron-forge:init:npm installing dependencies +2ms
  electron-forge:dependency-installer installing ["electron-compile"] in: C:\Users\gam\Downloads\testchen\test-init-angular2 dev=false,exact=false,withYarn=false +108ms
  electron-forge:dependency-installer executing ["install","electron-compile","--save"] in: C:\Users\gam\Downloads\testchen\test-init-angular2 +1ms
  electron-forge:runtime-config fetching key verbose +1ms
  electron-forge:runtime-config fetching key verbose +39ms
  electron-forge:init:npm installing devDependencies +18s
  electron-forge:dependency-installer installing ["babel-preset-env","babel-preset-react","babel-plugin-transform-async-to-generator"] in: C:\Users\gam\Downloads\testchen\test-init-angular2 dev=true,exact=false,withYarn=false +1ms
  electron-forge:dependency-installer executing ["install","babel-preset-env","babel-preset-react","babel-plugin-transform-async-to-generator","--save-dev"] in: C:\Users\gam\Downloads\testchen\test-init-angular2 +1ms
  electron-forge:runtime-config fetching key verbose +0ms
  electron-forge:runtime-config fetching key verbose +40ms
  electron-forge:init:npm installing exact dependencies +21s
  electron-forge:dependency-installer installing ["electron-prebuilt-compile"] in: C:\Users\gam\Downloads\testchen\test-init-angular2 dev=true,exact=true,withYarn=false +1ms
  electron-forge:dependency-installer executing ["install","electron-prebuilt-compile","--save-exact","--save-dev"] in: C:\Users\gam\Downloads\testchen\test-init-angular2 +1ms
  electron-forge:runtime-config fetching key verbose +1ms
  electron-forge:runtime-config fetching key verbose +45ms
  electron-forge:init:npm not installing linting deps +56s
  electron-forge:lifecycle Process Succeeded: Installing NPM Dependencies +19ms
  electron-forge:lifecycle Process Started: Locating custom template: "angular2" +2ms
  electron-forge:init:custom using local template +106ms
  electron-forge:lifecycle Process Succeeded: Locating custom template: "angular2" +1ms
  electron-forge:lifecycle Process Started: Installing Template Dependencies +3ms
  electron-forge:init:custom installing dependencies +1ms
  electron-forge:dependency-installer installing ["@angular/common@^2.4.1","@angular/compiler@^2.4.1","@angular/core@^2.4.1","@angular/platform-browser@^2.4.1","@angular/platform-browser-dynamic@^2.4.1","@types/electron@^1.4.30","electron-devtools-installer@^2.0.1","reflect-metadata@^0.1.9","tslib@^1.4.0","zone.js@^0.7.4"] in: C:\Users\gam\Downloads\testchen\test-init-angular2 dev=false,exact=false,withYarn=false +1ms
  electron-forge:dependency-installer executing ["install","@angular/common@^2.4.1","@angular/compiler@^2.4.1","@angular/core@^2.4.1","@angular/platform-browser@^2.4.1","@angular/platform-browser-dynamic@^2.4.1","@types/electron@^1.4.30","electron-devtools-installer@^2.0.1","reflect-metadata@^0.1.9","tslib@^1.4.0","zone.js@^0.7.4","--save"] in: C:\Users\gam\Downloads\testchen\test-init-angular2 +0ms
  electron-forge:runtime-config fetching key verbose +1ms
  electron-forge:runtime-config fetching key verbose +56ms
  electron-forge:init:custom installing devDependencies +22s
  electron-forge:dependency-installer installing ["tslint@^4.2.0","typescript@~2.1.4"] in: C:\Users\gam\Downloads\testchen\test-init-angular2 dev=true,exact=false,withYarn=false +0ms
  electron-forge:dependency-installer executing ["install","tslint@^4.2.0","typescript@~2.1.4","--save-dev"] in: C:\Users\gam\Downloads\testchen\test-init-angular2 +1ms
  electron-forge:runtime-config fetching key verbose +1ms
  electron-forge:runtime-config fetching key verbose +51ms
  electron-forge:lifecycle Process Succeeded: Installing Template Dependencies +25s
  electron-forge:lifecycle Process Started: Copying Template Files +1ms
  electron-forge:init:starter-files copying "C:/Users/gam/AppData/Roaming/npm/node_modules/electron-forge/node_modules/electron-forge-template-angular2/tmpl/_compilerc" --> "C:\Users\gam\Downloads\testchen\test-init-angular2\.compilerc" +21ms
  electron-forge:init:starter-files copying "C:/Users/gam/AppData/Roaming/npm/node_modules/electron-forge/node_modules/electron-forge-template-angular2/tmpl/src/app.component.ts" --> "C:\Users\gam\Downloads\testchen\test-init-angular2\src\app.component.ts" +8ms
  electron-forge:init:starter-files copying "C:/Users/gam/AppData/Roaming/npm/node_modules/electron-forge/node_modules/electron-forge-template-angular2/tmpl/src/bootstrap.ts" --> "C:\Users\gam\Downloads\testchen\test-init-angular2\src\bootstrap.ts" +7ms
  electron-forge:init:starter-files copying "C:/Users/gam/AppData/Roaming/npm/node_modules/electron-forge/node_modules/electron-forge-template-angular2/tmpl/src/index.html" --> "C:\Users\gam\Downloads\testchen\test-init-angular2\src\index.html" +3ms
  electron-forge:init:starter-files copying "C:/Users/gam/AppData/Roaming/npm/node_modules/electron-forge/node_modules/electron-forge-template-angular2/tmpl/src/index.ts" --> "C:\Users\gam\Downloads\testchen\test-init-angular2\src\index.ts" +4ms
  electron-forge:init:starter-files copying "C:/Users/gam/AppData/Roaming/npm/node_modules/electron-forge/node_modules/electron-forge-template-angular2/tmpl/tsconfig.json" --> "C:\Users\gam\Downloads\testchen\test-init-angular2\tsconfig.json" +4ms
  electron-forge:init:starter-files copying "C:/Users/gam/AppData/Roaming/npm/node_modules/electron-forge/node_modules/electron-forge-template-angular2/tmpl/tslint.json" --> "C:\Users\gam\Downloads\testchen\test-init-angular2\tslint.json" +7ms
  electron-forge:lifecycle Process Succeeded: Copying Template Files +3ms

What command line arguments are you passing?

Please see above answer

What does your config.forge data in package.json look like?

Didn't changed from template

Please provide either a failing minimal testcase (with a link to the code) or detailed steps to reproduce your problem.

electron-forge init test-init-angular2 --template=angular2
npm install --save-dev electron-forge

Copy launch.json configuration from documentation. Comment the array runtimeArgs.

Hit F5 after setting some break points in src/index.ts.

As soon as the app is started, the break points turn grey. Break points don't work in src/index.ts.

With the default template, the break points work without issue.

pegatron commented 7 years ago

After spending some hours, I've perhaps found the root cause. I would like to create a PR for adding direct support in electron-forge environment. Since I'm until now not experienced in JavaScript/TypeScript/NodeJS/Electron/VSCode world, perhaps somebody has an advise where to start and what projects would be involved.

VSCode debugging using the "legacy" V8 debug protocol cannot resolve TS files that have no corresponding JS file. Using the V8 inspector protocol, it should work. I came up to this because debugging ts-node projects or mocha projects that use ts-node can only be debugged with the "inspector" debug protocol, see

Electron on the other hand isn't supporting it at the moment in the releases, but there is the electron/electron pull request #9473 which is already merged in master that enables that and will be available with electron v1.7.2.

So, here my question: can somebody give me some rough hints

what is to do to update electron-forge and friends to Electron v1.7.2 when it's released?
what is to do that the --inspect=<port> switch can be given over the chain from electron-forge to reach Electron?

Many thanks in advance

MarshallOfSound commented 7 years ago

what is to do to update electron-forge and friends to Electron v1.7.2 when it's released?

You simply have to update the version of electron-prebuilt-compile in your package.json

what is to do that the --inspect= switch can be given over the chain from electron-forge to reach Electron?

It would require modifications /additions to our existing vscode debug logic, see the debug launcher files

https://github.com/electron-userland/electron-forge/blob/master/script/vscode.cmd
https://github.com/electron-userland/electron-forge/blob/master/script/vscode.sh

MarshallOfSound commented 7 years ago

Actually, it probably won't require any modifications to our existing vscode launchers, will see when 1.7.2 is out 👍

malept commented 5 years ago

Closing, see https://github.com/electron-userland/electron-forge-templates/issues/66

electron-userland / electron-forge-templates

VSCode debug not working for angular2 template #35