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

【问题标题】：Visual Studio 2017 ignoring source maps when debugging under cscript.exeVisual Studio 2017 在 cscript.exe 下调试时忽略源映射
【发布时间】：2018-02-11 07:52:44
【问题描述】：

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

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 提供绝对路径（在这种情况下，通过在tsconfig.json 中设置sourceRoot 属性）；但这没有任何效果。

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

【问题讨论】：

VS2010 太旧了，无法拥有对源映射一无所知的调试引擎。你必须更接近 2015 年。
当你说这一次确实有效时，你的意思是 cscript.exe 本身或另一个 NodeJS 程序？
@TarunLalwani For cscript.exe.
@ZevSpitz，发布了一个答案，这应该对您有所帮助，因为我已经测试了许多不同的可能性

标签： visual-studio visual-studio-2017 wsh

【解决方案1】：

所以我对此进行了更深入的研究，看看到底是什么问题。我将首先讨论需要的先决条件

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

需要启用即时调试

使用 sourceMap 进行调试

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

当您从 CMD 启动脚本并选择打开新窗口或选择其他项目时，您将看到一条错误消息，指出源映射 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文件中打开

希望这有助于您了解它为何在早期和现在都有效。可能是您的用法不同并且使用了边缘情况

【讨论】：

使用inlineSourceMap 选项，Visual Studio 会在“调试”窗格中打印错误解码源映射内容。。
@ZevSpitz，这发生在我身上一次，我使用tsc --out app.js app.ts 重新创建了地图，并且当时它起作用了。另外我建议您使用现有的打开窗口而不是创建新的
我很好奇——您需要启用整个 .NET 工作负载吗？还是只是来自单个组件的即时调试选项？
我认为JIT选项应该可以做到
显然不是。脚本复选框在选项页面的即时调试下不可用。

【解决方案2】：

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

至于 VS 项目类型：您可以从“空白 Node.js 控制台应用程序”开始，从该项目中删除所有不需要的内容，然后添加您的内容。 您当然不会使用 NodeJS，但该项目模板已经针对 TypeScript 的需求进行了定制。

【讨论】：

对我来说效果很好。您看到的具体行为是什么？例如，您是否可以在启动“cscript.exe //x //d loader.js”后选择正在运行的 VS 实例？然后会发生什么？
能否附上你配置方式的截图？我安装了仅安装了 Node JS 模块的 Visual Studio 2017，这样做只是说 cscript 不支持 --inspect-brk 标志
您能否提供更多有关您采取的步骤的信息。这条消息（“--inspect-brk flag is not supported by cscript”）究竟是在何时何地出现的？您是否尝试从 VS 内部开始调试？我的建议是从单独的 cmd.exe 框中启动“cscript.exe //x //d loader.js”。
是的，您说得对，它确实有效，但是有一些极端情况和替代方案。请看我发布的详细答案。
很好。你的答案肯定更完整。那么您是否对我的（基本上正确的）答案投了反对票，然后将其作为创建您的答案的基础？

【解决方案3】：

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

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

【讨论】：