Conseils concernant les outils de développement: que sont les cartes sources ?

Sofia Emelianova

Les maps sources vous permettent de conserver votre code lisible et débogable même après l'avoir combiné et minifié, sans affecter les performances.

Lorsque vous utilisez différents transpilateurs, minificateurs et bundleurs, le code que vous déployez diffère du code que vous créez. Pour améliorer les performances du réseau, ces outils compressent le code en une seule ligne, suppriment les caractères inutiles et raccourcissent les variables.

De nombreux outils peuvent générer des cartes sources pour accompagner votre code.

Les outils pour les développeurs Chrome lisent à la fois le code déployé et les maps de sources, et vous permettent de déboguer votre code comme vous le feriez normalement, même avec des breakpoints.

Pour mieux comprendre le fonctionnement des mappages source, consultez le visualiseur de mappages source.

De plus, les cartes sources peuvent comporter des extensions. Si vous créez des outils et des frameworks, envisagez de les prendre en charge. Consultez cette étude de cas: Mieux déboguer Angular avec DevTools, dans laquelle l'équipe DevTools et Angular ont amélioré l'expérience de débogage dans DevTools en prenant en charge l'extension x_google_ignoreList.

Pour en savoir plus, consultez les sections suivantes :

• Présentation des mappages source JavaScript
• Que sont les mappages source ?
• Déboguer votre code d'origine au lieu de le déployer avec des mappages sources