Comment déboguer Angular avec VSCode?

127

Comment puis-je configurer Angular et VSCode pour que mes points d'arrêt fonctionnent?

angular debugging webpack visual-studio-code Asesjix
la source

Que voulez-vous dire? Comment ça ne marche pas?

TylerH

2

@TylerH, cela devrait être un guide de son fonctionnement. cela ne fonctionne pas sans launch.json modifié.

Asesjix

178

Testé avec Angular 5 / CLI 1.5.5

Installez l' extension Chrome Debugger
Créez le launch.json(dans le dossier .vscode)
Utilisez mon launch.json(voir ci-dessous)
Créez le tasks.json(dans le dossier .vscode)
Utilisez mon tasks.json(voir ci-dessous)
Appuyez sur CTRL+ SHIFT+B
presse F5

launch.json for angular/cli >= 1.3

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (Test)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (E2E)",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceFolder}/protractor.conf.js"]
    }
  ]
}

tasks.json for angular/cli >= 1.3

{
    "version": "2.0.0",
    "tasks": [
      {
        "identifier": "ng serve",
        "type": "npm",
        "script": "start",
        "problemMatcher": [],
        "group": {
          "kind": "build",
          "isDefault": true
        }
      },
      {
        "identifier": "ng test",
        "type": "npm",
        "script": "test",
        "problemMatcher": [],
        "group": {
          "kind": "test",
          "isDefault": true
        }
      }
    ]
  }

Testé avec Angular 2.4.8

Installez l' extension Chrome Debugger
Créer le launch.json
Utilisez mon launch.json(voir ci-dessous)
Démarrez le serveur de développement NG Live ( ng serve)
presse F5

launch.json for angular/cli >= 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

launch.json for angular/cli < 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Lunch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      },
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}

Asesjix
la source

7

savez-vous comment démarrer NG Live Development Serverpuis lancer Chromeen un seul F5clic?

Merdan Gochmuradov

2

désolé ce n'est pas possible car la tâche "ng serve" devrait être démarrée dans la preLaunchTask. "ng serve" doit être exécuté en permanence et donc la "preLaunchTask" n'est pas terminée, ce qui signifie que le code vs ne démarre pas le processus de débogage. mais j'ai ajouté une nouvelle configuration qui devrait rendre le travail un peu plus rapide ;-)

Asesjix

1

Réponse claire et courte. Ce serait bien si vous pouviez expliquer en bref sur launch.jsonet tasks.jsonfait ici. Comme je l'ai compris, il launch.jsonfaut lancer le serveur de nœud et écouter le port 8080, et tasks.jsondemander à utiliser npmet à exécuter la commande ng servepour exécuter l'application.

shaijut

@Zachscs quelle version angulaire avez-vous utilisée?

Asesjix

1

J'ai eu le même problème, les points d'arrêt n'étant pas définis, jusqu'à ce que finalement je réalise que ma racine Web était erronée. J'ai eu la valeur par défaut pour webRoot ("webRoot": "$ {workspaceFolder}") au lieu de $ {workspaceFolder} / my-app-folder

Joseph Simpson

48

Il semble que l'équipe VS Code stocke maintenant des recettes de débogage.

https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome with ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch Chrome with ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceRoot}/protractor.conf.js"]
    }      
  ]
}

Levi Fuller
la source

10

Il y a deux façons différentes de faire cela. Vous pouvez lancer un nouveau processus ou vous attacher à un processus existant.

Le point clé dans les deux processus est d'avoir le serveur de développement webpack et le débogueur VSCode en même temps .

Lancer un processus

Dans votre launch.jsonfichier, ajoutez la configuration suivante:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Angular debugging session",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Exécutez le serveur de développement Webpack depuis Angular CLI en exécutant npm start
Accédez au débogueur VSCode et exécutez la configuration "Session de débogage angulaire". En conséquence, une nouvelle fenêtre de navigateur avec votre application sera ouverte.

Joindre à un processus existant

Pour cela, vous devez exécuter Chrome en mode débogueur avec le port ouvert (dans mon cas, ce sera le cas 9222):

Mac:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Les fenêtres:

chrome.exe --remote-debugging-port=9222

launch.json Le fichier ressemblera à ceci:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome Attach",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}"
    } 
  ]
}

Exécutez le serveur de développement Webpack depuis Angular CLI en exécutant npm start
Sélectionnez la configuration "Chrome Attach" et exécutez-la.

Dans ce cas, le débogueur est associé au processus Chrome existant au lieu de lancer une nouvelle fenêtre.

J'ai écrit mon propre article, où j'ai décrit cette approche avec des illustrations.

Instruction simple comment configurer le débogueur pour Angular dans VSCode

skryvets
la source

