2014-09-02 12 views
6

Właśnie zacząłem pracować z TypEcs i próbuję utworzyć stronę w maszynach Typescript i AngularJS, którą chcę debugować w środowisku Eclipse.Czy mogę debugować AngularJS i TypeScript w Eclipse?

  • Czy można debugować stronę TypeScript i Angular w środowisku Eclipse? Jeśli tak, czy możesz mnie poprowadzić we właściwym kierunku?

Próbowałem debugować pojedynczy plik maszynopisu za pomocą opcji Standalone TypeScript i to działa. Ale chcę też użyć AngularJS. Stworzyłem plik index.html i plik app.ts. Zaimportowałem również pliki angular.d.ts i angular.min.js do folderu skryptów. Czy mogę to zrobić za pomocą dowolnego debugera TypScript? Próbowałem go uruchomić, ale pojawia się błąd w var app = angular.module ... (ReferenceError: kątowe nie jest zdefiniowane).

Domyślam się, że plik angular.min.js, do którego dowiązałem w pliku indeksu, nie został załadowany. Czy to dlatego, że app.ts jest ustawiony jako główny plik w konfiguracji StandScriptu typu? (Nie mogę wybrać pliku index.html) I/Czy brakuje jakiegoś kodu/ustawień?

Mam nadzieję, że możesz mi pomóc. Z góry dziękuję!

Oto przykład kod: 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); 
} 

Odpowiedz

4

Jak Basarat wspomniano możliwe jest angularjs debugowania i maszynopis pomocą "maszynopis Web Remote" opcję debugowania, który jest zawarty w TypEcs

Jak debugować strona:

  1. Zamknij wszystkie otwarte okna chrome.
  2. Otwórz Chrome dzięki poleceniu chrome.exe --remote-debugowanie-port = 9222
  3. Zastosuj konfigurację debugowania według "Dodaj maszynopis Debug dla WebKit trybie zdalnym" na TypEcs/2.0 - New and Noteworthy
  4. Otwórz stronę startową (index.html) w oknie chrome od punktu 1.
  5. idź do debugowania widzenia
  6. Debug wykorzystując konfigurację od kroku 3
  7. pojawia się okno, w którym należy wybrać zakładkę z plikiem, który chcesz debugować .
  8. Teraz możesz przejść przez kod i dodać punkty przerwania do pliku app.ts, jeśli chcesz.(Kliknij Główny wątek, jeśli nie widzisz opcji kroku)

Jeśli pojawi się błąd "Nie można uzyskać zakładki do debugowania, połączenie się skończyło" Zamknij wszystkie okna chrome i ponownie otwórz chrome za pomocą chrome.exe --remote-debugging-port = 9222 command.

1

I've tried to debug a single typescript file with the TypeScript Standalone option and it works. But I also want to use AngularJS

Te kroki są takie same, jak samodzielnie. Powinieneś włączyć opcję sourcemaps.

ReferenceError: angular is not defined

Jest coś złego w tagu script dla angular.min.js Sprawdź system plików i/lub żądanie przeglądarki sieciowej.

Patrz: WebKit zdalnego debugowania: https://bitbucket.org/axmor/typecs/wiki/2.0%20-%20New%20and%20Noteworthy

+0

Dziękuję basarat za odpowiedź. Teraz działa, gdy używana jest opcja zdalnego debugowania. Miałem otwarte inne okno chrome, które najwyraźniej musiałem zamknąć przed uruchomieniem chrome.exe --remote-debugging-port = 9222 lub pojawił się błąd "Nie udało mi się uzyskać zakładek do debugowania przekroczenia limitu czasu", gdy próbowałem go debugować. Mimo to nadal mam ten sam błąd w trybie Standalone, ale chyba nie powinienem tego używać. Jeszcze raz dziękuję – Sofi