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?
quelle
${workspaceFolder}
? (Mit anderen Worten, wie kann man den Wert dieser Variablen in VS Code überprüfen?)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 den
sourceMapPathOverrides
"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
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}/*" } }] }
quelle
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:
Es wird kein Ordner in Ihrem Arbeitsbereich mit dem Namen abgeglichen:
Ich hoffe das hilft jemandem da draußen.
quelle
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
.quelle
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:
Öffnen Sie ein Konsolenfenster und
cd
den Projektordner.Beispiel:
cd myProject
code .
.vscode
Ordner konfigurieren .Der richtige
.vscode
Ordner ist ein Unterverzeichnis Ihres Projektordners.Hinweis: Wenn Sie VS-Code bereits fälschlicherweise in einer zu tiefen Unterordnerebene geöffnet haben, z. B. im
src
Ordner, finden Sie.vscode
dort (wie in meinem Fall) einen Ordner mit Konfigurationsdateien, die für das Debuggen unbrauchbar sind.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 meinem Fall war der Port
4200
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
projectsubfolder
durch 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 ).Legen Sie nun die Haltepunkte in Ihrer Anwendung fest.
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 install
jedes Mal ausgeführt werden, nur wenn sich Pakete / Abhängigkeiten geändert haben. In den meisten Fällen reicht die Ausführung ausng serve
, um den Code neu zu kompilieren und auszuführen.quelle
{ "name": "Chrome", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}/src", }
Ich habe eine Ordnerstruktur wie unten gezeigt und ich habe das
zero
Projekt 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" } ]
quelle
Ich habe 3 Ursachen für dieses Problem gefunden:
launch.json
automatisch 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}" } ]
Ich musste den richtigen Arbeitsbereich-Ordner festlegen .
Ich musste meine Web-App
npm start
vor dem Debuggen starten .quelle
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 serve
Sitzung und das Starten einer neuen Debug-Sitzung haben den Trick getan. Hoffe, dies wird jemandem mit einem ähnlichen Szenario helfen.quelle
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
quelle
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.
quelle
Ich bin hierher gekommen, während ich mit Flattern und Dart gearbeitet habe. Ich weiß es nicht, aber das Löschen
launch.json
im.vscode
Ordner hat mein Problem behobenquelle
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.
quelle
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).
quelle
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.
quelle
Für mich waren meine Haltepunkte ausgeschaltet:
quelle
Die Lösung ist einfach:
quelle
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:3000
nicht an meinen Haltepunkten anhalten, aber die Angabelocalhost:3000/index.html
funktionierte wie erwartetVollständige Konfiguration:
Mein Ordner in VSCode geöffnet:
learningPixi
mit 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
quelle
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.
quelle
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.
quelle
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; }
quelle
Ich habe diesen Fehler nur erhalten, weil ich ihn nicht
"sourceMaps": true
in meiner Debug-Konfiguration hatte.quelle
npm i
habe 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.quelle
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.
quelle
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"
quelle
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!
quelle
activated
nach index.js.