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

Sofia Emelianova
Sofia Emelianova

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

Lorsque vous utilisez différents transpileurs, minimateurs et bundlers, le code que vous déployez diffère de celui 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 réduit et code d'origine.

De nombreux outils permettent de générer des mappages source pour accompagner votre code.

Un mappage source.

Les outils pour les développeurs Chrome lit à la fois le code déployé et les cartes 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 l'outil de visualisation des cartes sources.

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: Better Angular Debugging with DevTools (Améliorer le débogage Angular avec les outils de développement), dans laquelle l'équipe DevTools et Angular ont amélioré l'expérience de débogage dans les outils de développement en prenant en charge l'extension x_google_ignoreList.

Pour en savoir plus, consultez les sections suivantes :