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

Sofia Emelianova
Sofia Emelianova

Les maquettes de code source 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.

Code minimisé et code d'origine.

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

Une carte source.

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 points d'arrêt.

Utilisation de points d'arrêt dans DevTools dans un fichier source créé

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 :