Question

我正在运行最新的1.2版本的vscode和1.8的打字稿。我已经尝试了launch.json的所有可能组合，我可以设想，类型＆＃39;节点＆＃39;和＆＃39; chrome＆＃39;但我还没有找到一个组合填充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门票，我找到了如何调试主要和渲染器进程，并使用打字稿。

我的应用程序结构为：

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

launch.json for VS Code：

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

我可以在我的＆＃34; index.js＆＃34;中设置一个断点，我进入调试区域，选择＆＃34;启动电子＆＃34;，点击F5，我的断点被击中。我是在Windows 10上运行vscode（1.2.1），

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

2 个答案: