web-dev-qa-db-fra.com

Le débogage avec le code Visual Studio ne fonctionne pas

J'aimerais pouvoir déboguer une application Angular2 avec Visual Studio Code. 

Voici mon environnement: 

  • OS: Ubuntu 16.10 x64 
  • Navigateur: Chromium 53.0.2785.143 
  • Node: 6.8.0 
  • Angular-cli: 1.0.0-beta.19-3 

Créer un nouveau projet avec angular-cli:

ng new test-VSC-debug
cd test-VSC-debug

Ensuite, j'ouvre VSC et charge le projet: File/open folder

Je clique sur le logo debug et je configure launch.json en sélectionnant chrome. Il génère le fichier suivant:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

Ensuite, je commence juste le projet angular2 en lançant:

ng serve

Une fois que cela a commencé, dans VSC, je sélectionne: "Lancer Chrome contre localhost, avec sourcemaps".

Ensuite, j'obtiens l'erreur suivante:
"Impossible de trouver chrome: installez-le ou définissez le champ runtimeExecutable dans la configuration de lancement."

Alors j'ai mis:
"runtimeExecutable": "navigateur chrome"
(comme j’ai pas ont du chrome mais du chrome sur mon Ubuntu).

Le port par défaut de Angular-cli pour lancer l'application est 4200 . Modifiez l'URL de: " http: // localhost: 8080 " en " http: // localhost: 4200 ".

Le navigateur ouvre maintenant l'application, mais VSC présente l'erreur suivante: "Impossible de se connecter au processus d'exécution, délai dépassé après 10000 ms - (raison: impossible de se connecter à la cible: connect ECONREFUSED 127.0.0.1:9222".

Parmi d'autres réponses trouvées sur des problèmes de stackoverflow/github, j'ai lu que je devrais peut-être tuer toutes les instances de chrome avant d'essayer de le faire. Je ferme donc simplement chrome et lance killall chromium-browser.

J'essaye de relancer le débogage: Même erreur qu'avant (impossible de se connecter).

J'ai également vu que les arguments suivants pourraient aider:

"runtimeArgs": [
  "--remote-debugging-port=9222",
  "--user-data-dir"
]

Mais cela ne change rien.

J'ai décidé d'utiliser VSC pour mes développeurs TypeScript (principalement angular2) et cette méthode de débogage semble très puissante. J'ai l'impression qu'il serait trop dommage de ne pas l'utiliser :).

Merci pour toute aide !

PS: Quelques questions de stackoverflow liées et problèmes de github:
- Déboguer et exécuter Angular2 TypeScript avec du code Visual Studio?
- https://github.com/angular/angular-cli/issues/2453
- https://github.com/angular/angular-cli/issues/1936
- https://github.com/angular/angular-cli/issues/1281

EDIT 1: !!! Amélioration partielle !!! J'ai trouvé un moyen d'avoir des informations de débogage dans la console Visual Studio Code! Ce n'est donc pas encore parfait, car les points d'arrêt ne fonctionnent pas, mais voici la chose . Jusqu'à présent, si j'ouvrais http : // localhost: 9222 Je n'ai rien pu voir. ("localhost n'autorise pas la connexion").

MAIS, si je lance le chrome comme ça: 

chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile

L'important est de noter cet argument: --user-data-dir=remote-profile. Si vous ne faites que passer --user-data-dir, une nouvelle fenêtre s’ouvrira alors que personne ne sera connecté. Mais ça ne suffit pas. Vous devez transmettre remote-profile en tant que valeur.

  • il ouvre une nouvelle fenêtre de navigateur
  • J'ouvre http: // localhost: 4200 ET je peux aussi atteindre http: // localhost: 9222 !
  • Je suis capable de connecter VSC avec l'option "Attacher à chrome avec la carte source"! enter image description here (comme vous pouvez le constater, le message "Angular 2 s'exécute en mode de développement. Appelez enableProdMode () pour activer le mode de production." s'affiche dans la console et le pied de page est désormais orange).

Jusqu’à présent, j’espère que cela pourra aider certaines personnes . Mais le problème est que les points d’arrêt ne fonctionnent pas . enter image description here

Je continue à creuser et je ferai un autre montage si je trouvais pourquoi.

angulargoogle-chrome-devtoolsvisual-studio-codeangular-cli
14
maxime1992

