"Unverifizierter Haltepunkt" in Visual Studio Code mit Chrome Debugger-Erweiterung

Meine Lösung für das Problem "Unverifizierter Haltepunkt".

Umgebung

• Angular CLI 8.1.1
• Visual Studio Code 1.36.1
• Debugger für die Erweiterung Chrome 4.11.6

Die in VSC über die Option "Konfiguration hinzufügen" erstellte Standard-vscode/launch.json sieht ähnlich aus (ich habe den Port von 8080 auf 4200 geändert).

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}"
  }]
}

Das Hinzufügen eines Elements unten behebt mein Problem mit dem "nicht verifizierten Haltepunkt".

"sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }

Vollständige und funktionierende .vscode/launch.json:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }
  }]
}

Es gibt einige zusätzliche Elemente, die hinzugefügt werden können:

 "breakOnLoad": true,
 "sourceMaps": true,

Diese brauchte ich jedoch in meinem Fall nicht, um das Problem zu lösen.

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "breakOnLoad": true,
    "sourceMaps": true,
    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }
  }]
}

Die obige Antwort wird wahrscheinlich eine Menge Probleme lösen, aber meine hat sie nicht gelöst. Meines war ein viel einfacheres und nervigeres Problem ... 

Bei den Konfigurationseinstellungen in der Datei launch.json wird die Groß- und Kleinschreibung beachtet.

Mein "webRoot" -Eintrag wurde richtig geschrieben, aber ich hatte ein Großbuchstabe B in einem der Wörter anstelle eines Kleinbuchstaben b.

Zum Beispiel:

"webRoot": "$ {workspaceFolder}/Mein .F älter"

entspricht keinem Ordner in Ihrem Arbeitsbereich mit dem Namen:

Mein .f älter

Ich hoffe, das hilft jemandem da draußen.

In meinem Fall musste ich den sourceMapPathOverrides-Wert folgendermaßen definieren:

