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

How to debug Typescript in Visual Studio 2015 asp.net 5?

提问by Marcin

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 应用程序调试打字稿文件？如果没有，那么也许有一种方法可以配置源映射文件，所以当我在浏览器中调试它们时，可以自动将更改保存到服务器上的 .ts 文件中？这可能很难，因为 .ts 文件是由 gulp 编译的，但也许有人找到了很好的解决方案？

回答by citykid

Debugging TypeScript with Visual Studio works with the right settings.

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

1. First you make sure that you create source mapswhen compiling TypeScript to JavaScript. So you should have an xxx.js.mapfile near every xxx.js.

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

   --sourcemap %1.ts
   

   your gulp script will usually create sourcemaps by default.

2. Configure your web application in Visual Studio.

   Set Internet Exploreras 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.)

   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:

   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.

   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".

   Set breakpointsin your .tscode inside Visual Studio now or later.

   Hit F5

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”选项卡并配置底部的“调试器”部分：禁用所有调试器！这是违反直觉的，您可能会看到以下错误消息：

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

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

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

   按F5

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

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

回答by user281921

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

我发现处理地图文件的最佳方法是将源代码包含在生成的.js文件本身中。这显然是仅适用于开发环境的解决方案。

my tsconfig.jsonbelow:

我的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 inlineSourceMapand inlineSources.

您所追求的设置是inlineSourceMap和inlineSources。

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

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

回答by mobileiq

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

回答by Marcin

The simplest way I found is to put all TypeScript files in the wwwroot/appfolder and leave the generated jsfiles 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 gulptasks I can also easily configure a task to bundle js for production.

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

回答by markwilde

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 时，您可以使用相对目录编写源映射。这样你的 TS 文件就会被 Visual Studio 正确解析。我使用 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)

（我修改了我的 gulpfile 以提高可读性，因此请检查是否有任何编译/编码错误）