Mise en place du débogage pour TypeScript

Les source maps avec Visual Studio et WebStorm

Game From Scratch

Traducteur

Yahiko

Cet article décrit comment mettre en place le mécanisme de débogage pour TypeScript avec Visual Studio et WebStorm, et sous Internet Explorer, Chrome et Firefox en utilisant les source maps. À ce titre, certains qui utilisent un autre langage Web que TypeScript (comme Dart ou CoffeeScript) peuvent également être intéressés par le contenu de cet article.

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

- Titre : Mise en place du débogage pour TypeScript

- Auteur : Game From Scratch

- Traducteur : Yahiko

- Parution : 22 octobre 2014

- Licence : Copyright ® 2014 Game From Scratch. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Avant-propos

- II. TypeScript et Visual Studio

- II-A. Sous Firefox ou Chrome

- II-B. Source Map avec Chrome

- II-C. Source Map avec Firefox

- II-D. Bilan TypeScript et Visual Studio

- III. TypeScript et WebStorm

- IV. Remerciements

I - Avant-propos

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.

II - TypeScript et Visual Studio

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

Si vous travaillez dans Visual Studio 2013, le débogueur VS fonctionne parfaitement avec Internet Explorer.

Si vous voulez travailler dans un autre navigateur avec TypeScript, utilisez les source maps si vous ne voulez pas travailler avec le code JavaScript généré. En termes de navigateurs, Firefox gère les source maps beaucoup mieux que Chrome.

Maintenant, un autre piège qui m'a demandé un peu de temps pour m'en sortir. Lorsque vous créez une source map, elle est ajoutée à la fin du fichier JavaScript généré (app.js dans cet exemple), comme ceci :

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

Voici le piège, vous ne pouvez pas utiliser ce chemin absolu ni dans Chrome, ni dans Firefox, car vous n'obtiendrez tout simplement pas la source map dans aucun navigateur. À la place, modifiez le chemin et utilisez des chemins relatifs :

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

Et l'affaire est réglée.

III - TypeScript et WebStorm

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.

IV - Remerciements

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. Commentez.