web-dev-qa-db-fra.com

Angular 2 Erreurs et TypeScript - Comment déboguer?

Je viens de commencer un projet pour apprendre Angular2 et TypeScript + Javascript. Je viens d'un arrière-plan Java et mon approche du débogage des projets est généralement une combinaison de traces de pile, d'erreurs de compilation et, sur des projets plus volumineux, de nombreux cas de test. Il semble que cela se traduise directement dans le monde de Web-dev, en particulier le débogage de mon code qui interagit avec les bibliothèques d’Angular2.

Quelqu'un pourrait-il suggérer des approches possibles pour déboguer du code avec Angular2? Plus précisément; Comment puis-je voir quelles parties de mon HTML/TS causent des problèmes? J'ai vérifié la console, à partir de laquelle je peux voir que j'ai cassé Angular2, mais cela ne semble pas beaucoup plus informatif.

Juste pour clarifier; Je ne veux pas d'aide pour ce cas particulier. Je voudrais apprendre à diagnostiquer + résoudre ces problèmes moi-même.

debuggingwebtypescriptangular
40
Micheal Hill

En supposant que vous utilisiez Chrome, vous pouvez placer des points d'arrêt dans l'onglet "Sources" de votre console. Ces points d'arrêt peuvent être définis sur les fichiers ts. Si vous avez besoin d'informations du fichier js, vous pouvez décocher Javascript dans les paramètres de la console: cela vous permettra de placer des points d'arrêt dans les fichiers js.

Sur un point d'arrêt, vous pouvez effectuer les tâches habituelles (surveillance, espions, trace de pile, etc.). Vous pouvez également écrire des js dans la console en accédant directement à des variables locales, par exemple:

function b(){
    var c = 1;
    // if you put a breakpoint here and type c in the console, it will write "1"
}

Spécifiquement dans angular 2, vous voudrez peut-être ajouter des points d'arrêt dans les lignes "Lancer" dans leur bibliothèque, vous obtiendrez des traces de pile plus détaillées. Si vous cliquez sur le bouton "..." dans leurs traces de pile, vous aurez accès à votre fichier qui a causé l'erreur.

C'est pour les bugs réels. Maintenant, pour la performance, sur l'onglet "timeline", vous pouvez cliquer sur le bouton "enregistrer" en haut à gauche. Une fois que vous avez terminé l'enregistrement (cliquez sur "terminer"), vous verrez l'utilisation du processeur. Vous pouvez effectuer un zoom sur les événements dans la timeline pour voir quelle partie du code utilise trop de ressources.

Vous pouvez également suivre la mémoire en cochant la case "mémoire".

Si vous avez besoin de déboguer un iframe, une zone de sélection située dans la console indique "cadre supérieur" que vous pouvez définir comme vous le souhaitez.

Si j'ai oublié quelque chose d'important, demandez simplement :).

27
Camille Wintz

Ouvrez la console du développeur Web, allez à la section "Sources". Appuyez sur "cntrl + p". Une boîte de recherche s'ouvrira où tapez ".ts" et trouvez votre fichier ou recherchez directement votre fichier comme "myfile.ts". Ouvrez-le et vous pouvez mettre des points d'arrêt directement dans le code, de la même manière que nous plaçons des points d'arrêt dans un fichier js et voilà, vous pouvez déboguer TypeScript.

24
Manohar Prasad

Je pense que cela ne concerne pas uniquement Angular2, mais étant donné que vous venez d'un contexte Java, je suppose que cela ressemble davantage à "comment déboguer des applications Web JavaScript avec succès" en général.

En rapport avec cela, je vous suggère fortement de jeter un coup d'oeil à la page Chrome Devtools (étant donné que vous utilisez Chrome, qui intègre très bien devtools).
Sur cette page, vous trouverez de nombreux tutoriels utiles. En particulier dans votre cas, probablement l'article sur Debugging JavaScript qui contient quelques astuces intéressantes comme le débogage conditionnel, la modification des modifications du DOM, voire la suppression des exceptions capturées/non capturées, etc.

Je suggère aussi souvent aux gens de faire le gratuit cours Code School sur Discover Devtools , ce qui est bien aussi.

Dans le cas de TypeScript, assurez-vous également que vous activez les cartes de source . Comme vous le savez probablement, TypeScript n'est pas exécuté directement par le navigateur, mais est plutôt "compilé" (ou appelé "transpilé") en JavaScript. Cela dit, vous ne voulez probablement pas déboguer le fichier JS transpilé, mais plutôt le code TypeScript que vous avez écrit. Pour activer les cartes source, définissez le drapeau approprié dans votre tsconfig.json:

{
  "version": "1.6.2",
  "compilerOptions": {
    ...
    "sourceMap": true
  },
  "exclude": [
     ...
  ]
}
7
Juri

Si vous venez du monde Java, il y a de bonnes chances que vous utilisiez déjà IntelliJ IDEA de JetBrains. Si tel est le cas, il est possible de déboguer JavaScript (et TypeScript) directement dans les IDE en utilisant la même interface que pour les applications Java.

JetBrains a ne documentation sur le sujet qui pourrait aider.

Comme cela a été dit dans d'autres réponses, vous pouvez également utiliser le débogueur de l'inspecteur de Chrome. Personnellement, je préfère grandement utiliser IntelliJ pour le faire à la place.

Si vous ne cherchez que des exemples de la façon dont le flux de travail fonctionne, jetez un coup d'œil à ceci projet Github qui montre l'utilisation de Webpack avec Angular2 .

3
Michael Oryl