Mise en place du débogage pour TypeScript

Ce qui suit est la traduction de deux articles du site Game From Scratch : TypeScript debugging et TypeScript in WebStorm concernant le débogage avec le langage TypeScript. Le même auteur a également publié des articles plus généralistes sur le débogage, avec C++, Java et JavaScript comme langages de référence.

Alors que je cherchais à créer des jeux en utilisant Phaser avec TypeScript, j'ai rencontré mes premiers désagréments. Le premier est certainement le débogage. Au premier coup d'œil le débogage semblait merveilleux, mais ce n'est qu'ensuite que je me suis rendu compte de mon erreur. Dans le billet précédent, j'avais dit que je devais ajouter au projet le fichier JavaScript généré pour qu'un point d'arrêt soit activé et tout à coup j'ai compris pourquoi.

Vous ne pouvez pas déboguer de code TypeScript dans Chrome ou Firefox.

Erf…

Si vous définissez un point d'arrêt dans Visual Studio dans un fichier TypeScript,

qu'ensuite, vous exécutez votre application en utilisant Internet Explorer comme cible,

et…

que maintenant vous basculez vers Chrome ou Firefox, alors votre point d'arrêt ne sera jamais atteint.

Eh bien ça craint un peu. Tout compte fait, ce n'est pas rédhibitoire, Internet Explorer s'améliore progressivement et avec Windows Tablet et Phones, il devrait probablement être sur un terminal cible qui vous intéresse, par conséquent, utiliser Internet Explorer comme plate-forme de débogage ne devrait pas être la fin du monde, surtout si vous utilisez Visual Studio en tant que plate-forme de développement.

II-A. Sous Firefox ou Chrome▲

Bien sûr, Firefox et Chrome ont un débogueur intégré de sorte que vous pouvez facilement déboguer le code JavaScript généré. Toutefois, si vous voulez déboguer dans le langage dans lequel vous avez programmé (que ce soit TypeScript, Dart ou CoffeeScript) vous avez besoin une autre solution…

Les Source Maps.

Tous les principaux navigateurs gèrent désormais les source maps, mais cela peut vous obliger à quelques contorsions. Une source map est essentiellement ce que dit son nom, une correspondance d'un langage à un autre, de sorte que le débogueur peut exécuter le code JavaScript tout en vous montrant la ligne qui l'a en fait généré.

Nous devons tout d'abord dire à Visual Studio de générer une source map pour notre projet TypeScript. Faites un clic droit sur votre projet dans le Solution Explorer et sélectionnez Properties.

Sélectionnez TypeScript Build et dans la section Debugging cochez Generate Source Maps.

Maintenant, générez votre projet et le fichier .js.map devrait être créé.

II-B. Source Map avec Chrome▲

Maintenant, jetons un œil sur le mode opératoire dans Chrome. Exécutez le projet dans Chrome à partir de Visual Studio. Dans Chrome, nous devons maintenant activer les source maps.

Appuyez sur F12 pour faire apparaître les outils de développement si ce n'est pas déjà le cas.

Sélectionnez l'icône d'engrenage.

Dans la fenêtre résultante assurez-vous de cocher Enable JavaScript source maps.

Maintenant, vous devriez voir vos fichiers TS disponibles dans l'arborescence des sources. Vous avez remarqué comment j'ai placé un point d'arrêt dans le source de TypeScript (ligne 12) ?

Maintenant, rafraîchissez dans Chrome :

Le point d'arrêt se déclenchera lorsque la ligne correspondante dans le code JavaScript généré sera atteinte.

Pas parfait, mais certainement mieux.

II-C. Source Map avec Firefox▲

Depuis Visual Studio, lancez Firefox.

Chargez le débogueur (CTRL+MAJ+S ou Tools -> Web Developper -> Debugger).

Cliquez sur l'icône d'engrenage et sélectionner Show Original Sources.

