Une des bonnes pratiques afin d’améliorer les performances d’un site est la minification des fichiers CSS et JavaScript. Cependant, une fois en production, il peut s’avérer pratique de déboguer vos scripts JS avec les barres d’outils des navigateurs. Le débogage d’un fichier minifié n’est pas aisé, le fichier source étant compilé pour prendre le moins de place et le fichier résultant est loin d’être facile à lire (suppression des espaces, des retours à la ligne, renommage des variables, …). C’est là qu’intervient Source Map. Cette fonctionnalité est apportée par Chrome (et en cours d’implémentation sur les autres navigateurs) et permet en débogage d’avoir accès au fichier source (qui doit être présent sur le serveur bien entendu) et non au fichier minifié.
Normalement, lors de la minification d’un fichier, il n’y a qu’un seul fichier en sortie.
Avec cette technique, 2 fichiers sont générés :
- li fichier minifié auquel un commentaire est ajouté en fin de fichier indiquant l’URL du fichier .map
- un fichier .map : il s’agit d’un fichier JSON qui permet au navigateur de pouvoir savoir où sont les fichiers sources notamment
Actuellement peu de minifieur permettent cette génération :
- Closure : un compilateur JavaScript par Google
- GWT : L’outil de Google permettant de créer des applications web dynamiques JavaScript à partir de Java
- UglifyJS.
Travaillant dans le monde .NET, je vais présenter l’extension Visual Studio Web Essentials 2012 qui permet cette génération. Pour cet article, nous utiliserons le code de mon application de démo concernant Knockout. A l’origine, la page contient des références vers JQuery et Knockout ainsi que le code de la page inclus directement dans le fichier HTML (c’est mal je sais mais c’était pour l’exemple). J’ai externalisé ce code dans un fichier js que j’ai nommé volley.js. Ce fichier fait 5.7ko et le fichier minifié 2.5ko soit 43% de gain.
Génération via Web Essentials
La minification se fait en faisant un clic droit sur le fichier JavaScript à minifier. Un menu Web Essentials a été rajouté et il faut cliquer sur Minify JavaScript File(s).
Les 2 fichiers volley.min.js et volley.min.js.map sont générés.
Le fichier volley.min.js contient le code minifié du fichier volley.js et le commentaire permettant de faire le lien avec le fichier .map.
Le fichier volley.min.js.map est un objet JSON contenant notamment une propriété sources qui contient la liste des fichiers sources composant le fichier minifié.
Il me suffit de remplacer l’inclusion de mon fichier non minifié
<script src="include/volley.js"></script>
par celui minifié dans mon code HTML
<script src="include/volley.min.js"></script>
A Noter que Web Essentials permet de créer des bundles de fichiers JavaScript. Un bundle concaténera plusieurs fichiers dans un seul fichier. L’ensemble des fichiers concaténés sera disponible au débogage.
L’avantage de Web Essentials est que vos fichiers minifiés et les bundles sont mis à jour dès qu’un fichier source est modifié.
Débogage
Comme je le disais auparavant, aujourd’hui seulement Chrome supporte cette fonctionnalité et celle-ci doit être activée dans les préférences de barre d’outils de développement.
Ainsi, sans l’option activée, le code affiché dans le débogueur est le code minifié.
L’activation se fait en allant dans les réglages de la Chrome Developer Toolbar (bouton en bas à droite) et il suffit de cocher l’option Enable source maps.
On peut maintenant accéder au code source du fichier d’origine et effectuer du débogage (points d’arrêts, pas à pas, …).
Voici le lien vers la démo du mon application développée avec knockout, avec le fichier volley.js utilisant cette technique.
Ressources
Conclusion
Cette technique s’avère très utile et il faut espérer que les navigateurs et les minifieurs prendront en compte cette technique afin de facilité le débogage JavaScript. Cette fonctionnalité permettra, dans le futur, le débogage de CoffeeScript ou autre langage générant du JavaScript, LESS/SASS …
Tweet