"Nicht verifizierter Haltepunkt" in Visual Studio Code mit Chrome Debugger-Erweiterung

Ich versuche, meinen Typescript-Code in Visual Studio Code mit der Chrome Debugger-Erweiterung zu debuggen, erhalte jedoch die Meldung "Nicht verifizierter Haltepunkt" auf meinem Haltepunkt, und die Ausführung wird auf meinem Haltepunkt nicht gestoppt.

Hier ist meine Datei launch.json:

{
    linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}

App Version:

• Visual Studio-Code: 1.25.1
• Chrome: 67.0.3396.99

Irgendwelche anderen Vorschläge, wie ich dieses Problem lösen kann?

Ich habe endlich herausgefunden, was falsch ist:

Wenn ich die Definition von '$ {workspaceFolder}' lese, heißt es Folgendes:

Der Pfad des in VS Code geöffneten Ordners

Mein Fehler:

Mein Pfad in Windows zu meinem Projekt war wie folgt: C:\Users\myusername\Documents\VSCode\Source\ProjectName

Über Visual Studio Code hatte ich den SourceOrdner geöffnet und musste immer einen Befehl Integrated Terminalzum Ändern des Verzeichnisses (cd ProjectName) in 'ProjectName' ausführen. Dies führte dazu, .vscode folder and launch.json filedass im SourceOrdner und nicht im ProjectNameOrdner erstellt wurde.

Der obige Fehler führte dazu, dass der ${workspaceFolder}auf den SourceOrdner zeigte, in dem sich keine Angular-Komponenten befanden, anstatt auf den ProjectNameOrdner zu zeigen.

Die Reparatur:

Öffnen Sie in Visual Studio Code den Ordner: C:\Users\myusername\Documents\VSCode\Source\ProjectNameund richten Sie my launch.jsonin diesem Verzeichnis ein.

Ein weiteres Update für @ angle / cli 9.1.7 28/05/2020 ...

Dies ist jetzt meine Arbeitskonfiguration für @ angle / cli 9.1.7. Entferne densourceMapPathOverrides

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

{
  // 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:21460",
    "webRoot": "${workspaceFolder}"
  }]
}

Meine Lösung für das Problem "Nicht überprüfter Haltepunkt".

Umgebung

• Angular CLI 8.1.1
• Visual Studio Code 1.36.1
• Debugger für Chrome-Erweiterung 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}"
  }]
}

Durch Hinzufügen eines Elements unten wird mein Problem mit "Nicht überprüfter Haltepunkt" behoben.

"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,

In meinem Fall brauchte ich diese jedoch 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 viele Probleme lösen, aber meine hat sie nicht gelöst. Meins war ein viel einfacheres und nervigeres Problem ...

Bei den Konfigurationseinstellungen in der Datei launch.json wird zwischen Groß- und Kleinschreibung unterschieden.

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

Zum Beispiel:

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

Es wird kein Ordner in Ihrem Arbeitsbereich mit dem Namen abgeglichen:

Meine. f älter

Ich hoffe das hilft jemandem da draußen.

In meinem Fall musste ich den sourceMapPathOverridesWert folgendermaßen definieren :