J'ai pu résoudre ce problème sous OSX. La raison pour laquelle c'est si pénible est qu'il y a plusieurs choses qui causent le problème.

  1. Si vous avez déjà exécuté Chrome (si, par exemple, des onglets sont ouverts - qui ne le fait pas?), Vous avez déjà utilisé le code --user-data-dir=remote-profile: vous devez utiliser une variable userDataDir différente pour que Chrome lance une instance indépendante.
    Cependant, la bonne façon de faire consiste à ajouter "userDataDir": "${workspaceRoot}/.vscode/chrome", à votre configuration launch.json (voir ci-dessous). Cela doit être un chemin. Si 'remote-profile' est utilisé, il tente de trouver un répertoire relatif nommé 'remote-profile'.
  2. Vous devez définir sourceMapPathOverrides dans votre config launch.json, dont la valeur dépend de votre système d'exploitation:
    OSX: "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
    Windows: "sourceMapPathOverrides": { "webpack:///C:*":"C:/*" } 
    Linux: "sourceMapPathOverrides": { "webpack:///*": "/*" } 
    (Remarque: je n'ai pas testé les versions Windows ou Linux)

Voici mon launch.json sous OSX:

{
    // 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 Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            // This forces chrome to run a brand new instance, allowing existing
            // chrome windows to stay open.
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            //"diagnosticLogging": true,
            "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "url": "http://localhost:4200",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
        }
    ]
}

Pour que cela fonctionne, exécutez ng serve dans un terminal, puis appuyez sur F5 dans Visual Studio Code.


Voici les versions avec lesquelles je travaille:

  • angular-cli: 1.0.0-beta.24
  • noeud: 7.3.0
  • Chrome: 55.0.2883.95
  • Code Visual Studio: 1.8.1
  • Extension VSCode "Débogueur pour Chrome" msjsdiag.debugger-for-chrome: 2.4.2
12
Aaron F.

J'ai enfin le faire fonctionner pleinement !!!

Pour ceux intéressés:

(en utilisant chrome-navigateur sur Linux, mais vous pouvez facilement remplacer par "chrome").

Premièrement, voici la config launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/src",
            "url": "http://localhost:4200/",
            "sourceMapPathOverrides": {
              "webpack:///*": "/*"
            }
        }
    ]
}

J'ai décidé de supprimer la partie avec "request": "launch" car j'ai besoin de lancer une nouvelle fenêtre de navigateur.

Ensuite, lancez le navigateur comme ça:
chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile

Dans la nouvelle fenêtre, accédez à http: // localhost: 4200 .

Ensuite, à partir de VSC, exécutez le débogage.

Tout devrait fonctionner correctement et vous devriez pouvoir utiliser les points d'arrêt :)

GIF disponible ici pour le voir en action: http://hpics.li/0156b80

12
maxime1992

Identique à Aaron F. ans J'utilise le paramètre suivant pour Angular 2+ develop dans un environnement Windows

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "trace": true,
            "smartStep": true,
            "runtimeArgs": [
              "--disable-session-crashed-bubble",
              "--disable-infobars"
            ],
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        }
    ]
}
2
Zealitude

J'utilise Angular CLI 1.7.3 et Angular: 5.2.9 sur Mac OSX. Voici la configuration qui fonctionne pour moi:

 {
 "version": "0.2.0", 
 "configurations": [
 {
 "type": "chrome", 
 "demande": "lancer", 
 "name": "Launch Client in Chrome", 
 "sourceMaps": true, 
 "url": "http: // localhost: 4200", 
 "webRoot": "$ {workspaceRoot}", 
 "userDataDir": "$ {workspaceRoot} /. vscode/chrome", 
 "sourceMapPathOverrides": {
 "webpack: /./*": "$ {webRoot}/*", 
 "webpack:/src/*": "$ {webRoot}/src /*",
 "webpack:/*": "*", 
 "webpack: /./ ~/*": "$ {webRoot}/node_modules /*",
 } 
 } 
 ] 
}
2
Awsed

La configuration suivante fonctionne bien pour macOS avec VSCode v1.23, Angular 6 et Chrome 66.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "smartStep": true,
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/src/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}
1
Jose Orihuela

J'ai un problème étrange avec launch.json fourni par Aaron F.

".scripts" dans la ligne de commande du débogueur donne les URL comme ceci:

webpack-internal:///./src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)
- webpack:/src/app/app.component.ts (/home/user/my-dream-app/src/app/webpack:/src/app/app.component.ts)

so Code essayant d’utiliser le fichier "/home/user/my-dream-app/src/app/webpack:/src/app/app.component.ts" (avis webpack: au centre) 

Les cartes sources ne fonctionnent pas, car mon adresse Chrome donne l'URL sous la forme "webpack: /" avec UNE barre oblique.

En le faisant fonctionner avec ce launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome with ng serve",
          "url": "http://localhost:4200/",
          "webRoot": "${workspaceRoot}",
          "sourceMapPathOverrides": { "webpack:/*": "${webRoot}/*" }
        }
      ]
}

et obtenu une cartographie correcte

webpack-internal:///./src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)
- webpack:/src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)
  • Ubuntu: 16.04 
  • Chrome: 64.0.3282.186 
  • VSCode: 1.20.1 
  • CLI angulaire: 1.7.2
  • Node: 7.10.1
0
nagos