Gardez votre code côté client lisible et débogable, même après l'avoir combiné, réduit ou compilé. Utilisez des cartes sources pour mapper votre code source à votre code compilé dans le panneau Sources.
Premiers pas avec les préprocesseurs
Les cartes sources provenant de préprocesseurs entraînent le chargement de vos fichiers d'origine par les outils de développement, en plus des fichiers réduits.
Chrome exécute votre code réduit, mais le panneau Sources affiche le code dont vous êtes l'auteur. Vous pouvez définir des points d'arrêt et parcourir le code dans les fichiers sources. Tous les erreurs, journaux et points d'arrêt seront automatiquement mappés.
Cela vous donne l'impression de déboguer le code tel que vous l'avez écrit, par opposition au code diffusé par votre serveur de développement et exécuté par le navigateur.
Pour utiliser des mappages sources dans le panneau Sources:
- N'utilisez que les préprocesseurs capables de produire des mappages sources.
- Vérifiez que votre serveur Web peut diffuser des mappages sources.
Utiliser un préprocesseur compatible
Les préprocesseurs courants utilisés avec des mappages sources incluent, sans s'y limiter, les suivants:
- Transpilateurs: Babel
- Compilateurs: TypeScript et Dart
- Réductions: terser
- Bundlers et serveurs de développement: Webpack, Vite, esbuild et Parcel
Pour obtenir la liste complète, consultez Cartes sources: langages, outils et autres informations.
Activer les mappages sources dans les paramètres
Dans Paramètres > Préférences > Sources, veillez à cocher la case
Activer les mappages sources JavaScript.
Vérifier si les mappages sources ont bien été chargés
Consultez Ressources pour les développeurs: Afficher et charger manuellement des cartes sources.
Déboguer avec des mappages sources
Une fois les mappages sources 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 dont vous êtes l'auteur, regroupez les fichiers créés et déployés dans l'arborescence de fichiers. Développez ensuite la section Auteur
et ouvrez le fichier source d'origine dans l'Éditeur.
Définissez un point d'arrêt selon la procédure habituelle. (un point de journalisation, par exemple). Exécutez ensuite le code.
Notez que l'éditeur place un lien vers le fichier déployé dans la barre d'état en bas. Il en va de même pour les fichiers CSS déployés.
Ouvrez le panneau Console. Dans cet exemple, à côté du message du point de journalisation, la console affiche un lien vers le fichier d'origine, et non vers celui déployé.
Remplacez le type de point d'arrêt par un type de point d'arrêt standard et exécutez à nouveau le code. Cette fois, l'exécution s'interrompt.
Notez que le volet Call Stack (Pile d'appel) affiche le nom du fichier d'origine et non celui du fichier déployé.
Dans la barre d'état en bas de l'éditeur, cliquez sur le lien vers le fichier déployé. Le panneau Sources vous redirige vers le fichier correspondant.
Lorsque vous ouvrez un fichier déployé, les outils de développement vous indiquent s'ils ont trouvé le commentaire //# sourceMappingURL et le fichier d'origine associé.
Notez que l'Éditeur a automatiquement mis en forme le fichier déployé. En réalité, il contient tout le code sur une seule ligne, à l'exception du commentaire //# sourceMappingURL.
Nommez les appels eval() avec #sourceURL
#sourceURL vous permet de simplifier le débogage lors du traitement des appels eval(). Cet outil d'aide ressemble beaucoup à la propriété //# sourceMappingURL. Pour en savoir plus, consultez la spécification de la carte source V3.
Le commentaire //# sourceURL=/path/to/source.file indique au navigateur de rechercher le fichier source lorsque vous utilisez eval(). Cela vous permet de nommer vos évaluations, ainsi que les scripts et les styles intégrés.
Testez-la sur cette page de démonstration:
- Ouvrez les outils de développement et accédez au panneau Sources.
- Sur la page, saisissez un nom de fichier arbitraire dans le champ de saisie Attribuer un nom à votre code.
- Cliquez sur le bouton Compile (Compiler). Une alerte s'affiche avec la somme évaluée à partir de la source CoffeeScript.
- Dans l'arborescence de fichiers du volet Page, ouvrez un nouveau fichier portant le nom de fichier personnalisé que vous avez saisi. Il contient le code JavaScript compilé comportant le commentaire
// #sourceURLavec le nom d'origine du fichier source. - Pour ouvrir le fichier source, cliquez sur le lien dans la barre d'état de l'Éditeur.
