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

Is there a way to debug typescript files from visual studio 2015 CTP6 asp.net 5 application? If not then maybe there is a way to configure source map files, so when I debug them in browser and can automatically save changes to my .ts files on server? This might be hard, because .ts files are compiled by gulp, but maybe somebody found good solution for that?

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

5 个解决方案

#1

Debugging TypeScript with Visual Studio works with the right settings.

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

First you make sure that you create source maps when compiling TypeScript to JavaScript. So you should have an xxx.js.map file near every xxx.js.

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

Getting source maps by running the TypeScript compiler outside of Visual Studio does not cause any difficulty, at the tsc command line add:

通过在Visual Studio外部运行TypeScript编译器来获取源映射不会造成任何困难，在tsc命令行添加：
```
--sourcemap %1.ts
```
your gulp script will usually create sourcemaps by default.

你的gulp脚本通常会默认创建源图。
Configure your web application in Visual Studio.

在Visual Studio中配置Web应用程序。

Set Internet Explorer as the start browser. I got it working only with IE and don't think any other browser will work. (edit: Somewhere I read that there is a Webkit debugging bridge, so Chrome debugging should be possible, but I do not remember the source.)

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

In the project properties go to the "Web" tab and configure the "Debuggers" section at the bottom: Disable all debuggers! This is counter intutitive and you might see this error message:

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

You have attempted to start the debugger, but based on your current debug settings on the Web properties page there is no process to debug.

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

This occurs when the "Don't open a page. Wait for a request from another process" option is selected, and ASP.NET debugging is disabled. Please check your settings on the Web properties page and try again. As the error message says, the Start Action at the top of the Web properties should be another option, like "Current page".

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

Set breakpoints in your .ts code inside Visual Studio now or later.

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

Hit F5

点击F5

While you can use the Visual Studio Editor to debug and edit .ts files, "Edit and Continue" will not work, there is currently no browser that can reload .js and .js.map files and continue. (Correct me anyone if I am wrong and I will be happy.)

虽然您可以使用Visual Studio编辑器来调试和编辑.ts文件，但“编辑并继续”将无法工作，目前没有可以重新加载.js和.js.map文件的浏览器并继续。（如果我错了，请告诉我任何人，我会很高兴。）

#2

The best way to handle map files I found is to include the source inside the generated .js files themselves. This is obviously a solution for a dev environment only.

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

my tsconfig.json below:

我的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"
    ]
}

The settings you are after are inlineSourceMap and inlineSources.

您所使用的设置是inlineSourceMap和inlineSources。

This also helps with issues caused by moving the generated .js to different paths and not having to worry about where the map files go.

这也有助于将生成的.js移动到不同的路径而不必担心映射文件的位置所导致的问题。

#3

In ASP.NET 5 RC1 you can instruct the TypeScript compiler to generate .map files by adding a file called tsconfig.json to the project root directory. Visual Studio even has a template for this called "TypeScript JSON Configuration File". By default it has the following contents:

在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"
  ]
}

The "sourceMap" setting instructs the TypeScript compiler to generate the map files which are needed for debugging.

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

In my case I removed the "wwwroot" value from the "exclude" section because my Angular TypeScript source files are located under wwwroot\App.

在我的情况下，我从“排除”部分删除了“wwwroot”值，因为我的Angular TypeScript源文件位于wwwroot \ App下。

Detailed explanation of tsconfig.json settings can be found here: https://github.com/Microsoft/typescript/wiki/tsconfig.json

有关tsconfig.json设置的详细说明，请访问：https：//github.com/Microsoft/typescript/wiki/tsconfig.json

#4

When you are using gulp you can write the sourcemaps with a relative directory. This way your TS files are correctly resolved by Visual Studio. I use gulp-typescript and gulp-sourcemaps for my TypeScript compilation.

当您使用gulp时，您可以使用相对目录编写源映射。这样，Visual Studio就可以正确解析您的TS文件。我使用gulp-typescript和gulp-sourcemaps进行TypeScript编译。

Below the compilation part of my gulpfile.js file (remember to disable the TypeScript compilation in your project file)

在我的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'));
});

(I modified my gulpfile for readability, so check for any compilation / coding errors)

（为了便于阅读，我修改了gulp文件，因此检查是否存在任何编译/编码错误）

#5

The simplest way I found is to put all TypeScript files in the wwwroot/app folder and leave the generated js files by Visual Studio to go where they do by default. Using gulp I simply inject them into HTML files. In Visual Studio 2015 it works great, and with gulp tasks I can also easily configure a task to bundle js for production.

我发现最简单的方法是将所有TypeScript文件放在wwwroot / app文件夹中，并将Visual Studio生成的js文件保留在默认情况下。使用gulp我只需将它们注入HTML文件。在Visual Studio 2015中它运行良好，并且通过gulp任务，我还可以轻松配置任务以捆绑js进行生产。

#1