web-dev-qa-db-fra.com

Déboguer et exécuter Angular2 TypeScript avec du code Visual Studio?

Déboguer et exécuter Angular2 TypeScript avec du code Visual Studio?

J'essaie de déboguer une application Angular2 TypeScript avec du code VS https://angular.io/guide/quickstart

Quelqu'un peut-il s'il vous plaît partager des étapes pour déboguer et exécuter à partir de code VS?

angularvisual-studio-code
76
Sanket

Après beaucoup de recherches, j'ai trouvé ces étapes-

Avant de commencer, assurez-vous de disposer de la dernière version du code de VS. Vous pouvez vérifier la dernière version - Aide> Rechercher les mises à jour ou À propos de.

  1. Installez l'extension appelée 'Debugger for Chrome'. Une fois l’installation terminée, redémarrez le code VS.

  2. Accédez à la fenêtre de débogage, ouvrez le fichier launch.json à l'aide de Chrome.

  3. Dans la section de configuration Launch.json, utilisez ci-dessous config

    {
    "name": "Launch localhost with sourcemaps",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/Welcome",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}"
}

  4. Dans tsconfig.json, assurez-vous que vous avez "sourceMap": true

Ceci termine les paramètres de votre environnement de débogage . Avant de commencer le débogage, assurez-vous que toutes vos instances Chrome.exe existantes sont fermées. Vérifier à partir du gestionnaire de tâches OR Utiliser la commande DOS ‘killall chrome’

  1. Exécutez votre projet en utilisant la commande npm start et Chrome comme navigateur par défaut.

  2. Une fois l'application exécutée avec succès, vous recevrez le numéro de port. Copiez l’URL du navigateur Chrome et collez-le dans la section URL ci-dessus . (REMARQUE: si vous utilisez le routage dans votre application, l’URL le souhaite, sinon il se terminera par index.html, etc.).

  3. Maintenant, placez des points d'arrêt où vous voulez dans vos fichiers TypeScript.

  4. Là encore, accédez à la fenêtre de débogage dans le code VS et cliquez sur Exécuter. Votre onglet/instance connecté au débogueur ressemblera à celui ci-dessous. 

 Chrome Debugging

120
Sanket

Spécifiez un userDataDir - cela évitera les conflits avec d'autres instances de Chrome que vous avez peut-être déjà exécutées. J'ai remarqué à cause de cela que Chrome cesse d'écouter le port que vous spécifiez. Ci-dessous ce que j'utilise et c'est génial!

{
    "name": "Launch",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/#/about",
    "port": 9223,
    "sourceMaps": true,
    "diagnosticLogging": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/out/chrome"
}

Merci à @reecebradley - GitHub: Impossible de se connecter à la cible: connect ECONNREFUSED

15
HydTechie

J'avais un problème similaire, mais mon projet incluait également un pack Web qui entraînait l'échec des solutions ci-dessus. Après avoir parcouru Internet, j'ai trouvé une solution dans un fil de discussion sur github:

https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972

Quoi qu'il en soit, c'est ce qui a été fait.

Remarque: - Avant de commencer, vous devez vérifier si vous disposez de la dernière version du code de visual studio et avez également installé l'extension appelée " Debugger for Chrome " dans VS Code.

Tout d'abord, dans './config/webpack.dev.js' 

  • utiliser => (devtool: 'source-map'} _
  • au lieu de => devtool: 'cheap-module-source-map'

Ensuite, installez et utilisez le plug-in write-file-webpack:

  • npm install --save write-file-webpack-plugin

Ajoutez le plugin à './config/webpack.dev.js' en ajoutant:

  • const WriteFilePlugin = require ('write-file-webpack-plugin'););

sous les plugins Webpack en haut. Continuez à ajouter:

  • new WriteFilePlugin ()

à la liste des plugins après le nouveau DefinePlugin (), c.-à-d.

plugins:[
    new DefinePlugin({....}),
    new WriteFilePlugin(),
    ....
]

Cela garantit que les cartes source sont écrites sur le disque

Enfin, mon launch.json est donné ci-dessous.

{
    "version": "0.2.0",
    "configurations": [{
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000/",
        "runtimeArgs": [
           "--user-data-dir",
           "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "url": "http://localhost:3000/",
        "port": 9222,
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}"
    }]
}

remarquez l'absence de '/ dist /' dans la racine web. Avec cette configuration, les sources-maps sont dans ./dist/, mais elles pointent vers ./src/. vscode ajoute la racine absolue à l'espace de travail et résout correctement le fichier.

