Ja, Sie k?nnen Webseiten in Chrome direkt von VSCODE debuggen. Sie müssen den Debugger für die Chrome -Erweiterung installieren und Start.json konfigurieren. 1. Installieren Sie die Erweiterung "Debugger for Chrome" in VSCODE; 2. Stellen Sie sicher, dass das Projekt Quellkarten generiert (z. B. WebPack -Sets DevTool und Typscript Ens Sourcemap). 3. Erstellen Sie eine Konfigurationsdatei für start.json in VSCODE und geben Sie Chrome -Startparameter wie URL und Webroot an. 4. Führen Sie die Konfiguration nach dem Start des lokalen Entwicklungsservers über das Run- und Debug -Panel aus. Chrome ?ffnet sich und schl?gt den in VSCODE festgelegten Haltepunkt, um den vollst?ndigen Debugging -Prozess zu erreichen.

Das Debuggen einer Webseite in Chrome direkt von VSCODE ist mit dem Debugger für die Chrome -Erweiterung und die richtige Startkonfiguration m?glich. Mit diesem Setup k?nnen Sie Breakpoints in Ihrem JavaScript/TypeScript -Code in VSCODE festlegen, und lassen Sie sie klicken, wenn der Code in Chrome ausgeführt wird - alles ohne Ihren Editor zu verlassen.

Hier erfahren Sie, wie Sie es einrichten:

1. Installieren Sie die erforderliche Erweiterung

Installieren Sie zun?chst die Erweiterung "Debugger for Chrome" in VSCODE:

• ?ffnen Sie VSCODE.
• Gehen Sie zur Erweiterungsansicht ( Ctrl Shift X oder Cmd Shift X auf dem Mac).
• Suchen Sie nach "Debugger für Chrome" (von Microsoft).
• Installieren Sie es.

HINWEIS: Diese Erweiterung startet Chrome oder wird an eine vorhandene Instanz angeschlossen und erm?glicht das Debuggen von VSCODE.

2. Aktivieren Sie Quellkarten in Ihrem Projekt

Damit das Debugging ordnungsgem?? funktioniert (insbesondere mit Frameworks, TypeScript oder übersetzten Code), ben?tigen Sie Quellkarten , damit die Haltepunkte in Ihren ursprünglichen Quelldateien korrekt in den im Browser ausgeführten Code geordnet sind.

Stellen Sie sicher, dass Ihr Build -Tool (Webpack, vite usw.) Quellkarten generiert:

• Webpack : Setzen Sie devtool: 'source-map' oder 'eval-source-map' in webpack.config.js .
• VITE : Quellkarten sind standardm??ig im Dev -Modus aktiviert.
• TypeScript : Stellen Sie in tsconfig.json sicher:

   {
    "Compileroptions": {{
      "Sourcemap": Richtig,
      "Outdir": "./Dist"
    }
  }

3. Konfigurieren Sie launch.json in VSCODE

Erstellen Sie eine Debug -Konfiguration, mit der VSCODE angekündigt wird, wie Chrome- und Kartendateien starten.

• Gehen Sie in VSCODE zum Lauf- und Debug -Blick ( Ctrl Shift D ).
• Klicken Sie auf "Erstellen Sie eine Datei sterp.json", wenn Sie keine haben.
• W?hlen Sie "Chrom" als Umwelt.
• Ersetzen Sie den Inhalt durch eine funktionierende Konfiguration. Hier ist ein h?ufiges Beispiel:

 {
  "Version": "0.2.0",
  "Konfigurationen": [
    {
      "Name": "Starten Sie Chrome gegen Localhost",
      "Typ": "Chrome",
      "Anfrage": "Start",
      "URL": "http: // localhost: 3000",
      "Webroot": "$ {WorkspaceFolder}", "
      "Sourcemappathoverrides": {
        "Webpack: ///./.*": "$ {webroot}/*",
        "Webpack: ///*": "*",
        "Webpack: /// src/*": "$ {webroot}/src/*"
      }
    }
  ]
}

Schlüsseloptionen erkl?rt:

• "url" : Die Adresse Ihres laufenden Dev -Servers (z. http://localhost:3000 ).
• "webRoot" : ordnet die Quelldateien in Chrome in Ihren lokalen Projektordner ab.
• "sourceMapPathOverrides" : Hilft VSCODE dabei, Ihre ursprünglichen Quelldateien bei der Verwendung von Bundler wie WebPack zu finden.

?? Stellen Sie sicher, dass Ihr Dev -Server (z. B. npm start , vite , webpack serve ) bereits ausgeführt wird, bevor Sie die Debug -Sitzung starten.

4. Starten Sie das Debuggen

1. Starten Sie Ihren Entwicklungsserver (z. B. npm run start ).
2. In VSCODE gehen Sie zum Run and Debug -Panel.
3. W?hlen Sie die Konfiguration "Chrome gegen Localhost" aus.
4. Klicken Sie auf Ausführen (F5).

Chrome ?ffnet (oder wiederverwendet eine Instanz, je nach Einstellungen), und Ihre App wird geladen.

Jetzt:

• Stellen Sie die Haltepunkte in Ihren .js , .ts oder .tsx -Dateien in VSCODE fest.
• Wenn der Code in Chrome ausgeführt wird, wird die Ausführung an diesen Haltepunkten pausieren.
• Sie k?nnen Variablen inspizieren, Stapel aufrufen und Code durchführen - alles in VSCODE.

Tipps und Fehlerbehebung

• Haltepunkte nicht schlagen?

  • Double-Check-Quellkarte Generierung.
  • überprüfen Sie die Dateipfade in sourceMapPathOverrides .
  • Versuchen Sie "trace": true in launch.json zu verwenden, um Mapping -Protokolle anzuzeigen.

• Verwenden Sie "request": "attach" , um eine Verbindung zu einem bereits ge?ffneten Chrome herzustellen

  • Starten Sie Chrome mit fertigem Debugging -Debugging:

     Chrom-Remote-Debugging-Port = 9222

  • Verwenden Sie diese launch.json -Konfiguration:

     {
      "Name": "An Chrom anh?ngen",
      "Typ": "Chrome",
      "Anfrage": "Anhang",
      "Port": 9222,
      "Webroot": "$ {WorkspaceFolder}"
    }

• Funktioniert am besten mit einfachen Einstellungen oder erstellen Sie React App, vite, Winkel -CLI . Komplexe Bundler -Konfigurationen müssen m?glicherweise benutzerdefinierte Pfadüberschreibungen ben?tigen.

---

Grunds?tzlich ist es eine Kombination aus der richtigen Erweiterung, Quellkarten und einem soliden launch.json . Nach der Einrichtung fühlt sich der Frontend -Code von VSCODE nahtlos an.

Das obige ist der detaillierte Inhalt vonSo debuggen Sie eine Webseite in Chrome von VSCODE aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!