我可以在Eclipse中调试AngularJS和TypeScript吗? [英] Can I debug AngularJS and TypeScript in Eclipse?
问题描述
我刚刚开始使用TypEcs，并且我试图在Typescript和AngularJS中创建一个要在Eclipse中调试的网页.
I have just started working with TypEcs and I am trying to create a webpage in Typescript and AngularJS which I want to debug in Eclipse.
- 是否可以在Eclipse中调试TypeScript和Angular页面?如果是这样，那么您能指导我正确的方向吗?
我尝试使用TypeScript Standalone选项调试单个打字稿文件，并且它可以工作.但是我也想使用AngularJS.我已经创建了一个index.html文件和一个app.ts文件，还已经将angular.d.ts和angular.min.js导入了脚本文件夹. 我可以使用任何TypEcs TypeScript调试器来做到这一点吗?我尝试运行它，但是在var app = angular.module ...时出现错误(ReferenceError:angular没有定义).
I've tried to debug a single typescript file with the TypeScript Standalone option and it works. But I also want to use AngularJS. I've created an index.html file and an app.ts file I have also imported angular.d.ts and angular.min.js among others into a script folder. Can I do this by using any of the TypEcs TypeScript debuggers? I have tried to run it, but I get an error at var app = angular.module... (ReferenceError: angular is not defined).
我的猜测是，我在索引文件中链接到的angular.min.js文件尚未加载.是否因为在TypeScript Standalone配置中将app.ts设置为主文件? (我不能选择index.html)和/或我是否缺少一些代码/设置?
My guess is that the angular.min.js file which I link to in the index file hasn't been loaded. Is it because app.ts is set to be main file in the TypeScript Standalone configuration? (I cannot choose the index.html) And/Or am I missing some code/settings?
希望您能帮助我. 预先谢谢你！
I hope you can help me. Thank you in advance!
这是一些示例代码: index.html:
Here is some example code: index.html:
<html ng-app="helloworld">
<head>
<title>Hello World!</title>
</head>
<body>
<div class="container" ng-controller="HelloWorldCtrl">
<input type="text" class="form-control" value="{{message}}" />
</div>
<script src="../scripts/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.ts:
/// <reference path="../scripts/typings/angularjs/angular.d.ts"/>
module Sample.HelloWorld {
export interface IHelloWorldScope extends ng.IScope {
message: string;
}
export class HelloWorldCtrl {
static $inject = ["$scope"];
constructor(private scope: IHelloWorldScope) {
scope.message = "Hello World";
}
}
var app = angular.module("helloworld",["ui.bootstrap"]);
app.controller("HelloWorldCtrl", HelloWorldCtrl);
}
推荐答案
正如Basarat所述，可以使用 TypEcs
As Basarat mentioned it is possible to debug AngularJS and TypeScript using the "TypeScript Web Remote" debug option which is included in TypEcs
如何调试页面:
- 关闭所有打开的Chrome浏览器窗口.
- 使用chrome.exe --remote-debugging-port = 9222命令再次打开Chrome
- 根据在WebKit远程模式下添加TypeScript调试"中的说明应用调试配置，网址为 TypEcs/2.0-全新且值得关注
- 从第1点开始在chrome窗口中打开您的起始页(index.html).
- 转到调试视图
- 使用第3步中的配置进行调试
- 出现一个对话框，您需要在其中选择带有您要调试的文件的选项卡.
- 现在，您可以单步执行代码，并根据需要将断点添加到app.ts文件中. (如果看不到步骤选项，请单击主线程)
- Close all open chrome windows.
- Open Chrome again with the command chrome.exe --remote-debugging-port=9222
- Apply a debug configuration according to "Add TypeScript Debug for WebKit remote mode" at TypEcs / 2.0 - New and Noteworthy
- Open your start page (index.html) in the chrome window from point 1.
- Go to debug view
- Debug using the configuration from step 3
- A dialog appears where you need to select the tab with the file that you wish to debug.
- Now you can step through the code and add breakpoints to the app.ts file if you wish. (Click on Main thread if you don't see the step options)
如果出现错误无法获取用于调试的选项卡，则连接超时"，请关闭所有chrome窗口，然后使用chrome.exe --remote-debugging-port = 9222命令重新打开chrome.
And if you get the error "Failed to get tabs for debugging connect timed out" close all chrome windows and reopen chrome with the chrome.exe --remote-debugging-port=9222 command.
这篇关于我可以在Eclipse中调试AngularJS和TypeScript吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
