2016-03-30 16 views
0

Problem aktualisiert. Bitte überprüfen Sie die BearbeitungWebStorm: Fehlersuche Typoskript

Ich möchte den Debugger in Webstorm verwendet, um mein Projekt zu starten. Ich bin mit Angular2 und TypeScript. Ich muss Haltepunkte in meine Typoskript-Dateien einfügen.

Grundsätzlich meine index.html importiert nur einige JS-Dateien und startet meine App durch eine Funktion bootstrap definiert in einem anderen JS-Datei (transpiled von einer .ts-Datei!) mit dem Namen aufrufen.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <base href="/"> 
    <meta charset="UTF-8"> 
    <title></title> 

    <!-- 1. Load libraries --> 
    <!-- IE required polyfills, in this exact order --> 
    <script src="../node_modules/es6-shim/es6-shim.min.js"></script> 
    <script src="../node_modules/systemjs/dist/system-polyfills.js"></script> 
    <script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> 

    <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="../node_modules/systemjs/dist/system.src.js"></script> 
    <script src="../node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script> 

    <script src="build/core/system.config.js"></script> 
    <script src="build/core/moduleLoader.js"></script> 
    <script src="build/core/bootstrap.js"></script> 
    <script src="../node_modules/angular2/bundles/router.dev.js"></script> 

    <script> 
     bootstrap(); 
    </script> 
</head> 
<body> 

    <app-view>Loading...</app-view> 

</body> 
</html> 

bootstrap wie folgt definiert ist:

const bootstrap:()=>Promise<void>= async function() { 
    await ModuleLoader.loadAll(); 
    System.import('core/app').then(null, console.error.bind(console)); 
}; 

window.bootstrap = bootstrap; 

Wenn ich meine index.html im Debug-Modus ausführen, wird ein Fehler ausgelöst, bootstrap() nicht definiert ist.

Wenn ich die App in einem Browser ausführen, funktioniert es gut. Habe ich eine Konfiguration verpasst?

Ich habe das Jetbrains Plugin installiert (ich verwende Chrome) und den Port konfiguriert. Ich kann das "Laden ..." in meinem Browser sehen.


EDIT

Vielleicht eine nützliche Informationen:

Ich verwende Knoten. In mein serverseitiges Hauptscript habe ich express eingerichtet und einige Einstellungen vorgenommen. Wenn ich versuche zu debuggen, hört mein Server aber auf einem anderen Port (8080). Der Debugger verwendet den Port 63343.

+0

siehe https://confluence.jetbrains.com/display/WI/Start+a+JavaScript+debug+session#StartingaJavaScriptdebugsession-StartdebugsessionbeiVerwendungeinesanderenWebservers – lena

Antwort

3

Sie können eine JavaScript-Debugsitzung für jede URL starten. Sie müssen sie nur in der JavaScript-Ausführungskonfiguration angeben. Wenn Ihre App unter localhost:8080 ausgeführt wird, verwenden Sie diese URL in der JavaScript-Debugkonfiguration.

enter image description here

Ein weiterer wichtiger Punkt: stellen Sie sicher, Quelle Karten generieren, wenn Ihr Typoskript Code zu kompilieren.

Verwandte Themen