wake-up-neo.net

"Unverifizierter 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 "Unverified breakpoint" an meinem Haltepunkt und die Ausführung stoppt nicht an meinem Haltepunkt.

Hier ist meine launch.json-Datei:

{
    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

Ich habe gelesen, dass, wenn Sie eine Chrome-Version unter 59.x haben, diese Fehlermeldung angezeigt wird. Wenn ich Chrome öffne und zu Settings > Help navigiere, kann ich sehen, dass meine Chrome-Version 67.0.3396.99 ist. Wenn ich in Visual Studio-Code zu Help > About navigiere, wird die Version für Chrome als 58.0.3029.110 angezeigt.

Nicht sicher, ob dies zusammenhängt, aber wie aktualisiere ich meine in Visual Studio-Code angezeigte Chrome-Version, um die richtige Chrome-Version anzuzeigen?

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

17
monstertjie_za

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 Weg in Windows zu meinem Projekt war wie folgt: C:\Users\myusername\Documents\VSCode\Source\ProjectName

Durch Visual Studio Code hatte ich den Source-Ordner geöffnet und musste immer einen Befehl zum Ändern des Verzeichnisses (cd ProjectName) in Integrated Terminal in 'ProjectName' ausführen. Dies führt dazu, dass der .vscode folder and launch.json file im Source-Ordner erstellt wird und nicht der ProjectName-Ordner. 

Der obige Fehler führte dazu, dass der ${workspaceFolder} auf den Ordner Source zeigte, in dem sich keine Angular-Komponenten befanden, statt auf den Ordner ProjectName.

Die Reparatur:

Öffnen Sie in Visual Studio Code den Ordner C:\Users\myusername\Documents\VSCode\Source\ProjectName und richten Sie meinen launch.json in diesem Verzeichnis ein.

26
monstertjie_za

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}/*"
    }
  }]
}
25
Robin Webb

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.

9
Michael Walsh

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.

4
CodeChimp
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.

2
Super Jade

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.

2
Matt

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

1
Divakar Luffy

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.

1
dotNET

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.

1
Stig Perez

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

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!

0
Tom

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.

0
Anders Jalming

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

Null/

 enter image description here

Dann launch.json

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

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

0
Jason Dufair

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!
0
nucknine

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

0
WDuffy

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.

0
LeoSaravia

Für mich wurden meine Haltepunkte deaktiviert:

 enter image description here

0
RayLoveless

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.

0
Andreas Valen

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

0
Leigh Mathieson

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.

0
Liam Kernighan