Visual Studio 2017 在 cscript.exe 下调试时忽略源映射

Question

我的文件夹中有以下文件：

loader.js
loader.js.map
loader.ts
tsconfig.json

我的 tsconfig.json 看起来像这样：

{
    "compileOnSave": true,
    "compilerOptions": {
        "strict": true,
        "target":"es3",
        "sourceMap": true
    }
}

生成的地图文件（loader.js.map）如下所示：

{
    "version": 3,
    "file": "loader.js",
    "sourceRoot": "",
    "sources": ["loader.ts"],
    "names": [],
    "mappings": ";AAAA,IAAM,iBAAiB,GAAG,UAAI,GAA0B;IACpD,IAAM,OAAO,GAAQ,EAAE,CAAC;IACxB,IAAM,UAAU,GAAG,IAAI,UAAU,CAAI,GAAG,CAAC,CAAC;IAC1C,UAAU,CAAC,SAAS,EAAE,CAAC;IACvB,OAAO,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,CAAC;QACzB,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC;QAChC,UAAU,CAAC,QAAQ,EAAE,CAAC;IAC1B,CAAC;IACD,MAAM,CAAC,OAAO,CAAC;AACnB,CAAC,CAAC;AAEF,IAAM,GAAG,GAAG,IAAI,aAAa,CAAC,4BAA4B,CAAC,CAAC;AAC5D,IAAM,KAAK,GAAG,IAAI,aAAa,CAAC,eAAe,CAAC,CAAC;AACjD,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;AACrC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;AAErC,IAAI,OAAO,GAAG,CAAC,CAAC;AAChB,GAAG,CAAC,CAAY,UAAoC,EAApC,KAAA,iBAAiB,CAAC,OAAO,CAAC,SAAS,CAAC,EAApC,cAAoC,EAApC,IAAoC;IAA/C,IAAM,CAAC,SAAA;IACR,OAAO,CAAC,IAAI,CAAI,OAAO,UAAK,CAAG,CAAC,CAAC;IACjC,OAAO,EAAE,CAAC;CACb;AAGD,mBAAmB;AAEnB,uCAAuC;AAEvC,6CAA6C;AAE7C,8EAA8E;AAE9E,eAAe;AACf,0CAA0C;AAE1C,oDAAoD"
}

但是，当我尝试在 cscript.exe 下进行调试时：

cscript.exe //x //d loader.js

Visual Studio 调试器显示 Javascript，而不是 Typescript。

我知道 Visual Studio 支持源映射调试，这在某一时刻确实有效。

还有其他答案建议在 .map 文件中为 sourceRoot 提供绝对路径（在本例中，通过在 sourceRoot 属性中设置 tsconfig.json);但这没有效果。

在这种情况下，我可以尝试使用 Visual Studio 启用源地图的哪些步骤？

Answer 1

您需要创建一个 Visual Studio 2017 解决方案，其中包含您的文件作为解决方案项目。打开 Visual Studio 2017 解决方案并像您一样从 cmd.exe window 启动 cscript。您应该会看到 window 弹出，标题为 "Choose Just-In-Time Debugger"，您可以选择 Visual Studio 的新实例或加载解决方案的现有实例。选择那个。您可能会看到调试器 window 首先命中您的 .js 文件，但是当您单步执行代码时，它应该会自动更改为映射的 .ts 文件，接下来。

关于 VS 项目类型：您可以从 "Blank Node.js Console Application" 开始，从该项目中删除所有不需要的内容，然后添加您的内容。 您当然不会使用 NodeJS，但该项目模板已经根据 TypeScript 的需要量身定制。

Answer 2

所以我对此进行了更深入的挖掘，看看到底是什么问题。先说需要的pre-requisites

需要安装即时调试器的 .NET 部分

需要Just-in-time调试启用

使用 sourceMap 调试

我能够重现您的问题，我认为这可能是 VS2017 未正确处理的错误或边缘情况

当您从 CMD 启动脚本并选择打开一个新的 window 或选择一个不同的项目时，您将看到一条错误消息，指出无效的源映射 url

这可能是因为 VS2017 使用的路径与脚本路径不同。

正在解决问题

可以通过三种方法解决此问题。

1.手动修复sourcemap

的完整路径

在您的 app.js 中修复 sourceMappingURL 的路径。然后运行 cscript.exe \X \D app.js。它将首先显示 JS 文件，但源映射加载消息将在那里。第一步结束后，它将更正 TS 文件显示

在VS2017中创建项目

使用您的源文件在 TypeScript Blank NodeJS VS2017 中创建一个项目并构建它。现在，当您从命令行运行项目并选择相同的打开项目时，它将起作用

使用内联源映射

此选项将确保它可以在任何地方工作，即使没有在 VS2017 中打开项目

将您的 tsconfig.json 更改为

{
  "compileOnSave": true,
  "compilerOptions": {
    "strict": true,
    "target": "es3",
    "inlineSourceMap": true
  }
}

这将确保整个地图是内联的并且没有路径问题。这次会直接在你的TS文件中打开

希望这可以帮助您理解为什么它以前和现在都有效。可能是您的用法不同并且使用了边缘情况

Answer 3

我最终在 tsconfig.json 中将 inlineSources 设置为 true（inlineSourceMaps 也必须是 true）。这会将源代码嵌入到发出的 Javascript 文件中。

虽然这大大增加了 Javascript 文件的大小，但这并不是真正的问题，因为 Javascript 是在本地运行而不是从网络服务器。

Visual Studio 2017 在 cscript.exe 下调试时忽略源映射

Visual Studio 2017 ignoring source maps when debugging under cscript.exe

wsh

visual-studio

visual-studio-2017