Chrom - Debug-Eckig/Typoskript - wie navigieren Sie zur ts-Datei

Debuggen meiner eckige front-end, öffne ich die dev-tools im Google Chrome und die Quellen Registerkarte und navigieren Sie zu der ts-Datei, indem Sie Sie nach unten durch alle Ordner und wenn ich die ts-Datei habe ich dann einen breakpoint setzen. und wieder auf die Anwendung und starten Sie Debuggen.

Während dies funktioniert, es ist sehr zeitaufwendig zu haben, um einen Drilldown durch die Ordner... und sich für die ts-Datei. Wie ist das Projekt gewachsen, ich finde, es ist immer noch mehr Zeit in Anspruch.

Ich auch daran denken, die TS-Datei zugeordnet ist, mit der Seite.

Weiß jemand, ob es möglich ist, direkt von der Seite auf die ts-Datei ?

Ich würde lieben zu können, klicken Sie rechts und wählen Sie eine Menüoption, um direkt an die ts-Datei in genau der Weise, Inspizieren funktioniert für HTML-Dateien.

Vorschläge sollten berücksichtigen, dass das Projekt ziemlich groß ist.
Ich habe versucht, zu verwenden, einige add-on, aber es dauerte eine Ewigkeit, zu aktualisieren, war unbrauchbar.

Hat jemand irgendwelche Tipps, wie zu vermeiden, einen Drilldown durch die Ordner zu finden, die ts-Datei und Einstellung der Haltepunkt. Wie kann das erreicht werden, in einem viel schneller, effizienter Weg ?

Dank einer million,
Fergal.

Drücken Sie [Strg]+[P] in den Chrome Dev-Tools Suche eine TS-Datei und öffnen Sie Sie. Das, was ich mache : kopieren Sie den Dateinamen aus VSCode und fügen Sie ihn in die Suche inputbox. Es ist nicht viel, aber es spart uns etwas Zeit.
Danke Romain. Ich bin mit diesem Ansatz jetzt. Spart mir viel Zeit. Danke!
Mit Chrome-Debugger-Erweiterung für Vscode. sehen die neue Antwort.

InformationsquelleAutor fergal_dd | 2017-10-12

  1. 20

    Winkel verwendet webpack und alle Art-Skript-Dateien, die unter aufgelistet sind. Wählen Sie Ihr Ziel typescript-Datei, die Chrome Developer Tools (F12). Gehen Sie zur Registerkarte "Quelle" wählen Sie eine "webpack://"->"."->"src/app" -> Ihr Transcript ( Siehe Bild Datei).

    Dann das debug-Zeile marker auf ts-Datei und verwenden Sie die normale java-script-Tastatur(F8, F10, F11 etc) - Funktion zum Debuggen.

    Chrom - Debug-Eckig/Typoskript - wie navigieren Sie zur ts-Datei

    Das ist das richtige und sehr hilfreiche Antwort und sollte als solche gekennzeichnet sein
    besser, einfach Strg+P verwenden, navigieren Sie direkt zu ihm, anstatt zu öffnen die Registerkarte "Quelle". Viel schneller, wenn Sie verwenden die Tastenkombination Strg+P-Ansatz (wie Sie sich selber entdecken).

    InformationsquelleAutor kumar chandraketu

  2. 8

    Schritte:

    1. Öffnen von Chrome Developer Tools (F12).
    2. Drücken Sie [Strg]+[P] in den Chrome Dev-Tools Suche eine TS-Datei und öffnen Sie Sie.

    Können, können Sie auch kopieren Sie den Dateinamen in den code
    und fügen Sie es in die Suche inputbox.

    Dies ist der beste Ansatz.

    Danke , Strg + p ist die Taste, die ich wollte!!!

    InformationsquelleAutor fergal_dd

  3. 1

    Wenn Sie Eckig mit VS code und Debuggen will im Chrome-browser Folgen Sie dieser Schritt

    1) Installieren Chrome-Debugger-Erweiterung

    2) Nach der installation die debug-plugin-Symbol erscheint im linken Bereich. Klicken Sie auf, um die neuen Fenster.

    3) Jetzt wählen Sie "Debuggen" -> Konfiguration Hinzufügen. Dadurch wird Starten.json-Datei mit pre-besiedelten Werte. Aktualisieren Sie es mit Ihrer url und port-Nummer.

    4) Jetzt gehen Sie zurück zu Ihrem code und fügen Sie einen Haltepunkt, wo immer Sie wollen.

    5) Starten Sie Ihre Anwendung im terminal (npm start). Wählen Sie "debug" plugin-button wieder aus dem linken Bereich. es wird über alle Haltepunkte aufgeführt.

    6) Wählen Sie "Debuggen" -> Starten Sie Chrome Gegen localhost-option. Dies wird öffnen Sie ein separates browser "Google chrome" - Fenster und auf vscode, debug-Steuerelemente Schaltfläche wird angezeigt, ähnlich zu Visual studio alternativ können Sie die Tastatur-Tasten auch um den code zu Debuggen. Siehe Bild unten

    Chrom - Debug-Eckig/Typoskript - wie navigieren Sie zur ts-Datei

    InformationsquelleAutor kumar chandraketu

  4. 1

    Offene Entwickler-Konsole und CTRL+P Ihre Dateien zu finden

    InformationsquelleAutor Abdus Salam Azad

Schreibe einen Kommentar