Wie debuggen Sie Karma-Tests in visuellem Studio-Code?

Sie können Karma debuggen, indem Sie den Debugger an eine Chrome-Instanz anhängen. Sie möchten Ihre launch.json config so einstellen:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach Karma Chrome",
            "address": "localhost",
            "port": 9333,
            "pathMapping": {
                "/": "${workspaceRoot}/",
                "/base/": "${workspaceRoot}/"
            }
        }
    ]
}

Sie müssen jedoch auch Ihren karma.conf.js config anpassen, sodass die Chrome-Instanz mit dev-Tools gestartet wird, die den 9333-Port abhören.

browsers: [
  'ChromeDebugging'
],

customLaunchers: {
  ChromeDebugging: {
    base: 'Chrome',
    flags: [ '--remote-debugging-port=9333' ]
  }
},

Mit einem solchen Setup können Sie einfach Ihren Karma-Server (mit dem erfassten Browser) ausführen und dann das Debuggen in Visual Studio beginnen.

Wenn Sie mehr Details erfahren möchten, habe ich ein Tutorial zum Debugging von Karma mit Visual Studio Code gemacht.

Verwenden von Angular CLI 1.7.4: Mit den folgenden Schritten konnte ich eine Hallo World Angular-Anwendung mit Visual Studio Code debuggen:

1. Generieren Sie ein neues HelloWorld-Projekt:

   ng new HelloWorld

2. Öffnen Sie das Projekt in Visual Studio Code

   code HelloWorld

3. Erstellen Sie eine neue Debug-Konfiguration:

      

4. Eine .vscode/launch.json-Datei wird generiert und geöffnet. Ersetzen Sie den Inhalt durch Folgendes:

{
    // 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": "Karma Tests",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "url": "http://localhost:9876/debug.html",
            // "runtimeArgs": [
            //     "--headless"
            // ],
            "pathMapping": {
                "/": "${workspaceRoot}",
                "/base/": "${workspaceRoot}/"
            },
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///*": "*",
                "webpack:///./~/*": "${webRoot}/node_modules/*",
                "meteor://????app/*": "${webRoot}/*"
            }
        }
    ]
}

5. Öffnen Sie karma.conf.js und führen Sie die folgende Änderung durch:

    

6. Öffne ein Terminal und starte Karma-Tests:

   ng test

7. Öffne app.component.spec.ts und setze einen Haltepunkt:

    

8. Wählen Sie im Debug-Menü "Karma-Tests" aus:

    

9. Drücken Sie F5, um mit dem Debuggen zu beginnen. VSCode sollte am Haltepunkt anhalten:

    

Hier ist eine einfachere Konfiguration (in launch.json):

{
    "type": "chrome",
    "request": "launch",
    "name": "Test",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}/Test",
    "url": "http://localhost:9876/debug.html",
    "runtimeArgs": [
        "--headless"
    ]
}

Wichtig:

• Ändern Sie webRoot in den Ordner, von dem aus Karma Ihre Tests bereitstellt.
• Dies setzt voraus, dass Karma auf Port 9876 ausgeführt wird. Wenn dies nicht der Fall ist, ändern Sie url entsprechend.

Diese Konfiguration ist aus mehreren Gründen einfacher:

• Sie müssen nicht daran denken, in der Benutzeroberfläche von Karma auf die Schaltfläche Debuggen zu klicken oder die Seite nach dem Anhängen des Debuggers zu aktualisieren.
• Sie müssen der Karma-Konfiguration kein benutzerdefiniertes Startprogramm hinzufügen. Sie müssen nur sicherstellen, dass Sie singleRun: false haben. Sie können sogar browsers: [] einstellen, da VS Code einen eigenen Browser startet (im Headless-Modus, damit Sie ihn nicht sehen können).
• Ich arbeite im Headless-Modus, weil Sie den Browser nicht mehr sehen müssen, da Sie das Debuggen in VS-Code durchführen können.
• Beachten Sie, dass Sie Karma noch starten müssen, bevor Sie den Debugger starten. Sie können diese Konfiguration verbessern, indem Sie ein preLaunchTask hinzufügen, das Karma automatisch startet. Sie müssen es als Hintergrundaufgabe konfigurieren.

Für alle, die hier nach angular Debugging-Karma-Tests suchen - siehe vscode-Rezept von Microsoft.

Ich folgte @Awsed ausgezeichneter Erklärung [Danke!] Und konnte mit ein paar bemerkenswerten Vorschlägen die Dinge zum Laufen bringen:

In VSCode scheint ein Fehler aufgetreten zu sein, der Probleme hat, die Haltepunktzeilen in Spezifikationsdateien zu verfolgen. Ich habe meinen Haltepunkt auch nach dem korrekten Setup nicht erreicht, da VSCode verwirrt zu sein scheint, in welcher Zeile sich der Haltepunkt befindet, insbesondere wenn Sie Code ändern. Ich konnte keine Abhilfe dafür finden (auch nach zwei Neustarts und mehrmaligem Neustart von VSCode). Ich konnte das nur entdecken, indem ich zu einer Testdatei ging, die seit einiger Zeit nicht mehr geändert wurde und einen Haltepunkt erfolgreich erreichen konnte. Dann habe ich den Haltepunkt an verschiedene Stellen auf der Seite der Datei verschoben, mit der ich Probleme hatte, und konnte einen Ort finden, an dem er (endlich) den Haltepunkt erreichen würde.

Außerdem empfehle ich nicht, Chrome headless auszuführen, da die Schaltfläche "Stop" den Prozess nicht beendet und Sie ihn nicht im Task-Manager finden können, da er kopflos ist. Sie müssen stattdessen einen Befehl verwenden, um ihn zu beenden (zB https://superuser.com/questions/1288388/how-can-i-kill-all-headless-chrome-instances-von-the-command-line-on-windows ); Wenn Sie dies nicht tun, können Sie es nicht erneut ausführen.