web-dev-qa-db-fra.com

Comment déboguer des tests de karma dans Visual Studio Code?

Bonjour, je veux déboguer des tests de karma en code vs mais je n'ai pas trouvé de solution. Existe-t-il un moyen de le faire ou dois-je utiliser un autre IDE (WebStorm)?

visual-studiokarma-runnervisual-studio-code
15
geo

Essayer

{
    "name": "jasmine",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/node_modules/jasmine/bin/jasmine.js",
    "stopOnEntry": false,
    "args": [
        "JASMINE_CONFIG_PATH=${workspaceRoot}/spec/support/jasmine.json"
    ],
    "cwd": "${workspaceRoot}",
    "runtimeArgs": [
        "--nolazy"
    ],
    "env": {
        "NODE_ENV": "development"
    }
}
1
Ivan Boombastik

Vous pouvez déboguer Karma en associant le débogueur à une instance de Chrome. Vous voudriez définir votre config launch.json à quelque chose comme ceci:

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

Mais vous devez également ajuster votre karma.conf.js config pour qu'il lance une instance de Chrome avec les outils de développement écoutant le port 9333, comme suit:

browsers: [
  'ChromeDebugging'
],

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

Avec une telle configuration, vous pouvez simplement exécuter votre serveur karma (avec le navigateur capturé), puis lancer le débogage dans Visual Studio.

Si vous souhaitez trouver plus de détails, j'ai fait un tutoriel sur le débogage de Karma avec Visual Studio Code .

24
Marek Lewandowski

Utilisation de Angular CLI 1.7.4: Grâce aux étapes suivantes, j'ai pu déboguer une application Angular World de hello world avec Visual Studio Code:

  1. Générez un nouveau projet HelloWorld:

    ng new HelloWorld

  2. Ouvrez le projet dans Visual Studio Code

    code HelloWorld

  3. Créez une nouvelle configuration de débogage:

     enter image description here  enter image description here

  4. Un fichier .vscode/launch.json est généré et ouvert. Remplacez son contenu par le suivant:

{
    // 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}/*"
            }
        }
    ]
}

  1. Ouvrez karma.conf.js et effectuez les modifications suivantes:

     enter image description here

  2. Ouvrez un terminal et lancez les tests de karma:

    ng test

  3. Ouvrez app.component.spec.ts et définissez un point d'arrêt:

     enter image description here

  4. Sélectionnez "Tests Karma" dans le menu de débogage:

     enter image description here

  5. Appuyez sur F5 pour lancer le débogage. VSCode doit s'arrêter au point d'arrêt:

     enter image description here

9
Awsed

Voici une configuration plus simple (en launch.json):

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

Important:

  • Remplacez webRoot par le dossier où Karma sert vos tests.
  • Cela suppose que Karma est exécuté sur le port 9876. Si ce n'est pas le cas, modifiez la variable url en conséquence.

Cette configuration est plus simple pour plusieurs raisons:

  • Vous n'avez pas besoin de vous rappeler d'appuyer sur le bouton Déboguer dans l'interface utilisateur de Karma ou d'actualiser la page après avoir joint le débogueur.
  • Vous n'avez pas besoin d'ajouter un lanceur personnalisé à votre configuration Karma. Vous devez juste vous assurer que vous avez singleRun: false. Vous pouvez même définir browsers: [], puisque VS Code lancera son propre navigateur (en mode sans tête, vous ne le verrez donc pas).
  • Je cours en mode sans tête parce que vous n'avez plus besoin de voir le navigateur, car vous pouvez effectuer le débogage en code VS.
  • Notez que vous devez toujours démarrer Karma avant de lancer le débogueur. Vous pouvez améliorer cette configuration en ajoutant une preLaunchTask qui lance Karma automatiquement. Vous devrez le configurer en tant que tâche en arrière-plan .
4
AJ Richardson

J'ai suivi @Awsed excellente explication [Merci!] Et j'ai réussi à faire fonctionner les choses, avec quelques mises en garde notables:

Il semble y avoir un bogue dans VSCode qui pose des problèmes pour suivre les lignes des points d'arrêt dans les fichiers de spécifications. Je ne touchais pas mon point d'arrêt, même après la configuration correcte, car VSCode semble confus quant à la ligne sur laquelle le point d'arrêt est activé, en particulier si vous modifiez un code. Je ne pouvais trouver aucun remède à cela (même après deux redémarrages et le redémarrage de VSCode plusieurs fois). Je n'ai pu découvrir cela qu'en consultant un fichier de test qui n'avait pas été modifié depuis un moment et qui était parvenu à atteindre un point d'arrêt. Alors, j'ai déplacé le point d'arrêt à différents emplacements de la page du fichier avec lequel je rencontrais des problèmes et j'ai pu trouver un emplacement qui atteindrait (finalement) le point d'arrêt.

De plus, je ne recommande pas d'exécuter Chrome sans tête, car le bouton "Arrêter" ne tue pas le processus et vous ne le trouvez pas dans le gestionnaire de tâches, car il est sans tête - vous devez utiliser une commande pour le tuer (par exemple, https://superuser.com/questions/1288388/how-can-i-kill-all-head-chrome-instances-de-the-command-line-on-windows ); sinon, vous ne pourrez plus l'exécuter.

0
MapLion