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

是否有方法调试visual studio 2015 CTP6 asp.net 5应用程序中的typescript文件？如果没有，也许有一种方法可以配置源映射文件，这样当我在浏览器中调试它们时，可以自动将更改保存到服务器上的.ts文件中吗？这可能很难，因为.ts文件是通过gump编译的，但也许有人找到了很好的解决方案？

使用Visual Studio调试TypeScript需要正确的设置。

首先，请确保在将TypeScript编译为JavaScript时创建源映射。因此，应该在每个xxx.js附近都有一个xxx.js.map文件。

通过在Visual Studio之外运行TypeScript编译器获取源映射不会造成任何困难，在tsc命令行添加：
```
--sourcemap %1.ts
```
默认情况下，您的gulp脚本通常会创建源映射。
在Visual Studio中配置web应用程序。

将Internet Explorer设置为启动浏览器。我只使用IE浏览器，不认为任何其他浏览器都能工作。（edit：在某个地方我读到有一个Webkit调试桥，所以Chrome调试应该是可能的，但我不记得来源了。）

在项目属性中，转到"Web"选项卡并配置底部的"调试器"部分：禁用所有调试器！这是反直觉的，你可能会看到这个错误消息：

您已尝试启动调试器，但根据Web属性页上的当前调试设置，没有要调试的进程。

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

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

命中F5

虽然您可以使用Visual Studio编辑器调试和编辑.ts文件，但"编辑并继续"将不起作用，因为目前没有浏览器可以重新加载.js和.js.map文件并继续。（如果我错了，请纠正我，我会很高兴的。）

处理我找到的映射文件的最佳方法是将源包含在生成的.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移动到不同路径而导致的问题，并且不必担心映射文件的去向。

在ASP.NET 5 RC1中，您可以通过向项目根目录中添加一个名为tsconfig.json的文件来指示TypeScript编译器生成.map文件。Visual Studio甚至有一个名为"TypeScript JSON配置文件"的模板。默认情况下，它有以下内容：

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

"sourceMap"设置指示TypeScript编译器生成调试所需的映射文件。

在我的例子中，我从"exclude"部分删除了"wwwroot"值，因为我的Angular TypeScript源文件位于wwwroot\App下。

tsconfig.json设置的详细说明可以在这里找到：https://github.com/Microsoft/typescript/wiki/tsconfig.json

使用gump时，可以使用相对目录编写源映射。通过这种方式，Visual Studio可以正确解析TS文件。我使用gulp-typescript和gulp-sourcemap来编译typescript。

在我的gulpfile.js文件的编译部分下面（记得在项目文件中禁用TypeScript编译）

var tsProject = ts.createProject({
    declarationFiles: false,
    noExternalResolve: false,
    target: 'ES5',
    sortOutput: true,
    noEmitOnError: false,
    sourceMap:true
});
gulp.task('script', function () {
    var tsResult = gulp.src('App/Ts/**/*.ts')
            .pipe(sourcemaps.init())
            .pipe(ts(tsProject));
    return tsResult.js.pipe(concat('App.js'))
            .pipe(sourcemaps.write('.', {includeContent:false, sourceRoot: '../../App/Ts/'}))
            .pipe(gulp.dest('wwwroot/js'));
});

（为了可读性，我修改了我的gulpfile，所以检查是否有任何编译/编码错误）

我找到的最简单的方法是将所有TypeScript文件放在wwwroot/app文件夹中，并将Visual Studio生成的js文件保留到默认位置。使用gulp，我只需将它们注入HTML文件中。在Visual Studio 2015中，它工作得很好，使用gulp任务，我还可以轻松地将任务配置为捆绑js以用于生产。

相关内容

最新更新

热门标签：