Wie kann ich eine React-App debuggen, die in einer Vagrant-VM mit VS-Code ausgeführt wird?

Question

Ich habe meine App mit create-react-app erstellt und in einer von Vagrant verwalteten VM ausgeführt. Die Quellen befinden sich im freigegebenen Ordner /vagrant und create-react-app Ansprüche aus der Box Debugability mit VS-Code. Ich verwende VS-Code auf dem Host.

Aber ich bin nicht sicher, wie meine Chrome Startkonfiguration für meinen Anwendungsfall einstellen, und egal, was ich versuche ich diese Botschaft, die ich auf jedem Haltepunkt erhalte gesetzt:

Haltepunkt ignoriert, da generato Code wurde nicht gefunden (? Quelle Karte Problem)

Answer 1

Hier ist eine Beispielkonfiguration:

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "type": "chrome", 
      "request": "launch", 
      "name": "Launch Chrome", 
      "url": "http://127.0.0.1:3000/", 
      "webRoot": "${workspaceRoot}", 
      "sourceMapPathOverrides": { 
       "/vagrant/*": "${workspaceRoot}/*" 
      } 
     } 
    ] 
} 

Wo:

ist wirklich die geheime Zutat, um Quellkarten für VS-Code praktikabel zu machen. Dadurch wird das /vagrant/-Verzeichnis, das normalerweise der Stamm Ihres Projekts auf der VM ist, auf ${workspaceRoot} abgebildet. Dies ist das Stammverzeichnis Ihres Projekts auf dem Host, wenn es als Verzeichnis in VS Code geöffnet wird.

Eine sehr einfache Lösung, im Nachhinein.