Der Chrome-Debugger funktioniert nicht mit Typoskriptdateien
Ich benutze webstorm 2016.2, angular-cli, webpack2. Auf dem Foto kann ich keine Bruchstelle in den Zeilen 19, 20, 22, 23 erstellen. Wenn ich in Zeile 21 erstelle, druckt die Konsole nicht, was ich ihm in Zeile 19 gesagt habe.
Ich sehe ts-Datei, die debuggt werden sollte, aber es scheint, dass ich andere Datei oder die js-Datei debuggen, auf die ich keinen Zugriff habe.
Ich würde gerne die ts-Datei debuggen, wenn möglich und wenn nicht, die js-Datei.
angular-cli.json:
%Vor%tsconfig.json:
%Vor%3 Antworten
Ihr ts Code wird während der Kompilierzeit in js konvertiert und es ist schließlich eine Javascript Datei, die im Webbrowser geladen wird. Ihr Browser weiß nicht über typescript .
ts --- & gt; js (es5).
Wenn der Debugger ausgeführt wird, wird die entsprechende kompilierte js -Datei ausgeführt. Wenn es einen Fehler gibt, zeigt es auf js -Datei und Sie werden mit Hilfe von ts intern auf .d.ts datei Zeilennummer (wo der Fehler aufgetreten ist) abgebildet.
Wenn Sie debuggen möchten, können Sie karma test runner verwenden oder visual studio code verwenden, das ausschließlich Debug-Optionen bietet.
Wenn Sie Werkzeuge in TypeScript-Dateien verwenden möchten, müssen Sie im Allgemeinen Map-Dateien generieren, während Sie Ihr TypeScript kompilieren.
Map-Dateien enthalten Informationen darüber, wie die ursprüngliche .ts -Datei mit der kompilierten .js -Datei verknüpft werden kann. Tools wie Debugger benötigen diese Dateien oft, um auf .ts files reagieren zu können.
Jemand hat es hier erklärt.
Wenn Sie keine zusätzliche Datei für diese Zuordnungen erstellen möchten, den TypeScript-Compiler < Mit / a> können Sie diese Informationen direkt am Ende der kompilierten Dateien mithilfe von --inlineSourceMap hinzufügen.
Hier denke ich, dass Chrome die Kartendateien nicht findet.
Chrome perfektioniert Fehler, erlaubt es, Haltepunkte hochzuhalten und protokolliert Nachrichten. Ich denke, das Problem liegt in deinem tsconfig.json . Wie andere Antwort erwähnt, müssen Sie js Dateien zum Zeitpunkt der Kompilierung selbst generieren. . Um den Compiler darüber zu informieren, müssen Sie hinzufügen:
Dies beginnt mit der Kompilierung Ihres Typoskripts, unmittelbar nachdem Sie es gespeichert haben.
Und ya, wenn es immer noch nicht funktioniert, löschen Sie den Cache Ihres Browsers und starten Sie den Browser neu. Dies wird sicherlich die Magie machen.
Ich hoffe, es hilft. (Meine Chrome-Version: 52.0.2743.116 m (64-Bit) - & gt; aber das ist nicht wirklich wichtig)
Tags und Links javascript debugging google-chrome-devtools angular typescript