Comment implémenter les fichiers ts de débogage de point d'arrêt dans Angular2-js tutoriel-php.cn

Comment implémenter les fichiers ts de débogage de point d'arrêt dans Angular2

亚连

Libérer： 2018-06-21 10:54:58

original

2604 Les gens l'ont consulté

Cet article présente principalement la méthode d'utilisation des points d'arrêt vscode pour déboguer les fichiers ts dans Angular2. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

VSCode est livré avec un outil de débogage. Il utilise angulaire2 pour gérer les projets en arrière-plan. Il est très pratique d'essayer de déboguer les fichiers ts. Voici les étapes spécifiques de mise en œuvre et les pièges. Après l'avoir débogué, avec le recul, ce paramètre est très simple. J'utilise le projet créé par ng-cli. J'ajouterai le débogage des projets généraux plus tard, et le sentiment est similaire.

Résolu "Point d'arrêt ignoré car le code généré n'a pas été trouvé (est-ce un problème de mappage source ?)", reportez-vous à la configuration de mon environnement ci-dessous

Configuration de mon environnement

1. node v7.3.0

2. npm 3.10.10

3. ng >= 1.3 // C'est très important, la version avec laquelle j'ai commencé était inférieure à cette version, elle continue de signaler "Le point d'arrêt a été ignoré car le code généré n'a pas été trouvé (est-ce un problème de mappage de source ?)"

4 Installez le plug-in vscode pour chome dans vscode, la version doit être 3.1.4 ou. ci-dessus

5. Générez launch.json et modifiez le contenu du fichier comme suit

{
 "version": "0.2.0",
 "configurations": [ // 这个数组里包含了可以包含多个配置对象
  {
   "name": "ng serve", // 配置对象的名称，你可以选择其中一个配置运行调试
   "type": "chrome", 
   "request": "launch",
   "url": "http://localhost:4200/#",
   "webRoot": "${workspaceRoot}"
  },
  {
   "name": "ng test",
   "type": "chrome",
   "request": "launch",
   "url": "http://localhost:9876/debug.html",
   "webRoot": "${workspaceRoot}"
  },
  {
   "name": "ng e2e",
   "type": "node",
   "request": "launch",
   "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
   "protocol": "inspector",
   "args": ["${workspaceRoot}/protractor.conf.js"]
  }   
 ]
}

Copier après la connexion

1. Modification de la configuration .json

//1. 先卸载
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
//2. 全局安装
npm uninstall -g @angular/cli
npm cache clean
# if npm version is > 5 then use `npm cache verify` to avoid errors (or to avoid using --force)
npm install -g @angular/cli@latest
//3. 本地安装
npm install --save-dev @angular/cli@latest

Copier après la connexion

第一步先要安装vscode for chrome这个插件：

Installation du plug-in

第二步修改launch.json配置：

dans Le fichier launch.json de chrome généré dans le projet

第三步更改lauch.json文件配置：

Le launch.json modifié

Remarque : ce débogage nécessite que vous ayez exécuté ng serve dans le terminal vscode pour démarrer le projet, sinon vous ne pouvez pas déboguer 第四步启动调试：

Trois options de sélection seront générées ici, suivi des trois objets dans le nom launch.json

Démarrer le débogage

Définissez d'abord un point d'arrêt dans la page ts qui doit être débogué, puis cliquez sur le bouton Démarrer le débogage. Ensuite, une nouvelle page Chrome sera ouverte pour le projet, puis la page doit être actualisée pour démarrer le débogage du point d'arrêt 第五步启动后展示：

vscode ouvrira automatiquement une nouvelle page de fenêtre Chrome et actualisera la page. Elle peut être déboguée comme suit