Comment déboguer Karma tests de Code de Visual Studio?

Vous pouvez déboguer Karma par attacher le débogueur à un Chrome instance. Vous souhaitez configurer votre launch.json config à 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 régler votre karma.conf.js config, de sorte qu'il lance Chrome exemple avec les outils de dev à l'écoute de 9333 port, comme suit:

browsers: [
  'ChromeDebugging'
],

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

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

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

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:

• Changement webRoot dans le dossier où le Karma est au service de vos tests.
• Cela suppose que le Karma est en cours d'exécution sur le port 9876. Si c'est pas le cas, modifiez le url en conséquence.

Cette configuration est plus simple pour un certain nombre de raisons:

• Vous n'avez pas besoin de vous souvenir de frapper le bouton de Débogage dans le Karma de l'INTERFACE utilisateur, ou d'actualiser la page après attacher le débogueur.
• Vous n'avez pas besoin d'ajouter un launcher pour votre Karma de configuration. Il vous suffit de vous assurer que vous avez singleRun: false. Vous pouvez même définir browsers: [], depuis VS Code lancer son propre navigateur (dans headless mode, donc vous ne le verrez pas).
• - Je exécuter dans headless mode parce que vous n'avez pas besoin de voir le plus de navigateur, puisque vous pouvez le faire le débogage dans VS code.
• Note que vous avez encore besoin de démarrer le Karma avant de lancer le débogueur. Vous pouvez améliorer cette configuration par l'ajout d'un preLaunchTask qui commence Karma automatiquement. Vous aurez besoin de le configurer comme un en tâche de fond.

J'ai suivi @Awsed excellente explication [Merci!] et a été en mesure d'obtenir les choses de travail, avec un couple de notables mises en garde:

Il semble y avoir un bug dans VSCode qui a du mal à suivre le point d'arrêt des lignes dans les fichiers de spec. Je n'étais pas frapper mon point d'arrêt, même après l'installation correcte parce que VSCode semble être confus au sujet de ce ligne le point d'arrêt est sur, surtout si vous modifiez le code. Je n'ai trouvé aucun remède pour cela (même après deux redémarrages et redémarrage VSCode plusieurs fois). Je n'ai pu découvrir en allant à un fichier de test qui n'avait pas été changé depuis un certain temps et a réussi à frapper un point d'arrêt. Alors j'ai déplacé le point d'arrêt de différents endroits dans la page sur le fichier, j'ai été d'avoir des problèmes avec, et a été en mesure de trouver un endroit où il serait (enfin) sur le point d'arrêt.

En outre, je ne vous recommandons pas d'utiliser Chrome sans tête, comme le bouton "arrêter" ne pas tuer le processus et vous ne pouvez pas le trouver dans le gestionnaire des tâches, car il est décapité -- vous devez utiliser une commande pour le tuer à la place (par exemple https://superuser.com/questions/1288388/how-can-i-kill-all-headless-chrome-instances-from-the-command-line-on-windows ); si vous ne le faites pas, vous ne serez pas en mesure de l'exécuter à nouveau.