Empty Electron window when debugging Typescript app in Visual Studio Code

Question

I am trying to debug a typescript application in Visual Studio Code (vs code) which uses Electron - a terminal emulator Black-Screen.

I am attempting to do this by launching my application from in vs code. The breakpoint points I set in the main Typescript application file src/main/Main.ts are breaking as expected & and I can inspect variable values.

Electron is also launching, however the Black-Screen application doesn't load in Electron (I only see an emtpy Electron window). See screenshot of empty Electron window.

enter image description here

I can transpile the application using the typescript-compiler (tsc) and no errors are generated, and can see the compiled javascript in the folder I expect (src/bin/). I can also start the application successfully using npm ("npm start").

Below are the relevant project configuration files:

src/tsconfig.json

{
    "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noEmitOnError": true,
    "pretty": true,
    "jsx": "react",
    "sourceMap": true,
    "outDir": "bin"
  }
}

.vscode/tasks.json file Note. Executing the equivalent command in a terminal "tsc --project src" generates the transpiled js code with no errors or warnings.

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "showOutput": "silent",
    "args": ["--project", "src"],
    "problemMatcher": "$tsc"
}

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Black-Screen",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/src/main/Main.ts",
      "stopOnEntry": false,
      "cwd": "${workspaceRoot}",
      "sourceMaps": true,
      "externalConsole": false,
      "outDir": "${workspaceRoot}/src/bin",
      "runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/electron",
      // Optional arguments passed to the runtime executable.
      "runtimeArgs": ["--nolazy"],
      // Environment variables passed to the program.
      "env": {
         "NODE_ENV": "development"
      }
    }
  ]
}

Note. The launch.json configuration generates the command-line statement in the debug console: /home/michael/development/black-screen/node_modules/electron-prebuilt/dist/electron --debug-brk=3323 --nolazy src/bin/main/Main.js.

See screenshot of debug console. enter image description here

Hopefully someone has come across a similar issue with vs code and Electron and can assist :)

Jimi Jimi · Accepted Answer · 2016-05-31T12:16:26

First it would be preferable if you use

"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron"

If you develop on Windows or OS X, you'll get in trouble as you then have to use the executable file of each env.

That said Electron requires that the outDir of your app is relative to resources/app. http://electron.atom.io/docs/tutorial/application-distribution/

Empty Electron window when debugging Typescript app in Visual Studio Code

1 Answers