在vscode中调试打字稿电子程序

ehi*_*ler 3 typescript electron visual-studio-code

我正在运行最新的1.2版本的vscode和1.8的打字稿.我已经尝试了launch.json的所有可能组合,我可以设想,类型'node'和'chrome',但我还没有找到一个组合填充vscode本身的任何字段.我主要是让程序启动,但在vscode本身内没有调试.我想知道是否有人在vscode中调试打字稿电子程序的工作示例?还是不可能?

任何帮助将不胜感激!

更新

我现在在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"
//          }

        }
}
Run Code Online (Sandbox Code Playgroud)

geo*_*osd 8

经过几个小时的头撞和一些Github门票,我找到了如何调试主进程和渲染器进程,并使用typescript.

我的应用程序结构如下:

electron
| - src (source files)
| - dist (built files)
Run Code Online (Sandbox Code Playgroud)

使用源映射生成typescript的gulpfile.js任务:

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'));
});
Run Code Online (Sandbox Code Playgroud)

适用于VS Code的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"
    }
]
}
Run Code Online (Sandbox Code Playgroud)

  • 一个快速说明,以防您使用 webpack 并且由于 sourceMapping 不起作用而无法设置断点。我必须设置一些映射覆盖,在我的情况下:` "sourceMapPathOverrides": { "webpack:///./*": "${workspaceRoot}/renderer/*" }, ` 其中 renderer 是包含我的源的目录渲染器代码的代码。使用 `.scripts` 调试命令来查看映射是如何设置的。 (3认同)