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

Posted

技术标签:

【中文标题】如何在 Visual Studio 2015 asp.net 5 中调试 Typescript?【英文标题】:How to debug Typescript in Visual Studio 2015 asp.net 5? 【发布时间】:2015-05-04 05:42:19 【问题描述】:

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

【问题讨论】:

Debugging TypeScript code with Visual Studio的可能重复 你的问题是源 .ts 文件位于 wwwroot 之外吗? gamefromscratch.com/post/2014/05/27/… 【参考方案1】:

使用 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 属性顶部的 Start Action 应该是另一个选项,例如“Current page”。

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

    F5

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

【讨论】:

不幸的是,对我不起作用。或者只是部分。当我尝试在 .ts 文件中放置断点时,Visual Studio 会将其放在 .js 文件中的同一行(按编号)。当我调试调试光标移动通过 js 文件而不是 ts 文件。 @David 我在配置它时也遇到了麻烦。有一次,我写下了我所做的任何步骤,并最终让它发挥作用。所以我想我在上面发布结果。对不起,如果它不适合你。几年前,我的机器(我已经使用了很多年安装了许多 VS)在注册表中配置了几个调试器引擎,它们互相搞砸了。这是我唯一可以说的有用的话。 以下是在 Chrome 中调试的方法:gamefromscratch.com/post/2014/05/27/…【参考方案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"
    ]

您所追求的设置是inlineSourceMapinlineSources

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

【讨论】:

【参考方案3】:

在 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

【讨论】:

删除“wwwroot”值是解决方案【参考方案4】:

当您使用 gulp 时,您可以使用相对目录编写源映射。这样,您的 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 以提高可读性,因此请检查是否有任何编译/编码错误)

【讨论】:

【参考方案5】:

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

【讨论】:

听起来不错,但一个字都听不懂。 它的运行速度太慢了,以至于我很快就禁用了它。可以使用 Visual Studio 中的 chrome 调试 js,但不值得浪费时间进行设置和使用。

以上是关于如何在 Visual Studio 2015 asp.net 5 中调试 Typescript?的主要内容,如果未能解决你的问题,请参考以下文章

Intel parallel studio 2017 集成在visual studio 2013 中,现在如何集成到visual studio 2015

visual studio 2015怎么用

visual studio 2015 和.net 啥区别

visual studio 2015 怎么更新

visual studio 2015怎样升级

如何在 Visual Studio 2015 中启用 WiX 项目