5
malmike21

Voici une documentation officielle de Visual Studio sur le débogage de Angular dans VSCode https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger

Pour déboguer le code angulaire côté client, nous devons installer l'extension Debugger for Chrome . Ouvrez la vue Extensions (Ctrl + Maj + X) et tapez «chrome» dans le champ de recherche. Vous verrez plusieurs extensions qui font référence à Chrome . Appuyez sur le bouton Installer du débogueur pour Chrome. Le bouton passera à Installer puis, une fois l’installation terminée, changera pour recharger. Appuyez sur Recharger pour redémarrer VS Code et activer l'extension.

Nous devons d'abord configurer le débogueur. Pour ce faire, accédez à la vue Débogage (Ctrl + Maj + D) et cliquez sur le bouton d'engrenage pour créer un fichier de configuration du débogueur launch.json. Choisissez Chrome dans la liste déroulante Sélectionner un environnement. Cela créera un fichier launch.json dans un nouveau dossier .vscode de votre projet, qui comprend la configuration pour le lancement du site Web ou l'attachement à une instance en cours d'exécution . Nous devons apporter un changement à notre exemple: changez le port de 8080 à 4200. 

5
Teddy

J'avais des problèmes avec cela et alors que @Sankets répondait, c'est ce problème qui les a résolus pour moi https://github.com/angular/angular-cli/issues/2453 .

Ajouter spécifiquement le ci-dessous à launch.json

"sourceMapPathOverrides": {
    "webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*"
}
3
rubie

Pour la graine angulaire:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5555",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}/src/client",
      "userDataDir": "${workspaceRoot}/out/chrome",
      "sourceMapPathOverrides": {
        "app/*": "${webRoot}/app/*"
      }
    }
  ]
}
2
Maxime Duc

Ces mods à launch.json fonctionnaient pour moi sur MacOS, ce qui m'a permis de faire fonctionner le débogueur et les points d'arrêt dans une nouvelle instance de Chrome par session de débogage ...

// This forces chrome to run a brand new instance, allowing existing
// chrome windows to stay open.
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
0
Simeon

Celui-ci est essayé et testé -

Étape 1: Installez chrome debugger: ouvrez simplement la palette de commandes (Ctrl + Maj + P) dans VS Code et tapez la commande Extensions: Install Extension. Lorsque la liste des extensions apparaît, tapez "chrome" pour filtrer la liste et installer l'extension Debugger for Chrome. Vous allez ensuite créer un fichier de configuration de lancement.

[Plus de détails de l'étape 1]

Étape 2: Créer et mettre à jour le fichier launch.json: Deux exemples de configuration launch.json avec "request": "launch". Vous devez spécifier le fichier ou l'URL pour lancer Chrome contre un fichier local ou une URL. Si vous utilisez une URL, définissez webRoot sur le répertoire à partir duquel les fichiers sont servis. Cela peut être un chemin absolu ou un chemin utilisant $ {workspaceRoot} (le dossier ouvert dans Code). webRoot est utilisé pour résoudre les URL (comme " http: //localhost/app.js ") dans un fichier sur le disque (comme "/Users/me/project/app.js"), faites donc attention à ce que ce soit définir correctement . mettre à jour le contenu du fichier launch.json comme suit-

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/some_name",
            "webRoot": "${workspaceRoot}/wwwroot"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/index.html"
        },
    ]
}

[Plus de détails de l'étape 2]

0
enthusiast

Je dois utiliser CORS pour ouvrir Chrome avec la sécurité Web désactivée. Ensuite, je débogue l'application angulaire en joignant debugger à chrome.

La ligne CMD lance Chrome avec une sécurité Web désactivée:

cd "C:\Program Files (x86)\Google\Chrome\Application\"
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security --remote-debugging-port=9222

Fichier launch.json pour attacher le débogueur:

{
    // 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": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
    ]
}
0
Karthik

La réponse de @ Sanket était correcte, mais cela me posait quelques problèmes. Le premier fichier Launch.json se trouve dans le répertoire ".vscode" du projet.et le deuxième numéro de port doit être identique au port de serveur par défaut que vous utilisez pour lancer votre application. J'utilise ng serve à partir de cmd pour lancer mon projet et le numéro de port par défaut était 4200 donc j'ai modifié le fichier launch.json comme suit

{ // 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": "Launch Chrome against localhost", "url": "http://localhost:4200", "sourceMaps": true, "webRoot": "${workspaceFolder}" } ] }

0
Hamed Mahdizadeh