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

76

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?

monstertjie_za
quelle

Antworten:

55

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.

monstertjie_za
quelle
24
Ich lese das und verstehe nicht, was die Lösung ist;) .... Wie setze ich $ {workspaceFolder}?
PK
8
Einfacher ausgedrückt, öffnen Sie in Visual Studio Code den Ordner, der package.json enthält.
Phillip Ngan
Wie liest du die Definition von ${workspaceFolder}? (Mit anderen Worten, wie kann man den Wert dieser Variablen in VS Code überprüfen?)
Matt
2
Ich stellte es als separate Frage und bekam die Antwort . Für den Fall, dass jemand diese Informationen ebenfalls benötigt.
Matt
Für Leute, die über die Suche hierher kommen, und das ist nicht die Antwort. Sie erhalten auch einen nicht überprüften Haltepunkt, wenn die Datei, die Sie debuggen möchten, Änderungen enthält, die nicht gespeichert sind.
Jason Woods
29

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}/*"
    }
  }]
}
Robin Webb
quelle
Dies hat bei mir funktioniert, wenn ich die Chrome-Debugging-Sitzung zum ersten Mal starte, die Haltepunkte jedoch nicht geändert werden.
Shamshiel
VIELEN DANK! Ich hatte dieses Problem noch nie zuvor, aber plötzlich war ich nicht mehr in der Lage, ein neu generiertes Angular 8-Projekt zu debuggen. Dies hat es behoben.
IRCraziestTaxi
13

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.

Michael Walsh
quelle
Meins war noch einfacher: Ich hatte einen zusätzlichen Schrägstrich nach "workspaceFolder" "webRoot": "$ {
workspaceFolder
10

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.

CodeChimp
quelle
1
Das Hinzufügen eines Webpack-Attributs sollte funktionieren, aber ich musste den Pfad finden, indem ich den Befehl: .scripts in der Debug-Konsole von VSCODE ausführte, während die App gestartet / ausgeführt wurde
AbhishekS
10

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.

Matt
quelle
diese Arbeit für mich, danke:{ "name": "Chrome", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}/src", }
Tag
5

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

Null/

Geben Sie hier die Bildbeschreibung ein

Dann starte.json

  "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}/angular"
        }
    ]
Sampath
quelle
3
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}"
    }
  ]
  1. Ich musste den richtigen Arbeitsbereich-Ordner festlegen .

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

Super Jade
quelle
1
Der letzte "npm start" vor dem Debuggen hat mir geholfen.
himanshupareek66
2

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.

Stig Perez
quelle
2

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

Divakar Ruffy
quelle
2

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.

Ajayel
quelle
2

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

Pallav Bohara
quelle
2

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.

Tlarson
quelle
1

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).

Jason Dufair
quelle
1

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.

Liam Kernighan
quelle
1

Für mich waren meine Haltepunkte ausgeschaltet:

Geben Sie hier die Bildbeschreibung ein

RayLoveless
quelle
1

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!
Nucknine
quelle
1

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

Leigh Mathieson
quelle
1

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.

Anders Jalming
quelle
1

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.

Punkt net
quelle
0

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;
}
Mauricio Gracia Gutierrez
quelle
0

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

WDuffy
quelle
0

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.

Andreas Valen
quelle
0

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.

LeoSaravia
quelle
0

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"
JanBrus
quelle
0

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!

Tom
quelle
Das gilt auch für meinen Fall. Ich setze Haltepunkte in Dateien, die nach index.js aufgerufen werden. Dies ist meine js-Eintragsdatei, und sie werden nie getroffen. Aber ich setze zuerst Haltepunkte bei Funktionen in index.js und es stoppt definitiv dort, dann setze ich Haltepunkte für andere Dateien, sie stoppen ebenfalls und scheinen wie activatednach index.js.
Yao Li
Solange Sie die Route auslösen, die das Modul mit den zugehörigen Haltepunkten in vscode in den Browser lädt, sollte es funktionieren
Tom