如何在 VS Code 中调试夜班测试答案

【问题标题】：How to debug nightwatch tests in VS Code如何在 VS Code 中调试夜班测试
【发布时间】：2017-10-02 17:20:02
【问题描述】：

我正在尝试使用 VS Code 调试 nightwatch e2e 测试。我使用打字稿编写测试。它只有在我在 js 文件中放置断点时才能工作，然后它会转到 ts 文件，我可以从那里调试它。如果我把它放在我的测试的 ts 文件中 - 它永远不会停止并且写成““断点被忽略，因为找不到生成的代码”。我的源文件是使用 ts 编译器编译到文件夹 /dist/dev/specs/e2e/nightwatch /src.来自launch.json的代码

        "name": "Launch e2e Tests on chrome",
        "type": "node",
        "console": "integratedTerminal",
        "program": "${workspaceRoot}/dist/dev/specs/e2e/nightwatch/nightwatch.js",
        "stopOnEntry": false,.
        "args": ["-env default,-f DatabaseChecks.js"],
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": null,.
        "runtimeArgs": ["--nolazy"],
        "env": {
            "NODE_ENV": "development"
        },
        "sourceMaps": true,
        "outFiles": ["${workspaceRoot}/dist/dev/specs/e2e/nightwatch/src"],
        "request": "launch"

也许有人有类似的问题？任何帮助，将不胜感激。

【问题讨论】：

您需要添加有关如何以及在何处编译和保存源文件的信息。您已将此标记为 typescript，因此我假设您正在编译 ts -> js。我倾向于做的调试是让 tsc 编译到一个临时文件夹，然后将“outFiles”指向它。
没错，我使用ts编译器并将准备好的js文件放入我在“outFiles”中指定的文件夹中。结果，我有 js 和 js.map 文件。我试图将确切的文件放入“outFiles”，但仍然没有运气。
也许这个线程提供了所需的解决方案（在 tsconfig.json 中启用内联源映射）。 groups.google.com/forum/#!topic/nightwatchjs/5pY0nKFTunQ

标签： debugging typescript automated-tests visual-studio-code nightwatch.js

【解决方案1】：

在我必须调试服务器端 node.js aps 的情况下，通常可以帮助我的一件事是使用 gulp-sourcemaps 并使用生成的源路径（检查 js.js 中“sources”属性的值）。地图文件）通过使它们绝对和完美匹配您的 ts 文件位置：

例如：

gulp.task('build', () => 
{
    var tsProject = ts.createProject('tsconfig.json', {
        typescript: require('typescript')
    });

    var tsResult = tsProject.src()
        .pipe(sourcemaps.init())   
        .pipe(tsProject()); 

        //Write compiled js
    return tsResult.js.pipe(sourcemaps.write(
            ".", 
            { 
                includeContent: false, 
                mapSources: function(sourcePath) 
                {
                    //Play around here - converting your relative paths to absolute ones that match location of ts file perfectly 
                    return sourcePath.replace('../../../', __dirname + '/');
                } 
            })).pipe(gulp.dest(TEMP_TARGET_FOLDER));
});

虽然它有点 hackish - 它每次都对我有用，而且设置起来非常简单。

【讨论】：

【解决方案2】：

如果您不需要 Typescript 部分，您可以使用此配置（基于WebStorm 建议）：

{
"version": "0.2.0",
"configurations": [
    {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${workspaceRoot}/node_modules/nightwatch/bin/runner.js",
        "args": [
          "--config",
          "test/e2e/nightwatch.conf.js"
        ]
    }
]

}

【讨论】：

不适用于该问题，因为 Katia 要求启用打字稿修复，但它是谷歌的顶级结果，正是我的非打字稿解决方案所需要的。

【解决方案3】：

我用那个：

{
    "type": "node",
    "request": "launch",
    "name": "Nightwatch 2",
    "port": 9229,
    "program": "${workspaceRoot}/node_modules/nightwatch/bin/nightwatch",
    "stopOnEntry": false,
    "args": [
        "--env",
        "localchrome"
    ],
    "cwd": "${workspaceRoot}",
    "sourceMaps": false,
    "env": {
        "ENV": "s11",
        "TAGS": "@WIP"
    },
    "runtimeArgs": [
        "--inspect"
    ]
}

【讨论】：

【解决方案4】：

在我的情况下，跟随就像魅力一样。

Here is the project structure. 以下是我的launch.json。

 {
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
                   {
                      "type": "node",
                      "request": "launch",
                      "name": "Nightwatch",
                      "program": "${workspaceRoot}/node_modules/nightwatch/bin/runner.js",
                      "stopOnEntry": false,
                      "args": [
                                 "--test",
                                 "tests/functionality_e2e_test.js"
                              ],           
                       "runtimeExecutable": null,
                       "sourceMaps": false
                  },
                  {
                       "type": "node",
                       "request": "attach",
                       "name": "Attach to Process",
                       "port": 5858
                  }
                 ]
}

以上代码是在 Visual Studio Code 最新版本 1.21.1 中调试 Nightwatch js 项目的最低要求。我正在使用 node.js v6.11.2。所以调试协议是遗留的。

谢谢 Stack Overflow。

【讨论】：