[DOCKER] SourceMapPathOverrides Festlegen von Memos im VSCode Debugger für Chrome

Der Titel ist ein wenig streunend. Ich hoffe, dass jemand, der so süchtig ist wie ich, zu mir kommt.

Hinweis

Der folgende Inhalt funktioniert nur für das "Angular" -Projekt. Ich konnte es nicht tun, als ich dachte: "Sie können es mit dem gleichen Kleber und der gleichen React + Docker-Konfiguration tun!"

(Unsichere Informationen) Möglicherweise wird Webpack standardmäßig installiert, sodass Angular2 + Source-Map angezeigt werden kann. .. (Das React-Projekt, das ich ausprobiert habe, hat die Quellkarte in Webpack nicht angezeigt.) Offiziell (Kapitel "Sourcemaps" "Was ist, wenn ich die Quellkarte mit Webpack überhaupt nicht erstellt habe?" Wenn Sie es lesen, haben Sie das Gefühl, dass Sie es nicht lesen können.)

Wenn Sie zu diesem Artikel in der Umgebung von React oder Vue + Docker gekommen sind, gab es einen Artikel, der Debugger für Chrome aus der Erweiterung von Remote Development verwendet, also werde ich ihn veröffentlichen. Die Geschichte des Erstellens einer Vue.js-Entwicklungsumgebung mit dem Container von Visual Studio Code Remote

Wovon ich süchtig war

Debuggen von Angular-Code in VSCode mit einer praktischen Erweiterung in VScode namens Debugger for Chrome Ich habe es versucht.

Aber ** der Prozess stoppt nicht am Haltepunkt. ** ** **

Umgebung

Ich habe eine Docker-Umgebung erstellt, indem ich auf den folgenden Artikel verwiesen habe. Einfache Konstruktion für Docker x Angular-Umgebung

Ursache

Launch.json (Konfigurationsdatei) von Debugger for Chrome war keine richtige Beschreibung.

Lösung (nur Ergebnisse)

Die endgültige launch.json (Konfigurationsdatei) lautet:

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "for angular",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/server/angular-app/*"
                }
        }
    ]
}

Wenn Sie das Obige kopieren und einfügen und es funktioniert, haben Sie wahrscheinlich ** wahnsinnig viel Glück ** (^^;

Wenn Sie anhand der folgenden Artikel verstehen können, müssen Sie möglicherweise nicht weiter lesen. Debug Angular wurde im Docker-Container mit VS-Code gestartet ["Remote-Debugging- und Logger-Tipps, die in Imadokis JavaScript-Entwicklung verwendet werden können (Version 2018 - Teil 2)"](https://seroku.jp/wp/%E3%80%8C%E3%82%A4%E3%83 % 9E% E3% 83% 89% E3% 82% AD% E3% 81% AE-Javascript-% E9% 96% 8B% E7% 99% BA% E3% 81% A7% E4% BD% BF% E3% 81% 88% E3% 82% 8B% E3% 80% 81% E3% 83% AA% E3% 83% A2% E3% 83% BC% E3% 83% 88% E3% 83% 87% E3% 83% 90% E3% 83% 83 /) Debug funktioniert nicht in Visual Studio-Code

Erläuterung

Wenn Sie wissen, was Sie mit "sourceMapPathOverrides" versuchen, können Sie es richtig einstellen.

Was Sie mit sourceMapPathOverrides versuchen

** "Verknüpfen Sie die Quellkarte des Browsers mit dem lokalen Quelllayout (in VScode implementiert)" **.

• Es ist leichter zu verstehen als Genauigkeit.

Hier ist eine andere wichtige Sache, was der "webRoot" ist.

            "webRoot": "${workspaceFolder}",

$ {workspaceFolder} `ist die Standardbeschreibung. ** Bezieht sich auf das Arbeitsbereichsstammverzeichnis in VScode **.

Wie man die Lösung führt

• Die Quelle selbst ist ein Angular-Tutorial.

Informationen zur Platzierung der Browserquelle

** Platzieren Sie zunächst die Browserquelle **, wie in [Debug Angular im Docker-Container mit VS-Code gestartet] beschrieben (https://qiita.com/sathoshi-metal/items/2b7f02cdba1b922c6d4d). Sie können dies herausfinden, indem Sie den Quellabschnitt mit dem Chrome-Entwicklungstool öffnen und den Pfad der entsprechenden Quelldatei überprüfen.

Zum Beispiel befindet sich das obige "hero.service.ts" unter "webpack: ///./ src / app / hero.service.ts" als Quellspeicherort für den Browser.

Die Quelle, die Sie debuggen möchten, ist alles in src, also Das ** Browser-Quelllayout **, das Sie verknüpfen möchten (einschließlich des Ordners "src"), wird diesmal als "Webpack: ///./*" betrachtet.

Informationen zur Platzierung lokaler Quellen

Diese Hierarchie

angular-traial ←※ webRoot=`${workspaceFolder}`Position von
├── .vscode
│   └── launch.js
├── docker
│   └── node
│       └── Dockerfile
├── docker-compose.yml
└── server
    └── angular-app
        ├── README.md
        ├── angular.json
        ├── e2e
        ├── karma.conf.js
        ├── node_modules
        ├── package-lock.json
        ├── package.json
        ├── src
        │   ├── app
        │   │   ├── app-routing.module.ts
        │   │   ├── app.component.html
        │   │   ├── app.component.sass
        │   │   ├── app.component.spec.ts
        │   │   ├── app.component.ts
        │   │   ├── app.component_bk.html
        │   │   ├── app.module.ts
        │   │   ├── dashboard
        │   │   ├── hero-detail
        │   │   ├── hero-search
        │   │   ├── hero.service.spec.ts
        │   │   ├── hero.service.ts
        ~Unten weggelassen~

VS-Code-Bearbeitungsbildschirm

Wo ist webRoot = $ {workspaceFolder}? Es ist buchstäblich der Stammspeicherort des VScode-Arbeitsbereichs, diesmal der Speicherort des Ordners "Angular-Traial" (wie in der hierarchischen Struktur beschrieben).

Dies hängt davon ab, wie Sie jeden einzelnen Arbeitsbereich öffnen. Wenn Sie jedoch versuchen, launch.js zu erstellen, sollte dies "$ {workspaceFolder} /. Vscode" sein.

Ordnen Sie das Buchende der Browser-Quellenplatzierung der lokalen Quellenplatzierung zu.

Wenn Sie sich das Quelllayout des Browsers als "webpack: ///./*" einschließlich des src-Ordners vorstellen,

Beinhaltet die Platzierung lokaler Quellen bis zum Ordner src (Höhere Hierarchie) / Angular-Traial / Server / Angular-App / * =${workspaceFolder}/server/angular-app/* =${webRoot}/server/angular-app/* In diesem Fall ist dies die richtige Einstellung.

            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/server/angular-app/*"
                }

Beiseite

Sobald Sie dies verstanden haben, ist es einfach, "das Debug-Ziel nur auf den src-Ordner zu beschränken".

            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${webRoot}/server/angular-app/src/*"
                }

(Natürlich habe ich gerade den Teil / src / zu beiden hinzugefügt) Wo es basiert, hängt möglicherweise von der Site und den Referenzen ab.

Wenn Sie mit "sourceMapPathOverrides" vertraut sind, sollten Sie in der Lage sein, damit umzugehen. ..

das Ende

Wenn Sie "Debugger for Chrome" verwenden, müssen Sie nicht mit den Entwicklertools nacheinander nach der Quelle suchen. (Ich bin ein bisschen süchtig danach, aber Angulars Studie scheint Fortschritte zu machen)

das ist alles!