在 vscode 中调试 typescript 电子程序

Question

我正在运行最新的 1.2 版本的 vscode 和 1.8 的 typescript。我已经尝试了我能想到的所有可能的 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"
//          }

        }
}

Answer 1

经过几个小时的头疼和一些 Github 票后，我找到了如何调试主进程和渲染器进程，并使用 typescript。

我的应用结构如下：

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

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'));
});

用于 VS 代码的 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"
    }
]
}

Answer 2

这对我有用。除了我没有使用打字稿。

{
"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”中放一个断点，我进入调试区域，选择“Launch Electron”，按 F5，我的断点被命中。我在 Windows 10 上运行 vscode (1.2.1) ,