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

Question

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

debuggingtypescriptasp.net-corevisual-studio-2015

31

有没有办法在Visual Studio 2015 CTP6中调试TypeScript文件，特别是在ASP.NET 5应用程序中？如果不行，那么也许有一种方法可以配置源映射文件，这样当我在浏览器中调试它们并且可以自动保存更改到我的服务器上的.ts文件中？这可能很难，因为.ts文件是通过gulp编译的，但也许有人找到了好的解决方案？

- Marcin

1

可能是使用 Visual Studio 调试 TypeScript 代码的重复问题。 - citykid

1

你的问题是源.ts文件位于wwwroot之外吗？ - Mikeon

http://www.gamefromscratch.com/post/2014/05/27/TypeScript-debugging-in-Visual-Studio-with-IE-Chrome-and-Firefox-using-Source-Maps.aspx - Amr Elgarhy

5个回答

9

我发现处理地图文件的最佳方法是将源文件包含在生成的.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移动到不同路径导致的问题，而无需担心映射文件的位置。

- user281921

4

在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编译器生成用于调试的映射文件。

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

可以在此处详细了解tsconfig.json设置的说明：https://github.com/Microsoft/typescript/wiki/tsconfig.json。

- mobileiq

移除“wwwroot”值是解决方案。 - Andrei Drynov

2

我发现最简单的方法是将所有TypeScript文件放在wwwroot/app文件夹中，并让Visual Studio生成的js文件按照默认方式进行。使用gulp，我只需将它们注入到HTML文件中即可。在Visual Studio 2015中，这样做效果很好，而且通过gulp任务也可以轻松配置一个用于捆绑js以供生产的任务。

- Marcin

3

听起来很不错，但我一个词也听不懂。 - user2136053

它的运行速度非常缓慢，所以我很快就禁用了它。虽然可以从 Visual Studio 使用 Chrome 调试 JS，但不值得浪费时间进行设置和使用。 - Marcin

2

当你在使用gulp时，你可以使用相对目录来编写sourcemaps。这样，你的TS文件将被Visual Studio正确解析。我使用gulp-typescript和gulp-sourcemaps进行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以便更易读，所以请检查是否存在任何编译/编码错误。

- markwilde

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- citykid · Accepted Answer

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

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

在Visual Studio外运行TypeScript编译器获取源映射不会引起任何困难，在tsc命令行中添加：
```
--sourcemap %1.ts
```
通常情况下，您的Gulp脚本会自动创建source maps。
在Visual Studio中配置您的Web应用程序。

将Internet Explorer设置为启动浏览器。我只能让它在IE上工作，并且不认为其他任何浏览器可以工作。（编辑：我在某个地方读到有一个WebKit调试桥，因此Chrome调试应该是可能的，但我不记得来源了。）

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

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

当选择“不打开页面。等待来自另一个进程的请求”选项并禁用ASP.NET调试时，会出现此问题。请检查Web属性页面上的设置，然后重试。正如错误消息所说，Web属性页面顶部的“启动操作”应该是另一个选项，例如“当前页面”。

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

按下F5

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