vscodeでのtypescript電子プログラムのデバッグ

Question

最新の1.2バージョンのvscodeと1.8のtypescriptを実行しています。私は、 'node'と 'chrome'の両方のタイプのlaunch.jsonの可能な組み合わせを試しましたが、vscode自体の中の任意のフィールドに値を設定する組み合わせはまだ見つかりません。私は主にプログラムを起動させますが、vscode自体の中でデバッグは行われません。私はvscodeでtypescript電子プログラムをデバッグする実例があるかどうか疑問に思っていましたか？それとも不可能なのでしょうか？

ご協力いただければ幸いです！

更新

私は今、電子のデバッグ出力を提供vscode内のコンソール持っている - しかし、まだ変数または他の出力を - これが私の現在の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" 
//   } 

     } 
} 

Answer 1

この私のために働く。私はタイコスクリプトを使用していません。

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

私は「起動エレクトロン」を選択し、私はデバッグ領域に移動し、私の「index.js」でブレークポイントを置くことができ、F5を押すと、私のブレークポイントはhit.Iはvscode（1.2.1を実行していています）on Windows 10、

Answer 2

ヘッドバンギングとGithubのいくつかのチケットの後、私はメインとレンダラープロセスの両方をデバッグし、typescriptを使う方法を見つけました。

マイアプリは以下のように構成されています

electron 
| - src (source files) 
| - dist (built files) 

gulpfile.jsタスクソースマップでtypescriptですが生成する：VSコードのための

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：

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