如何在Visual Studio 2015 asp.net 5中调试Typescript？

Question

有没有办法从visual studio 2015 CTP6 asp.net 5应用程序调试typescript文件？如果没有,那么可能有一种方法来配置源映射文件,所以当我在浏览器中调试它们并且可以自动保存对服务器上的.ts文件的更改？这可能很难,因为.ts文件是由gulp编译的,但也许有人找到了很好的解决方案呢？

Answer 1

使用Visual Studio调试TypeScript可以使用正确的设置.

1. 首先,确保在将TypeScript编译为JavaScript时创建源映射.所以你应该xxx.js.map在每个附近都有一个文件xxx.js.

   通过在Visual Studio外部运行TypeScript编译器来获取源映射不会造成任何困难,在tsc命令行添加:

   --sourcemap %1.ts
   

   你的gulp脚本通常会默认创建源图.

2. 在Visual Studio中配置Web应用程序.

   将Internet Explorer设置为启动浏览器.我让它只与IE一起工作,不认为任何其他浏览器都能正常工作.(编辑:在某处我读到有一个Webkit调试桥,所以Chrome调试应该是可能的,但我不记得源.)

   在项目属性中,转到"Web"选项卡并配置底部的"Debuggers"部分:禁用所有调试器!这是反制的,您可能会看到以下错误消息:

   您试图启动调试器,但根据Web属性页面上的当前调试设置,没有要调试的过程.

   当选中"不打开页面.等待来自其他进程的请求"选项并禁用ASP.NET调试时,会发生这种情况.请检查Web属性页面上的设置,然后重试.正如错误消息所示,Web属性顶部的"开始操作"应该是另一个选项,例如" 当前页面 ".

   现在或以后在Visual Studio 中的代码中设置断点.ts.

   点击F5

虽然你可以使用Visual Studio编辑器来调试和编辑.ts文件,"编辑并继续"将无法正常工作,目前还没有浏览器,可以重新加载.js和.js.map文件,并继续.(如果我错了,请告诉我任何人,我会很高兴.)

Answer 2

处理我发现的地图文件的最佳方法是在生成的.js文件中包含源文件.这显然只是开发环境的解决方案.

我的tsconfig.json下面:

{
    "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "outDir": "./wwwroot/scripts",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "inlineSourceMap": true,
        "inlineSources": true
    },
    "exclude": [
        "node_modules",
        "wwwroot"
    ]
}

你所追求的设置是inlineSourceMap和inlineSources.

这也有助于解决因将生成的.js路径移动到不同路径而不必担心地图文件的位置所导致的问题.