Utiliser une source map

Les sources JavaScript exécutées par le navigateur sont souvent différentes des sources originales crées par un développeur. Par exemple :

  • Les sources sont souvent combinées et minifiées afin d'optimiser le temps que met le serveur à les fournir.
  • Le JavaScript d'une page est souvent généré automatiquement. Par exemple lorsqu'il est compilé depuis un langage comme CoffeeScript ou TypeScript.

Dans ces situations, il est bien plus facile de déboguer le code dans son état original plutôt que dans celui utilisé par le navigateur. Une source map est un fichier grâce auquel le débogueur peut faire le lien entre le code étant exécuté et les fichiers sources originaux, permettant ainsi au navigateur de reconstruire la source originale et de l'afficher dans le Débogueur.

Pour activer le débogueur, il est nécessaire de :

  • générer la source map
  • inclure une instruction en commentaire dans le fichier transformé, qui pointe vers la source map. La syntaxe du commentaire est la suivante :
//# sourceMappingURL=http://exemple.com/chemin/vers/votre/sourcemap.map

Dans la vidéo ci-dessus, la page https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html est utilisée. Cette page charge une source nommée "main.js" qui a été écrite en CoffeeScript puis compilée vers JavaScript. La source compilée contient le commentaire suivant qui pointe vers la source map :

//# sourceMappingURL=main.js.map

Dans le panneau des sources, du Débogueur, la source CoffeeScript originale apparait en tant que "main.coffee". Il est alors possible de la déboguer comme n'importe quelle source.