Kan jeg feilsøke AngularJS og TypeScript i Eclipse?

Jeg har nettopp begynt å jobbe med TypEcs og jeg prøver å lage en nettside i Typescript og AngularJS som jeg vil feilsøke i Eclipse.

  • Er det mulig å feilsøke en TypeScript- og Angular-side i Eclipse? Hvis ja, kan du da vennligst veilede meg i riktig retning?

Jeg har prøvd å feilsøke en enkelt TypeScript-fil med TypeScript Standalone-alternativet, og det fungerer. Men jeg vil også bruke AngularJS. Jeg har laget en index.html-fil og en app.ts-fil, og jeg har også importert angular.d.ts og angular.min.js, blant andre, inn i en script-mappe. Kan jeg gjøre dette ved å bruke noen av TypEcs TypeScript-debuggerne? Jeg har prøvd å kjøre det, men jeg får en feil på var app=angular.module... (ReferenceError: angular er ikke definert).

Mitt gjetning er at angular.min.js-filen som jeg lenker til i index-filen ikke har blitt lastet. Er det fordi app.ts er satt til å være hovedfilen i TypeScript Standalone-konfigurasjonen? (Jeg kan ikke velge index.html) Og/eller mangler jeg noe kode/innstillinger?

Jeg håper du kan hjelpe meg. Tusen takk på forhånd!

Her er noen eksempler på kode: 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);
}

Svar #1

Som Basarat nevnte, er det mulig å feilsøke AngularJS og TypeScript ved å bruke debug-alternativet "TypeScript Web Remote", som er inkludert i TypEcs

Hvordan feilsøke siden:

  1. Lukk alle åpne Chrome-vinduer.
  2. Åpne Chrome igjen med kommandoen chrome.exe --remote-debugging-port=9222
  3. Bruk en feilsøkingskonfigurasjon i henhold til "Legg til TypeScript-feilsøking for WebKit ekstern modus" på TypEcs/2.0 - Nytt og bemerkelsesverdig
  4. Åpne start-siden din (index.html) i Chrome-vinduet fra punkt 1.
  5. Gå til debug-visning
  6. Feilsøk ved å bruke konfigurasjonen fra trinn 3
  7. Et dialogvindu vises hvor du må velge fanen med filen du ønsker å feilsøke.
  8. Nå kan du gå gjennom koden og legge til bruddpunkter i app.ts-filen hvis du ønsker det. (Klikk på Hovedtråd hvis du ikke ser trinnalternativene)

Og hvis du får feilen "Failed to get tabs for debugging connect timed out", lukk alle Chrome-vinduer og åpne Chrome på nytt med kommandoen chrome.exe --remote-debugging-port=9222.

Svar #2

Jeg har prøvd å feilsøke en enkelt TypeScript-fil med TypeScript Standalone-alternativet, og det fungerer. Men jeg vil også bruke AngularJS

Trinnene er de samme som for frittstående. Du bør ha kildekart aktivert.

ReferenceError: angular er ikke definert

Det er noe galt med script-taggen din for angular.min.js. Sjekk filsystemet og/eller nettverksforespørselen i nettleseren.

Se: webkit remote debug: https://bitbucket.org/axmor/typecs/wiki/2.0%20-%20New%20and%20Noteworthy

Relaterte artikler