Merci, chaque fois que je démarre le chrome, je dois exécuter cette commande. chrome.exe --remote-debugging-port=9222Y a-t-il une alternative pour la configuration

ponctuelle

En fonction de vos informations d'identification, vous pourrez peut-être faire un clic droit sur chrome dans le menu Démarrer de Windows, cliquer sur Propriétés et y ajouter le drapeau. Cela ne fonctionne pas pour moi sur mon ordinateur de travail, j'ai donc aliasé la commande dans git bash pour Windows.

vitale232 le

7

Ceci est expliqué en détail sur le site Visual Studio Code: https://code.visualstudio.com/docs/nodejs/angular-tutorial

Victor Ionescu
la source

vouliez-vous dire code.visualstudio.com/docs/nodejs/... ? le · # _debugging-angular pointe directement sur le point intéressant si vous voulez éditer votre réponse ...

Pipo

@Pipo Non, je ne voulais pas dire nodejs, je n'utilise pas nodejs côté serveur, donc je ne sais pas.

Victor Ionescu

3

Peut utiliser cette configuration:

{
 "version": "0.2.0",
"configurations": [
{
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
]
}

Ahmad Aghazadeh
la source

2

Voici une solution un peu plus légère, fonctionne avec Angular 2+ (j'utilise Angular 4)

Ajout des paramètres d'Express Server si vous exécutez la pile MEAN.

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Angular Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "runtimeArgs": [
        "--user-data-dir",
        "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "trace": true,
        "webRoot": "${workspaceRoot}/client/",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Express Server",
      "program": "${workspaceRoot}/server/bin/www",
      "outFiles": [
        "${workspaceRoot}/out/**/*.js"
      ]
    }
  ]
}

Isak La Fleur
la source

Pouvez-vous déboguer / interrompre votre code côté serveur en même temps que angular avec cette configuration?

Mika571

@ Mika571 non malheureusement ... J'ai essayé ça maintenant. Je voudrais également déboguer le serveur et le client en même temps.

Leniel Maccaferri

1

La réponse @Asesjix est très complète, mais comme certains l'ont souligné, il faut toujours plusieurs interactions pour démarrer ng serve, puis lancer l'application Angular dans Chrome. Je l'ai fait fonctionner en un seul clic en utilisant la configuration suivante. La principale différence avec la réponse de @ Asesjix est que le type de tâche est maintenant shellet que les appels de commande s'ajoutent startavant ng serveafin de ng servepouvoir exister dans son propre processus et ne pas empêcher le débogueur de se lancer:

tâches.json:

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "ng serve",
        "type": "shell",
        "command": "\"start ng serve\""
      },
      {
        "label": "ng test",
        "type": "shell",
        "command": "\"start ng test\"",
      }
    ]
  }

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch in Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "ng serve"
        }
    ]
}

ubiquibacon
la source

0

Dans mon cas, je n'avais pas utilisé l'arborescence de dossiers du projet Angular d'origine et je savais qu'il y avait quelque chose qui n'allait pas avec le webRoot/ {workspaceFolder}bit, mais toutes mes expériences n'ont donné aucun résultat. Vous avez une astuce d'une autre réponse SO que je lierai si je la retrouve.

Ce qui m'a aidé a été de trouver le contenu de la variable {workspaceFolder}au moment de l'exécution, puis de le modifier à l'emplacement de mon dossier "src" sous lequel vous avez "app / *". Pour le trouver, j'ai ajouté un preLaunchTaskà mon fichier launch.json et une tâche pour afficher la valeur de {workspaceFolder}.

launch.json , qui apparaît après l'installation du débogueur Chrome

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/newProjectRoot/",
      "preLaunchTask": "Echo values" //Just to see what the cryptic vs code variables actually are https://code.visualstudio.com/docs/editor/variables-reference
    }
  ]
}

Tasks.json Non présent par défaut. Appuyez sur Ctrl + Maj + p et je pense que cela s'appelle «créer une tâche pour une autre commande» ou quelque chose de similaire. Impossible de le voir après la création de tasks.json. Vous pouvez également simplement créer le fichier au même emplacement que launch.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Echo values",
      "command": "echo",
      "args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
      "type": "shell"
    }
  ]
}

Une fois que j'ai connu la valeur de $ {workspaceFolder}, je l'ai corrigé pour qu'il pointe vers mon dossier src dans ma nouvelle arborescence de projet et tout a fonctionné. Le débogage doit ng serveavoir été exécuté soit en tant que tâche de pré-lancement, soit dans le cadre de la construction (exemples ci-dessus) ou dans une invite de commande.

Voici un lien vers toutes les variables que vous pouvez utiliser:

Cendre
la source

Comment déboguer Angular avec VSCode?

Réponses:

Testé avec Angular 5 / CLI 1.5.5

Testé avec Angular 2.4.8

Lancer un processus

Joindre à un processus existant