Explorateur de Source Maps

Ce qu'une source map enregistre réellement

Un fichier .map ne contient pas votre code d'origine. Presque toujours, il ne contient qu'une seule chose : une table compacte de positions — « la ligne 2, colonne 4110 générée vient de app.js ligne 88, colonne 12, et l'identifiant à cet endroit s'appelait total ». Certaines source maps vont plus loin et intègrent aussi le texte complet du fichier d'origine (sourcesContent), mais ce champ est facultatif, et de nombreuses source maps de production — y compris, justement, celle de jQuery — sont publiées sans lui.

Cet outil lit cette table directement, dans votre navigateur, pour que vous puissiez la vérifier contre la réalité plutôt que de croire ce qu'un outil de build affirme avoir généré.

Ce que vous pouvez faire ici

• Charger un fichier .map. Vous verrez immédiatement chaque chemin de source qu'il liste, organisé en arborescence, ainsi qu'un décompte du nombre de correspondances qu'il contient.
• Ajouter le .js généré auquel il appartient (facultatif, mais utile). Avec lui, une recherche par ligne/colonne affiche aussi le code généré exact autour de la position interrogée, et cliquer sur une ligne de cet extrait remplit automatiquement le champ ligne.
• Rechercher n'importe quelle position générée. Les lignes commencent à 1 et les colonnes à 0, exactement comme le définit la spécification des source maps — la même convention utilisée en interne par Chrome DevTools et tout outil JS. Tous les octets d'un bundle ne sont pas forcément mappés : le code d'amorçage, l'enveloppe de module et la sortie du minifieur entre deux jetons n'ont souvent aucune correspondance, et cet outil le signale clairement plutôt que de deviner.
• Lire la source d'origine, quand elle est disponible. Cliquez sur n'importe quel fichier de l'arborescence pour voir son sourcesContent intégré. Quand une source n'a pas de texte intégré — la correspondance existe, mais pas le texte — un avis explicite s'affiche au lieu d'un panneau vide qui ferait croire qu'il n'y avait rien à montrer.

Pourquoi c'est important

Les source maps sont ce qui transforme une trace d'erreur pointant vers bundle.min.js:2:184031 en une trace pointant vers src/components/Cart.jsx:41. Quand cette traduction semble fausse — une erreur signalée sur une ligne qui n'a pas de sens, un débogueur qui entre dans le mauvais fichier — le moyen le plus rapide de savoir si la source map est cassée ou si c'est votre modèle mental qui l'est, c'est de demander directement à la source map. C'est exactement ce que fait cet outil.

Confidentialité

Les deux fichiers sont analysés entièrement dans votre navigateur. Rien n'est envoyé où que ce soit.