Maintenant, Firefox affichera la source TS (et aucun fichier JS contrairement à Chrome, pour les voir désactivez Show Original Sources). Comme vous pouvez le voir, vous pouvez maintenant définir un point d'arrêt dans le source TypeScript :

Contrairement à Chrome, le débogueur fonctionne également avec les sources TypeScript :

II-D. Bilan TypeScript et Visual Studio▲

})(GameFromScratch || (GameFromScratch = {}));
//# sourceMappingURL=C:/temp/Phaser/TitleScreen/app.js.map

})(GameFromScratch || (GameFromScratch = {}));
//# sourceMappingURL=app.js.map

Jusqu'à présent, en travaillant avec TypeScript j'ai exclusivement utilisé Visual Studio ce qui ne s'est pas fait sans problème. Il y a beaucoup de gens qui n'ont pas accès à Visual Studio (travaillant sur Mac ou Linux peut-être ?) ou tout simplement ne le souhaitent pas. Heureusement, il existe un excellent substitut, WebStorm. Certes WebStorm n'est pas libre, bien qu'il y a une période d'essai de 30 jours. Il vaut cependant largement les 44 € si vous travaillez en JavaScript (ou TypeScript). Ici on va se pencher sur le travail en TypeScript avec WebStorm.

Première étape bien sûr télécharger et installer WebStorm. La version d'évaluation est pleinement fonctionnelle.

Au cours de l'installation, si vous ne l'avez pas déjà fait, vous serez invité à installer Java 6. Ne vous inquiétez pas, WebStorm prend en charge ce processus pour vous.

Ensuite, vous devez installer Node.js. Node.js est un environnement JavaScript qui fonctionne en dehors du navigateur. J'ai travaillé avec un Node nombre de fois. Installez Node.js en utilisant les paramètres par défaut.

Maintenant, ouvrez une invite de ligne de commande et tapez npm install -g typescript

Le résultat devrait ressembler à ceci :

Une fois le langage TypeScript installé. Nous sommes maintenant prêts à y aller.

Lorsque vous ouvrez un projet avec un fichier TypeScript, un observateur de fichiers doit se lancer automatiquement. Sinon, c'est assez facile d'en définir un.

Sélectionnez File->Settings. (Ce menu est à autre endroit sur Mac OS je crois.)

Sur le côté gauche, recherchez File Watchers :

Sur le côté droit, s'il n'en existe pas pour TypeScript, cliquez sur plus. S'il en existe un, assurez-vous qu'il soit coché.

Ensuite, sélectionnez TypeScript dans la liste :

Les valeurs par défaut devraient être correctes :

Si vous avez des problèmes à ce stade, assurez-vous que Node a été installé correctement et que vous avez installé TypeScript ; ce sont les problèmes les plus communs.

Maintenant, avec un File Watcher de créé, chaque fois que vous enregistrez une modification dans un fichier TS, il compilera le fichier JS automatiquement. Comme ceci :

À ce stade vous serez en mesure de voir pleinement la coloration syntaxique ainsi que la complétion de code :

En outre, vous pouvez définir un point d'arrêt dans WebStorm :

Et en supposant que vous ayez activé le plugin WebStorm, vous pouvez déboguer dans Chrome :

Qui vous permet ensuite d'effectuer les tâches de débogage standard pour WebStorm :

Si vous venez de Visual Studio, il y a une différence majeure qu'il convient de connaître. Dans Visual Studio, l'ajout d'un fichier à votre projet le rend disponible à la complétion de code. Dans WebStorm, ce n'est pas le cas. Si vous incluez une bibliothèque, comme Phaser, vous devez ajouter un référencement au début de votre fichier TS, comme ceci :

/// <reference path="phaser.d.ts" />

Ensuite, la complétion de code fonctionnera correctement.

Je remercie tout d'abord Game From Scratch pour m'avoir autorisé à traduire et publier ses articles ainsi que Claude Leloup pour la relecture orthographique de cet article.

Les commentaires et les suggestions d'amélioration sont les bienvenus, alors, après votre lecture, n'hésitez pas. Commentez1.