Chrome - Debug Angular/TypeScript - Comment naviguer dans le fichier ts
Pour déboguer mon front angulaire, j'ouvre les outils de développement de Chrome et l'onglet Sources, puis je navigue jusqu'au fichier ts en faisant défiler tous les dossiers. Lorsque je trouve le fichier ts, je définis ensuite un point d'arrêt. et retournez à l’utilisation de l’application, puis démarrez le débogage.
Bien que cela fonctionne, il faut beaucoup de temps pour avoir à parcourir les dossiers ... et rechercher le fichier ts. À mesure que le projet prend de l'ampleur, je constate qu'il prend encore plus de temps.
Je dois aussi me rappeler quel fichier TS est associé à quelle page.
Est-ce que quelqu'un sait s'il est possible d'aller directement de la page au fichier ts?
J'aimerais pouvoir faire un clic droit et sélectionner un élément de menu pour accéder directement au fichier ts exactement comme Inspect fonctionne pour les fichiers HTML.
Toutes les suggestions devraient considérer que le projet est assez volumineux. J'ai essayé d'utiliser des add-ons, mais il a fallu un certain temps pour que l'actualisation soit inutilisable.
Quelqu'un at-il des conseils sur la manière d’éviter d’explorer les dossiers pour rechercher le fichier ts et définir le point d’arrêt. Comment cela peut-il être réalisé de manière beaucoup plus rapide et efficace?
Merci mille fois, Fergal.
Pas:
- Ouvrez l'outil de développement de Chrome (F12).
- Appuyez sur [Ctrl] + [P] dans Chrome Dev Tools pour rechercher un fichier TS et l'ouvrir.
Vous pouvez également copier le nom du fichier à partir du code Et le coller dans la zone de saisie de la recherche.
C'est la meilleure approche.
Angular utilise webpack et tous les fichiers de script de type y sont répertoriés. Pour sélectionner votre fichier TypeScript cible, utilisez l'outil Developer de Chrome (F12). Allez sur l'onglet Source et sélectionnez "webpack: //" -> "." -> "src/app" -> votre fichier TypeScript (voir le fichier image).
Définissez ensuite le marqueur de ligne de débogage sur le fichier ts et utilisez la fonction de clavier de script Java normale (F8, F10, F11, etc.) pour le déboguer.
Ouvrez la console du développeur et CTRL+P pour trouver votre fichier.
Si vous utilisez Angular avec du code VS et souhaitez déboguer dans un navigateur Chrome, suivez cette étape.
1) Installer Extension du débogueur Chrome
2) Après l’installation, l’icône du plug-in de débogage apparaîtra dans le volet de gauche. Cliquez pour obtenir la nouvelle fenêtre.
3) Sélectionnez maintenant Debug-> Add Configuration. Cela créera un fichier Launch.json avec des valeurs pré-remplies. Mettez-le à jour avec votre URL et votre numéro de port.
4) Maintenant, retournez à votre code et ajoutez un point d'arrêt où vous le souhaitez.
5) Lancez votre application dans le terminal (npm start). Sélectionnez à nouveau le bouton du plug-in de débogage dans le volet de gauche. il aura tous les points d'arrêt énumérés.
6) Sélectionnez Déboguer-> Lancer l’option Chrome Against localhost. Cela ouvrira une fenêtre de navigateur chrome distincte et sur vscode, le bouton des commandes de débogage ressemblera à Visual studio. Vous pouvez également utiliser les boutons du clavier pour déboguer le code. Voir l'image ci-dessous
