Gardez votre code côté client lisible et débogable, même après l'avoir combiné, minifié ou compilé. Utilisez des mappages source pour mapper votre code source à votre code compilé dans le panneau Sources.
Premiers pas avec les préprocesseurs
Les mappages source des préprocesseurs font en sorte que DevTools charge vos fichiers d'origine en plus de vos fichiers minimisés.
Chrome exécute en réalité votre code minifié, mais le panneau Sources affiche le code que vous avez créé. Vous pouvez définir des points d'arrêt et parcourir le code dans les fichiers sources. Toutes les erreurs, les journaux et les 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 des cartes sources dans le panneau Sources:
- N'utilisez que les préprocesseurs pouvant générer des mappages de sources.
- Vérifiez que votre serveur Web peut diffuser des cartes sources.
Utiliser un préprocesseur compatible
Voici quelques exemples de préprocesseurs couramment utilisés avec les mappages de sources:
- Transpileur: Babel
- Compilateurs: TypeScript et Dart
- Minificateurs: terser
- Bundlers et serveurs de développement: Webpack, Vite, esbuild et Parcel
Pour obtenir une liste plus complète, consultez Cartes sources: langues, outils et autres informations.
Activer les cartes sources dans les paramètres
Dans 
Settings > Preferences > Sources (Paramètres > Préférences > Sources), assurez-vous de cocher 
JavaScript source maps (Cartes sources JavaScript).
Vérifier si les cartes sources ont bien été chargées
Consultez Ressources pour les développeurs: afficher et charger manuellement des cartes sources.
Déboguer avec des mappages de sources
Lorsque les cartes sources sont prêts et activés, 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, groupez les fichiers créés et déployés dans l'arborescence de fichiers. Développez ensuite la section
Auteur et ouvrez votre fichier source d'origine dans l'Éditeur.