Datei launch.json (im .vscode Ordner enthalten):

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "smartStep": true,
      "internalConsoleOptions": "openOnSessionStart",
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/project/app/*"
      }
    }
  ]
}

Meine Quelle ist in ${workspaceFolder}/project/app.

Unverified breakpoint

Ich habe 2 Ursachen für dieses Problem gefunden:

1. Ich musste den richtigen Arbeitsbereichsordner festlegen .

2. Ich musste meine Web-App vor dem Debuggen mit npm start starten.

Es gibt viele richtige Antworten. In meinem Fall hat eine Kombination all dieser Antworten geholfen, und ich habe lange gebraucht, um das herauszufinden. Ich hoffe, ich kann Ihnen damit einige Kopfschmerzen ersparen

lassen Sie mich es Schritt für Schritt mit Bezug auf die obigen Antworten zusammenfassen, was mir geholfen hat:

1. Es ist wichtig, den VS-Code aus dem rechten Ordner zu starten (siehe Antworten von CodeChimp und monstertjie_za ). 
   Öffnen Sie ein Konsolenfenster und cd im Projektordner.
   Beispiel:
   cd myProject
code .
2. Stellen Sie sicher, dass Sie die Dateien im rechten Ordner .vscode konfigurieren.
   Der rechte .vscode-Ordner ist ein Unterverzeichnis Ihres Projektordners.
   Hinweis:, wenn Sie den VS-Code in einer Unterordnerebene bereits versehentlich zu tief geöffnet haben, z. Im src-Ordner finden Sie dort (wie in meinem Fall) einen .vscode-Ordner mit Konfigurationsdateien, die zum Debuggen nicht geeignet sind.

3. Richten Sie eine Debug-Konfiguration in der .vscode\launch.json-Datei ein.
   Stellen Sie sicher, dass Sie den richtigen Port für Ihre Anwendung angegeben haben. In diesem Fall war port 4200 in Ordnung.
   Stellen Sie außerdem sicher, dass der Parameter "webRoot" korrekt konfiguriert ist (siehe Antwort von Stig Perez ). In meinem Fall musste ein Unterordner hinzugefügt werden. Um herauszufinden, was der Pfad ist, der von der Variablen $(workspaceFolder) angegeben wird, sehen Sie sich die Frage an, die ich bei StackOverflow in Bezug auf die Anzeige von VS-Codevariablenwerten gestellt habe. .
   Note: Falls noch keine solche Konfiguration vorhanden ist, fügen Sie sie wie folgt hinzu: Gehen Sie zur Debug-Erweiterung (d. H. Klicken Sie in die Seitenleiste). Wählen Sie im Dropdown-Menü Ihres Debuggers die Option "Konfiguration hinzufügen ..." aus und drücken Sie dann die blaue Schaltfläche "Konfiguration hinzufügen". Wählen Sie "Launch Chrome" als hinzuzufügende Konfiguration.
   Beispielkonfiguration (launch.json):

   "configurations": [
           {
                   "type": "chrome",
                   "request": "launch",
                   "name": "Launch Chrome",
                   "url": "http://localhost:4200",
                   "webRoot": "${workspaceFolder}/projectsubfolder"
           }]
   

   Ersetzen Sie projectsubfolder durch den Unterordner, den Sie möglicherweise in Ihrem Projekt haben. Beachten Sie, dass dies die Groß- und Kleinschreibung berücksichtigt (siehe Antwort von Michael Walsh ).

4. Legen Sie nun die Haltepunkte in Ihrer Anwendung fest.

5. Um Ihre Anwendung mit dem Debugger zu starten, öffnen Sie ein Terminalfenster im VS-Code. Geben Sie Folgendes ein 
   cd projectsubfolder
npm install & ng serve
   Dadurch wird sichergestellt, dass die abhängigen Pakete aufgelöst und heruntergeladen werden, bevor Ihre Anwendung kompiliert wird.
   Klicken Sie dann im VS-Debugger auf das grüne Dreieck, um ein Chrome-Fenster mit angeschlossenem Debugger zu starten.

Ich musste meinen .vscode-Ordner löschen und neu generieren. und auch der Ordner zeigte auf einen falschen Pfad. Ich musste ihn auf meinen aktuellen Projektordnerpfad zurücksetzen. Vielen Dank

Nachdem ich 3 kostbare Stunden meines Lebens verbracht und viele der oben aufgeführten Antworten durchgesehen hatte, war mein Problem so einfach, dass ich in meinem php.ini nicht die folgende Zeile hatte:

xdebug.remote_autostart = 1

Davor hatte ich XDebug bereits auf meinem XAMPP konfiguriert, aber meine Breakpoints wurden einfach nicht getroffen. Es war nur so, dass mein Debug-Server nicht so konfiguriert war, dass er automatisch gestartet wurde.

Hoffe, das spart jemandem den Tag.

Ich bin auch auf das Problem gestoßen, nachdem ich den Projektordner umbenannt hatte, und es stellte sich heraus, dass die Eigenschaft "webRoot" auf "$ {workspaceFolder}/src" anstelle von "$ {workspaceFolder}" verweist. Vielleicht war dies ein Teil des Updates für die Erweiterung "Debugger for Chrome". Da ich jedoch kein Update erhalten habe, kann ich das nicht überprüfen.

"WebRoot" zu aktualisieren, die ng serve-Sitzung neu zu starten und eine neue Debug-Sitzung zu starten, war der Trick. Ich hoffe, das hilft jemandem mit einer ähnlichen Szenerie.

Ich hatte im VS Code den Ordner my-app geöffnet, in dem sich client Ordner und server Ordner befanden. Ich musste in launch.json dies ändern

"webRoot": "${workspaceFolder}"

dazu

"webRoot": "${workspaceFolder}\\client"

Eine andere Antwort, die ich gerade entdeckt habe, bezieht sich auf faul geladene Module.

Wenn Sie Haltepunkte in Code setzen möchten, der Teil eines verzögert geladenen Moduls ist, und Sie dieses Modul nicht im Browser geladen haben, hat VS-Code keinen Zugriff auf die Quellzuordnungen, um die Haltepunkte zu überprüfen!

setzen Sie also nur dann Haltepunkte, wenn Sie das verzögert geladene Modul geladen haben, das Sie debuggen möchten!

In meinem Fall hatte ich eine main.js-Datei in der Projektwurzel, um sie als Elektronen-App auszuführen. Wenn diese main.js-Datei entfernt wurde, wurde das Problem behoben.

Ich habe eine Ordnerstruktur (siehe unten) und habe das Projekt zero auf VS Code geöffnet.

Null/

Dann launch.json

  "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}/angular"
        }
    ]

Wenn Sie Code-Splitting über Webpack verwenden, wird Ihr Haltepunkt erst dann "überprüft", wenn Chrome dieses Modul lädt (d. H. Normalerweise, wenn Sie zu diesem Teil Ihrer Anwendung navigieren).

Die Lösung ist einfach:

1. Klicken Sie auf Datei-> Ordner öffnen-> (wählen Sie den Ordner Ihres Projekt- Ordners aus, der package.json enthält)
2. Debug öffnen -> Drücken Sie die Wiedergabetaste, um eine neue Chrome-Konfiguration zu erstellen.
3. Einen neuen Haltepunkt setzen!
4. Genießen!

Ich habe diesen Fehler nur erhalten, weil ich "sourceMaps": true nicht in meiner Debug-Konfiguration hatte.

Die Lösung für mich bestand darin, der Datei launch.json die folgende Zeile hinzuzufügen: "requireExactSource": false. Starten Sie danach VSC neu und versuchen Sie, ob es funktioniert.

Für mich wurden meine Haltepunkte deaktiviert:

npm i reparierte es für meinen Teil. Ich erhalte manchmal nicht überprüfte Haltepunkte, wenn ich einen neuen Ordner/eine neue Datei erstelle, und das ist normalerweise so.

Wenn alles richtig aussieht, der Haltepunkt jedoch nicht erreicht wird, musste ich den genauen Dateinamen angeben, der geliefert werden soll. Zum Beispiel würde auf NodeJS Express die Angabe von localhost:3000 nicht bei meinen Haltepunkten aufhören, sondern localhost:3000/index.html funktionierte wie erwartet

Vollständige Konfiguration:

Mein Ordner ist in VSCode geöffnet: learningPixi mit vollständigem Ordner (Ubuntu Linux): /home/leigh/node/pixi-tut/learningPixi

Meine Ordnerstruktur ist:

/home/leigh/node/pixi-tut/learningPixi/.vscode/launch.json /home/leigh/node/pixi-tut/learningPixi/public/index.html /home/leigh/node/pixi-tut/learningPixi/server.js

Inhalt meiner launch.json-Datei:

{  
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000/index.html",
      "webRoot": ${workspaceFolder}/public",
      "skipFiles": ["pixi.min.js"]
    }
  ]
}

"skipFiles" war auch sehr nützlich, da ansonsten der Debugger in jeden Funktionsaufruf eintritt

Meine (sehr grundlegende) Express-Server-Konfiguration nur zum Debuggen von JavaScript in statischen Dateien war:

const express = require('express');
const path = require('path');

const app = express();
app.use(express.static(path.join(__dirname, '/public')));
app.listen(3000, () => console.log('App started on port 3000'));

Und gemäß der obigen Ordnerstruktur müssen Sie sicherstellen, dass sich index.html im Ordner/public befindet

Wenn Sie JavaScript aus einer HTML-Datei heraus debuggen, müssen Sie möglicherweise auch Einstellungen in VSCode vornehmen und Folgendes aktivieren: Haltepunkte überall zulassen

In meinem Fall bestand das Problem darin, dass der Haltepunkt auf eine Zeile gesetzt wurde, in der eine Funktion deklariert wurde

openDetails(data: Asset) {         <-- The break point was here
    this.datailsOpen = true;
    this.currentAsset = data;
}

Lösung: verschiebe es in den Körper der Funktion

openDetails(data: Asset) {         
    this.datailsOpen = true;        <-- Move the break point here
    this.currentAsset = data;
}

Mein Problem war, dass die Quellenzuordnung nicht richtig konfiguriert wurde. Stellen Sie sicher, dass Ihre tatsächlichen TS-Quellen auf der Registerkarte "Quellen" in den Chrome-Debug-Erweiterungen sichtbar sind, und versuchen Sie, Ihre Haltepunkte zuerst dort zu platzieren. Vielleicht hilft es jemandem.