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)?
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"
}
}
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 .
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:
Générez un nouveau projet HelloWorld:
ng new HelloWorld
Ouvrez le projet dans Visual Studio Code
code HelloWorld
Créez une nouvelle configuration de débogage:
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}/*"
}
}
]
}
Ouvrez karma.conf.js
et effectuez les modifications suivantes:
Ouvrez un terminal et lancez les tests de karma:
ng test
Ouvrez app.component.spec.ts
et définissez un point d'arrêt:
Sélectionnez "Tests Karma" dans le menu de débogage:
Appuyez sur F5
pour lancer le débogage. VSCode doit s'arrêter au point d'arrêt:
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:
webRoot
par le dossier où Karma sert vos tests.url
en conséquence.Cette configuration est plus simple pour plusieurs raisons:
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).preLaunchTask
qui lance Karma automatiquement. Vous devrez le configurer en tant que tâche en arrière-plan .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.