Datei launch.json(im .vscodeOrdner 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.

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

Lassen Sie es mich Schritt für Schritt unter Bezugnahme auf die obigen Antworten zusammenfassen, was mir geholfen hat:

1. Es ist wichtig, VS-Code aus dem richtigen Ordner zu starten (siehe Antworten von CodeChimp und monstertjie_za ).
   Öffnen Sie ein Konsolenfenster und cdden Projektordner.
   Beispiel:
   cd myProject
code .
2. Stellen Sie sicher, dass Sie die Dateien im richtigen .vscodeOrdner konfigurieren .
   Der richtige .vscodeOrdner ist ein Unterverzeichnis Ihres Projektordners.
   Hinweis: Wenn Sie VS-Code bereits fälschlicherweise in einer zu tiefen Unterordnerebene geöffnet haben, z. B. im srcOrdner, finden Sie .vscodedort (wie in meinem Fall) einen Ordner mit Konfigurationsdateien, die für das Debuggen unbrauchbar sind.

3. Richten Sie eine Debug-Konfiguration in der .vscode\launch.jsonDatei ein.
   Stellen Sie sicher, dass Sie den richtigen Port für Ihre Anwendung angegeben haben. In meinem Fall war der Port4200 in Ordnung.
   Stellen Sie außerdem sicher, dass der "webRoot"Parameter korrekt konfiguriert ist (siehe Antwort von Stig Perez ). In meinem Fall musste ein Unterordner hinzugefügt werden. Um herauszufinden, welcher Pfad von der Variablen angegeben $(workspaceFolder)wird, lesen Sie die Frage, die ich bei StackOverflow gestellt habe, wie VS- Codevariablenwerte angezeigt werden.
   Hinweis:Wenn es noch keine solche Konfiguration gibt, gehen Sie folgendermaßen vor, um sie hinzuzufügen: Wechseln Sie zur Debug-Erweiterung (dh klicken Sie auf die Seitenleiste). Wählen Sie in der Dropdown-Liste Ihres Debuggers "Konfiguration hinzufügen ..." und klicken Sie dann auf die blaue Schaltfläche "Konfiguration hinzufügen". Wählen Sie "Chrome starten" als Konfiguration, die hinzugefügt werden soll.
   Beispielkonfiguration ( launch.json):

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

   Ersetzen Sie projectsubfolderdurch den Unterordner, den Sie möglicherweise in Ihrem Projekt haben. Beachten Sie, dass hier zwischen Groß- und Kleinschreibung unterschieden wird (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 und 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. Warten Sie, bis die Kompilierung abgeschlossen ist.
   Klicken Sie dann im VS-Debugger auf das grüne Dreieck, um ein Chrome-Fenster mit angehängtem Debugger zu öffnen.
   Hinweis: Sie müssen nicht npm installjedes Mal ausgeführt werden, nur wenn sich Pakete / Abhängigkeiten geändert haben. In den meisten Fällen reicht die Ausführung aus ng serve, um den Code neu zu kompilieren und auszuführen.

Ich habe eine Ordnerstruktur wie unten gezeigt und ich habe das zeroProjekt auf VS Code geöffnet .

Null/

Dann starte.json

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

Unverified breakpoint

Ich habe 3 Ursachen für dieses Problem gefunden:

1. Die launch.jsonautomatisch generierte Konfigurations-URL war falsch. Stellen Sie sicher, dass die Portnummer mit dem Localhost-Port übereinstimmt, auf dem Ihre Web-App ausgeführt wird. Ich habe meine auf 3000 geändert, um den Fehler zu beheben:

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

2. Ich musste den richtigen Arbeitsbereich-Ordner festlegen .

3. Ich musste meine Web-App npm startvor dem Debuggen starten .

Das Problem trat auch nach dem Umbenennen des Projektordners auf und es stellte sich heraus, dass die Eigenschaft "webRoot" auf "$ {workspaceFolder} / src" anstelle von "$ {workspaceFolder}" zeigte. Möglicherweise war dies Teil eines Updates für die Erweiterung "Debugger for Chrome", aber da ich kein Update erhalten habe, kann ich dies nicht überprüfen.

Das Aktualisieren von "webRoot", das Neustarten der ng serveSitzung und das Starten einer neuen Debug-Sitzung haben den Trick getan. Hoffe, dies wird jemandem mit einem ähnlichen Szenario helfen.

Ich musste meinen .vscode-Ordner löschen und neu generieren. und auch der Ordner zeigte auf den falschen Pfad Ich musste ihn wieder in meinen aktuellen Projektordnerpfad ändern. Vielen Dank

In unserem Fall war dieser Fehler auf einen Windows-Symlink zurückzuführen, bei dem der Quellcodeordner auf zwei lokalen Laufwerken verfügbar war. Öffnete den Ordner mit vscode aus dem ursprünglichen Ordner, jetzt funktioniert das Debuggen gut.

Ich bin hierher gekommen, während ich mit Flattern und Dart gearbeitet habe. Ich weiß es nicht, aber das Löschen launch.jsonim .vscodeOrdner hat mein Problem behoben

Für mich wurde der nicht überprüfte Haltepunkt verursacht, weil der Debugger ausgeführt wurde, als ich versuchte, den Haltepunkt festzulegen. Um das Problem zu lösen, habe ich einfach den Debugger ausgeschaltet, den Haltepunkt wie gewohnt festgelegt und den Debugger neu gestartet.

Wenn Sie die Codeaufteilung über das Webpack verwenden, wird Ihr Haltepunkt erst dann "überprüft", wenn Chrome dieses Modul lädt (dh normalerweise, wenn Sie zu diesem Teil Ihrer Anwendung navigieren).

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

Für mich waren meine Haltepunkte ausgeschaltet:

Die Lösung ist einfach:

1. Klicken Sie auf Datei-> Ordner öffnen-> (wählen Sie den Ordner Ihres Projekts aus - Ordner, der package.json enthält )
2. Öffnen Sie debug-> drücken Sie die Wiedergabetaste, um eine neue Chrome-Konfiguration zu erstellen.
3. Setze einen neuen Haltepunkt!
4. Genießen!

Wenn alles richtig eingerichtet aussieht, der Haltepunkt aber immer noch nicht erreicht wird, musste ich den genauen Dateinamen angeben, der bereitgestellt werden soll. Bei NodeJS beispielsweise würde die bloße Angabe von Express localhost:3000nicht an meinen Haltepunkten anhalten, aber die Angabe localhost:3000/index.htmlfunktionierte wie erwartet

Vollständige Konfiguration:

Mein Ordner in VSCode geöffnet: learningPiximit vollständigem Ordnerverzeichnis (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 Datei launch.json:

{  
  "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, sonst tritt der Debugger in jeden Funktionsaufruf ein

Meine (sehr einfache) 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'));

Stellen Sie gemäß der obigen Ordnerstruktur sicher, dass sich index.html im Ordner / public befindet

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

In meinem Fall hatte ich eine main.js-Datei im Projektstamm, die als Elektronen-App ausgeführt werden konnte. Wenn diese Datei main.js entfernt wurde, wurde das Problem behoben.

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

xdebug.remote_autostart = 1

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

Hoffe, das rettet jemandem den Tag.

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

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

Lösung: Bewegen Sie es in den Funktionskörper

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

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

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

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.

Ich hatte im VS-Code meinen App- Ordner geöffnet, in dem sich der Client- Ordner und der Server- Ordner befanden. Ich musste dies in launch.json ä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 in den Browser geladen haben, hat VS-Code keinen Zugriff auf die Quellzuordnungen, um die Haltepunkte zu überprüfen!

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