Wie debugge ich JavaScript in Google Chrome über VSCode?
Oct 16, 2025 pm 12:29 PM
Antwort: Durch die Installation der Debugger for Chrome-Erweiterung und die Konfiguration von launch.json k?nnen Sie das in Chrome ausgeführte Front-End-JavaScript direkt in VSCode debuggen. Zu den spezifischen Schritten geh?ren: Installieren der Erweiterung, Erstellen einer launch.json-Datei mit der richtigen URL und webRoot, Starten des lokalen Servers und Drücken von F5 zum Starten des Debuggens sowie Sicherstellen, dass sich sourceMapPathOverrides an die Projektstruktur anpasst, um das Breakpoint-Debugging zu unterstützen.
Um JavaScript in Google Chrome direkt von VSCode aus zu debuggen, k?nnen Sie die Debugger for Chrome -Erweiterung zusammen mit der richtigen Startkonfiguration verwenden. Auf diese Weise k?nnen Sie Haltepunkte festlegen, Variablen überprüfen und den Code in Ihrem Frontend-JavaScript schrittweise durchlaufen, w?hrend er in Chrome ausgeführt wird – alles gesteuert von VSCode aus.
Installieren Sie die erforderliche Erweiterung
?ffnen Sie VSCode und wechseln Sie zur Ansicht ?Erweiterungen“, indem Sie in der Aktivit?tsleiste auf das Symbol ?Erweiterungen“ klicken oder Strg Umschalt X drücken. Suchen nach:
- Debugger für Chrome von Microsoft
Installieren Sie es. Diese Erweiterung erm?glicht es VSCode, zu Debugging-Zwecken mit einer Chrome-Instanz zu kommunizieren.
Erstellen Sie eine Startkonfiguration
Richten Sie ein, wie VSCode Chrome starten und den Debugger anh?ngen soll:
- ?ffnen Sie in VSCode die Ansicht ?Ausführen und Debuggen“: Klicken Sie in der Aktivit?tsleiste auf das Symbol ?Ausführen“ oder drücken Sie Strg Umschalt D .
- Klicken Sie auf ?Launch.json-Datei erstellen“ , falls Sie noch keine haben, und w?hlen Sie dann Chrome als Umgebung aus.
- VSCode generiert eine launch.json- Datei in einem .vscode- Ordner in Ihrem Projektstammverzeichnis.
Beispielkonfiguration für launch.json :
{ "version": "0.2.0", "configurations": [ { "name": "Chrome gegen localhost starten", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}", "sourceMapPathOverrides": { "webpack:///./.*": "${webRoot}/*", "webpack:///src/*": "${webRoot}/*", "webpack:///*": "*", " webpack:///./": "${webRoot}/" } } ] }Passen Sie die URL so an, dass sie mit der lokalen Serveradresse Ihrer App übereinstimmt (z. B. http://localhost:8080 ).
Beginnen Sie mit dem Debuggen
Stellen Sie sicher, dass Ihr Webserver l?uft (z. B. npm start , vue dev server usw.). Dann:
- Gehen Sie in VSCode zur Ausführungsansicht.
- W?hlen Sie die Konfiguration ?Chrome gegen Localhost starten“ aus.
- Drücken Sie F5 oder klicken Sie auf die Schaltfl?che Debuggen starten.
Chrome ?ffnet ein neues Fenster, das mit dem Debugger verbunden ist. Legen Sie Haltepunkte in Ihren JavaScript-Dateien in VSCode fest – sie werden erreicht, wenn der Code ausgeführt wird.
überprüfen Sie Quellkarten und Pfade
Wenn keine Haltepunkte erreicht werden, stellen Sie sicher, dass:
- Ihr Entwicklungsserver generiert Quellkarten (die meisten tun dies standardm??ig im Entwicklungsmodus).
- Der webRoot in launch.json verweist auf den richtigen Ordner, der Ihre Quelldateien enth?lt.
- Sie verwenden die richtigen sourceMapPathOverrides , wenn Ihre App Bundler wie Webpack verwendet.
Für Create React App, Vue CLI oder ?hnliche Tools funktioniert die obige Beispielkonfiguration normalerweise unver?ndert.
Im Grunde brauchen Sie nur die Debugger-Erweiterung zu installieren, launch.json zu konfigurieren, Ihren Server auszuführen und F5 zu drücken. Sie werden in kürzester Zeit clientseitiges JavaScript von VSCode aus debuggen.
Das obige ist der detaillierte Inhalt vonWie debugge ich JavaScript in Google Chrome über VSCode?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Stock Market GPT
KI-gestützte Anlageforschung für intelligentere Entscheidungen
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
So verwenden Sie den tragbaren Modus von VSCODE
Sep 20, 2025 am 02:54 AM
Der tragbare Modus von VSCODE erm?glicht das Ausführen des USB -Laufwerks oder eines beliebigen Ordners ohne Installation. Alle Daten werden in lokalen Ordnern gespeichert. 1. Laden Sie die ZIP -Version herunter und dekomprimieren Sie sie an den Zielort. 2. Erstellen Sie einen Ordner mit dem Namen Daten im selben Verzeichnis wie die ausführbare Datei. 3. Nachdem VSCODE den Datenordner erkannt hat, erm?glicht er automatisch den tragbaren Modus und speichert Einstellungen, Erweiterungen, Caches usw.; V.
So debuggen Sie Node.js -Anwendungen in vs Code
Sep 20, 2025 am 04:04 AM
Konfigurieren Sie die Datei start.json, um die Debugging -Umgebung einzurichten, um sicherzustellen, dass das Programmfeld in der Haupteingangsdatei richtet. 2. Verwenden Sie den Startmodus, um das Skript direkt zu starten und in Args- und Env -Parametern zu übergeben. 3.. Verwenden Sie den Anhang-Modus, um eine Verbindung zu laufenden Prozessen herzustellen, die über den Knoten gestartet wurden. 4. Setzen Sie beim Debuggen von NPM -Skripten RunTimeExexexable auf NPM und aktivieren Sie integrierte Terminal; 5. Verbesserung der Debugging -Effizienz durch Einstellen von Haltepunkten, bedingten Haltepunkten, variabler überprüfung, Expressionsbewertung und Aktivierung von Autoattach; 6. Wenn Sie auf Probleme sto?en, überprüfen Sie den Pfad, den Startparameter, die Portanpassung, die Sourcemaps -Konfiguration und starten Sie das Debugging neu
So verwalten Sie mehrere Projekte im VS -Code
Sep 21, 2025 am 01:30 AM
Usemulti-rootWorksPacestogroUratedProjectsByAddingFoldersandSavaSa.Code-ArbeitenspaceFileForSharedSetings.2.openunrelatedProjectSinSesparatevScodewindowsAnswitchusecmd oralttoisolateContext.3.installTallTallTallTallTallTallTallTalltHepropropropropropropropropropropropropropropropropropropropectoMectrepropropropropropropectoMectreproprojanupexteextextext, a aa.
Wie konfigurieren Sie Intellisense in VSCODE?
Sep 21, 2025 am 05:49 AM
IntelliSenseSenableDByDefaultInvScodeforluages ??-?hnlichjavaScript, Typscript, Python, Andhtml, Bereitstellung von COMETECOPRETION, Parameterinfo, QuickInfo und Memberlistasyoutype.2
So verwenden Sie Git -Zweige in VSCODE
Sep 19, 2025 am 03:29 AM
VScodeAllowseasygitbranchManagementDirectlyWitHinTheEeditor.youcanviewandSwitchBranchesByclickingTheBanBanNameInhebottom-linftcornerandSelecting "CheedoutTo", ChooseArbranchfromthelist und VscodeinstantorteupdataTheworkspaceSpace.tokreat.Tocreat
VSCODE DOCKER -Erweiterungs -Tutorial
Sep 21, 2025 am 04:08 AM
Suchen Sie nach der Installation der VSCodedocker -Erweiterung die von Microsoft ver?ffentlichte Docker -Erweiterung, indem Sie auf das Erweiterungssymbol klicken. Nach Abschluss der Installation erscheint das Wal -Symbol in der linken Aktivit?tsleiste. 2. Stellen Sie sicher, dass DockerDesktop oder DockerEngine installiert und lokal ausgeführt werden, und überprüfen Sie, ob die Umgebung durch Ausführung von Docker-Version und Dockerps bereit ist. 3.. Verwenden Sie das Docker-Panel, um Container, Spiegel und andere Ressourcen anzuzeigen, und Sie k?nnen starten und stoppen, Protokolle anzeigen, das Terminal- und andere Vorg?nge über das Rechtsklickmenü eingeben. V.
So stellen Sie den VS -Code mit einem Remote -Server an
Sep 22, 2025 am 03:15 AM
Installieren Sie die Remote-SSH-Erweiterung; 2. Verwenden Sie STRG Shift P, um Remote-SSH einzugeben. 3. Speichern Sie die Konfiguration in der SSH -Konfigurationsdatei zur Wiederverwendung. 4. Melden Sie sich mit Passwort oder SSH -Schlüsselauthentifizierung an. 5. ?ffnen Sie den Remote -Ordner nach der Verbindung und bearbeiten Sie ihn. Alle Vorg?nge werden remote ausgeführt. Nach Abschluss der Einstellung kann VSCODE als Remote -IDE mit vollst?ndigen Funktionen verwendet werden.
VS -Code -Transformation in Gro?buchstaben
Sep 18, 2025 am 05:03 AM
In VSCODE ist die Verknüpfung zum Umwandeln von Text in Gro?buchstaben integrierte Verknüpfungen. STRG SHIFT U ON WEWNE/Linux, CMD -Verschiebung u auf macOS. Drücken Sie nach der Auswahl des Zieltextes die entsprechende Abkürzungstaste, um in Gro?buchstaben umzuwandeln. Dieser Vorgang wirkt sich nicht auf den Inhalt der Zwischenablage aus und kann den Fall entsprechend dem aktuellen Status des Textes wechseln. Gemeinsame Szenarien umfassen einheitliche Variable -Benennung, Verarbeitung von CSV -Daten, Bearbeiten von Konfigurationsdateien, für die Gro?buchstaben usw. erforderlich sind. Wenn die Tasteverknüpfungsschlüssel ungültig ist, sollten das Tastaturlayout, die Plug-in-Konflikte oder der Editor-Fokus-Probleme überprüft werden und k?nnen über das Befehlsfeld oder benutzerdefinierte Verknüpfungsschlüssel gel?st werden. Darüber hinaus unterstützt VSCODE auch Kleinbuchstaben (Strg/CMD -Verschiebung L) und andere Funktionen, die notwendig sind
