Utiliser une source map

Cette page décrit le Débogueur JavaScript tel qu'il apparait dans les versions 52 et plus de Firefox (Firefox Nightly et Firefox Developer Edition).

Pour la documentation sur les versions antérieures (Firefox Beta et Firefox normal), voir Débogueur (avant Firefox 52).

Si vous utilisez Firefox 52 ou plus récent, et que vous avez besoin d'utiliser l'ancien Débogueur, il faut changer la préférence "devtools.debugger.new-debugger-frontend" à false dans about:config.

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

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : maximelore, teoli, franckuser16
 Dernière mise à jour par : maximelore,