Assurez-vous que votre code côté client soit lisible et débogable même après l'avoir combiné, réduit ou compilé. Utilisez les cartes sources pour mapper votre code source au code compilé dans le panneau Sources.
Premiers pas avec les préprocesseurs
Les cartes sources issues de préprocesseurs permettent aux outils de développement de charger vos fichiers d'origine en plus de ceux dont la taille a été réduite.
Chrome exécute votre code réduit, mais le panneau Sources affiche le code dont vous êtes l'auteur. Vous pouvez définir des points d'arrêt et parcourir le code dans les fichiers sources. L'ensemble des erreurs, des journaux et des points d'arrêt seront automatiquement mappés.
Vous avez ainsi l'impression de déboguer le code tel que vous l'avez écrit, par opposition au code qui est diffusé par votre serveur de développement et exécuté par le navigateur.
Pour utiliser les cartes sources dans le panneau Sources:
- N'utilisez que les préprocesseurs pouvant générer des cartes sources.
- Vérifiez que votre serveur Web peut diffuser des cartes sources.
Utiliser un préprocesseur compatible
Les préprocesseurs courants utilisés en combinaison avec des mappages sources incluent, sans s'y limiter:
- Transpilateurs: Babel
- Compilateurs: TypeScript et Dart
- Minificateurs: terser
- Bundlers et serveurs de développement: Webpack, Vite, esbuild et Parcel
Pour en obtenir une liste complète, consultez Cartes sources: langues, outils et autres informations.
Activer les cartes sources dans les paramètres
Dans 
Paramètres > Préférences > Sources, veillez à cocher la case 
Activer les mappages sources JavaScript.
Vérifier si les cartes sources ont bien été chargées
Consultez Ressources pour les développeurs: Afficher et charger manuellement des mappages sources.
Déboguer avec des cartes sources
Une fois les cartes sources prêtes et activées, vous pouvez effectuer les opérations suivantes:
- Ouvrez les sources de votre site Web dans le panneau Sources.
Pour vous concentrer uniquement sur le code que vous créez, regroupez les fichiers créés et déployés dans l'arborescence de fichiers. Développez ensuite la section
Authored (Auteur) et ouvrez le fichier source d'origine dans l'éditeur.
Définissez un point d'arrêt selon la procédure habituelle. Par exemple, un point de journalisation. Ensuite, exécutez le code.
Notez que l'éditeur place un lien vers le fichier déployé dans la barre d'état en bas de l'écran. Il en va de même pour les fichiers CSS déployés.
Ouvrez le panneau Console. Dans cet exemple, à côté du message du point de journalisation, la console affiche un lien vers le fichier d'origine, et non vers le fichier déployé.
Définissez le type de point d'arrêt sur standard, puis exécutez à nouveau le code. L'exécution est suspendue cette fois-ci.
Notez que le volet Call Stack (Pile d'appel) affiche le nom du fichier d'origine et non celui du fichier déployé.
Dans la barre d'état en bas de l'éditeur, cliquez sur le lien vers le fichier déployé. Le panneau Sources affiche le fichier correspondant.
Lorsque vous ouvrez un fichier déployé, les outils de développement vous indiquent s'ils ont trouvé le commentaire //# sourceMappingURL et le fichier d'origine associé.
Notez que l'éditeur a automatiquement mis en forme le fichier déployé. En réalité, tout le code se trouve sur une seule ligne, à l'exception du commentaire //# sourceMappingURL.
Donnez un nom aux appels de eval() avec #sourceURL
#sourceURL vous permet de simplifier le débogage lors du traitement des appels eval(). Cet outil d'aide ressemble beaucoup à la propriété //# sourceMappingURL. Pour en savoir plus, consultez la spécification de la carte source V3.
Le commentaire //# sourceURL=/path/to/source.file indique au navigateur de rechercher le fichier source lorsque vous utilisez eval(). Cela vous permet de nommer vos évaluations et vos scripts et styles intégrés.
Faites un test sur cette page de démonstration:
- Ouvrez les Outils de développement, puis accédez au panneau Sources.
- Sur la page, saisissez un nom de fichier arbitraire dans le champ de saisie Name your code (Nom du code :).
- Cliquez sur le bouton Compiler. Une alerte s'affiche avec la somme évaluée à partir de la source CoffeeScript.
- Dans l'arborescence de fichiers du volet Page, ouvrez un nouveau fichier portant le nom de fichier personnalisé que vous avez saisi. Il contient le code JavaScript compilé qui comporte le commentaire
// #sourceURLavec le nom d'origine du fichier source. - Pour ouvrir le fichier source, cliquez sur le lien dans la barre d'état de l'Éditeur.
