如何在 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"
]
您所追求的设置是inlineSourceMap
和inlineSources
。
这也有助于解决由于将生成的.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