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

Sofia Emelianova
Sofia Emelianova

Les cartes sources vous permettent de rendre votre code lisible et débogable, même après l'avoir combiné et réduit, sans nuire aux performances.

Lorsque vous utilisez divers transpilateurs, réducteurs et bundlers, le code que vous déployez diffère de celui dont vous êtes l'auteur. Pour améliorer les performances du réseau, ces outils compressent le code sur une seule ligne, suppriment les caractères inutiles et raccourcissent les variables.

Code réduit et celui 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 mappages sources, et vous permettent de déboguer votre code comme vous le feriez normalement, même avec des points d'arrêt.

Utiliser des points d'arrêt dans les outils de développement dans un fichier source créé

Pour mieux comprendre le fonctionnement des cartes sources, consultez notre outil Source Map Visualizer.

De plus, les mappages sources peuvent comporter des extensions. Si vous créez des outils et des cadres, envisagez de les soutenir. Consultez cette étude de cas: Better Angular Debugging with 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 :