Générateur de carte source
Générez des fichiers Source Map v3 à partir de votre source JavaScript d'origine et de sa version réduite ou obscurcie. L'outil tokenise les deux entrées, aligne les jetons correspondants pour créer des mappages de position précis et les code à l'aide de Base64-VLQ pour une carte source JSON valide. Inclut le suivi des identifiants, l'intégration facultative de sourcesContent, la table d'aperçu du mappage et la visionneuse JSON brute. Tout le traitement est local et privé.
Pourquoi utiliser notre générateur de cartes sources ?
- Génération Source Map v3 : générez des fichiers Source Map v3 standard à partir de votre code JavaScript original et minifié. Produit des mappages codés VLQ valides, des références de fichiers source, un tableau de noms et des sourcesContent facultatifs pour une reconstruction complète de la source. Compatible avec les navigateurs, les bundles et les outils de débogage.
- Traitement 100 % local du navigateur : toute la génération de cartes sources s'effectue entièrement dans votre navigateur. Votre code source d'origine et votre JavaScript minifié ne quittent jamais votre appareil. Aucun téléchargement sur aucun serveur, aucune inscription requise et aucune limite d'utilisation. Entièrement gratuit pour toujours.
- Aperçu détaillé du mappage : affichez un tableau de mappage complet montrant chaque position générée et son fichier, ligne et colonne d'origine correspondants. Explorez la carte source brute JSON, inspectez les segments VLQ décodés et vérifiez l'exactitude du mappage avant de télécharger ou de copier.
- Génération instantanée avec statistiques : les cartes sources sont générées en temps réel lorsque vous tapez ou collez du code. Voyez immédiatement combien de mappages ont été créés, la taille du fichier de carte source, le taux de compression, ainsi que le nombre de fichiers source et d'identifiants nommés. Copiez ou téléchargez le fichier .map généré en un seul clic.
Cas d'utilisation courants du générateur de carte source
- Débogage du code de production obscurci : générez des mappages de sources pour vos bundles JavaScript obscurcis afin de pouvoir déboguer les problèmes de production avec les noms de variables, la structure de fichiers et les commentaires d'origine. Connectez la carte source à votre outil de surveillance des erreurs (Sentry, Datadog, New Relic) pour obtenir des traces de pile lisibles à partir d'erreurs de production réduites.
- Intégration du pipeline d'obfuscation : lorsque vous appliquez l'obscurcissement JS (renommage de variable, codage de chaîne, aplatissement du flux de contrôle) dans le cadre de votre pipeline de construction, générez des cartes sources qui mappent la sortie obscurcie au code pré-obscurci. Cela permet le débogage avec un code lisible tout en expédiant du JavaScript protégé.
- Débogage des outils de développement du navigateur : attachez les cartes sources générées à vos bundles JavaScript déployés afin que Chrome DevTools, les outils de développement Firefox et Safari Web Inspector puissent afficher le code source d'origine dans le panneau Sources. Définissez des points d'arrêt, inspectez les variables et parcourez votre code d'origine même lorsque le navigateur exécute du JavaScript minifié.
- Artefacts de carte source CI/CD : générez des cartes sources pendant votre pipeline CI/CD et téléchargez-les sur votre service de suivi des erreurs sans les exposer aux utilisateurs finaux. L'outil vous aide à comprendre le format de la carte source et à tester votre pipeline de génération avant de l'intégrer à vos outils de génération.
- Source Map Format Éducation et recherche : comprenez le fonctionnement de Source Map v3 en visualisant les mappages codés VLQ générés en temps réel à partir de votre propre code. L'outil est excellent pour en savoir plus sur le format de carte source, l'encodage VLQ, les mappages ligne/colonne et la façon dont les noms et les sources sont référencés.
- Désobfuscation manuelle de la trace de pile : si vous avez une trace de pile de production obscurcie/minifiée mais que vous avez perdu vos mappages sources, reconstruisez manuellement le mappage en collant votre code original et minifié. La carte source générée peut être utilisée avec Source Map Unminifier pour récupérer les positions exactes du code d'origine.
Qu'est-ce qu'une carte source ?
Une carte source est un fichier qui mappe le code transformé, réduit ou obscurci à sa source d'origine. Le format Source Map v3 utilise le codage Base64-VLQ (Variable length Quantity) pour stocker les mappages de position de manière compacte. Chaque mappage enregistre la ligne/colonne générée et son fichier, ligne et colonne d'origine correspondants, ainsi qu'un nom d'identifiant facultatif. Lorsqu'un navigateur ou un débogueur charge une carte source avec du code minifié, il peut afficher le code source d'origine avec les noms de variables, l'organisation des fichiers et les commentaires corrects, ce qui rend le débogage du code de production réalisable.
Comment fonctionne notre générateur de cartes sources
- Saisissez le code original : collez votre code source JavaScript original et lisible dans le panneau de gauche. Il s'agit de la version pré-minification/pré-obscurcissement à partir de laquelle vous souhaitez effectuer le mappage.
- Saisir du code minifié/obscurci : collez votre code JavaScript minifié ou obscurci dans le panneau de droite. Le générateur comparera chaque position de ligne et de caractère pour créer des mappages précis entre les deux versions.
- Génération de carte source : l'outil génère un fichier JSON Source Map v3 valide contenant des mappages codés en VLQ, une liste de fichiers source, un tableau de noms pour les identifiants et éventuellement le contenu source d'origine complet (sourcesContent) pour une reconstruction complète. Vous pouvez copier le JSON ou le télécharger sous forme de fichier .map.
Détails du format de la carte source v3
- Version : le format de la carte source est actuellement à la version 3, définie par la spécification de la carte source. Le champ version est toujours 3 .
- Mappages : le champ de mappages contient des chaînes codées en VLQ séparées par des points-virgules (pour les sauts de ligne) et des virgules (pour les segments individuels d'une ligne). Chaque segment code jusqu'à 5 valeurs : colonne générée, index source, ligne d'origine, colonne d'origine et index de nom, tous stockés sous forme de décalages relatifs pour une compression optimale.
- Sources : un tableau de chemins de fichiers source d'origine référencés par index dans les mappages. Vous pouvez spécifier des noms de fichiers source personnalisés pour la structure de votre projet.
- Noms : un tableau de noms d'identifiants (noms de variables, noms de fonctions, etc.) qui apparaissent à la fois dans le code d'origine et généré, référencés par index dans les mappages.
- sourcesContent : un tableau facultatif contenant le code source original complet pour chaque fichier source. Lorsqu'ils sont présents, les débogueurs peuvent afficher le code original exact sans avoir besoin d'accéder aux fichiers originaux sur le disque.
- Encodage VLQ : Base64-VLQ est un encodage compact à longueur variable où chaque caractère représente 6 bits (0-63). Le bit de continuation (bit 6) signale si d'autres caractères suivent pour la même valeur. Le signe est codé comme le bit le moins significatif (1 = négatif, 0 = positif), permettant des décalages négatifs dans les mappages relatifs.
Confidentialité, sécurité et disponibilité
Votre code JavaScript est entièrement traité dans votre navigateur. Aucun code n'est jamais téléchargé sur un serveur, stocké, enregistré ou partagé avec des tiers. L'outil ne nécessite aucune création de compte, aucune inscription et n'impose aucune limite de taille de code. Il est entièrement gratuit, sans niveaux premium, plafonds d'utilisation ou frais cachés. Vous pouvez l'utiliser aussi souvent que nécessaire pour générer des cartes sources, pour le débogage ou à des fins éducatives.
Foire aux questions
Une carte source est un fichier qui mappe le code JavaScript transformé, réduit ou obscurci à sa source d'origine. Il permet aux débogueurs et aux outils de surveillance des erreurs d'afficher le code source original même lorsque le navigateur exécute du JavaScript minifié. La génération de cartes sources est essentielle pour déboguer le JavaScript de production, s'intégrer aux services de suivi des erreurs comme Sentry et maintenir la productivité des développeurs lors du déploiement de code optimisé.
Source Map v3 est le format standard actuel pour les cartes sources. Il utilise le codage Base64-VLQ (Variable length Quantity) pour stocker les mappages de position de manière compacte. Le format comprend : la version (toujours 3), le fichier (nom du fichier de sortie), les sources (chemins du fichier source d'origine), les noms (noms d'identifiant), les mappages (données de position codées VLQ), sourcesContent (code source d'origine facultatif) et sourceRoot (préfixe de chemin facultatif). L'encodage VLQ permet à chaque segment de mappage de représenter jusqu'à 5 valeurs (colonne générée, index source, ligne d'origine, colonne d'origine, index de nom) en utilisant des décalages relatifs pour une compression optimale.
Le codage VLQ (Variable length Quantity) représente les nombres utilisant un nombre variable de caractères Base64. Chaque caractère code 6 bits, le 6ème bit (bit de continuation) indiquant si la valeur continue dans le caractère suivant. Le signe est codé dans le bit de poids faible (0 = positif, 1 = négatif). Cela permet aux petits nombres (qui sont courants dans les décalages de position de la carte source) d'être codés avec seulement 1 à 2 caractères, tandis que les nombres plus grands peuvent utiliser plus de caractères.
Le générateur fonctionne en tokenisant à la fois le code JavaScript original et minifié, puis en alignant les jetons par valeur de contenu pour créer des mappages de position. Pour chaque jeton correspondant, il enregistre la position de ligne/colonne générée et le fichier, la ligne et la colonne d'origine correspondants. Les identifiants (noms de variables, noms de fonctions) sont suivis dans le tableau des noms. Les mappages sont codés en Base64-VLQ avec des décalages relatifs pour une compression maximale selon la spécification Source Map v3.
sourcesContent est un champ facultatif dans la carte source qui intègre le code source original complet pour chaque fichier référencé. Lorsqu'ils sont inclus, les débogueurs et les outils de désobscurcissement peuvent afficher le code original exact sans avoir besoin d'accéder aux fichiers originaux sur le disque ou à une connexion réseau. L'inconvénient est que cela augmente la taille du fichier de carte source puisque la source d'origine est intégrée en ligne.
Oui. Les cartes sources générées sont entièrement compatibles avec Chrome DevTools, Firefox Developer Tools et Safari Web Inspector. Pour utiliser une carte source, placez le fichier .map à côté de votre fichier JavaScript (par exemple, script.js et script.js.map), ajoutez un commentaire //# sourceMappingURL=script.js.map à la fin de votre fichier JavaScript ou intégrez la carte source en tant qu'URL de données.
Le générateur gère cela automatiquement. Les mappages sources sont conçus pour mapper du code qui peut avoir des structures de lignes complètement différentes. Le générateur crée des mappages pour chaque jeton correspondant, enregistrant la ligne/colonne d'origine exacte pour chaque position générée. Les lignes sans mappage d'origine correspondant n'ont tout simplement aucune entrée de mappage, ce qui est valide selon la spécification.
Absolument. Toute génération de carte source s'effectue entièrement dans votre navigateur. Votre code source d'origine et votre JavaScript minifié ne quittent jamais votre appareil et ne sont jamais envoyés à aucun serveur. Aucun compte n'est requis, aucune donnée n'est stockée et aucun suivi n'a lieu. Cela rend l'outil sûr pour générer des cartes sources pour le code JavaScript propriétaire, les applications commerciales ou les projets sensibles à la sécurité.
Les bundles tels que Webpack, Rollup, Vite et ESBuild génèrent automatiquement des cartes sources pendant le processus de construction. Cet outil est conçu pour les cas où vous devez générer une carte source séparément — par exemple, si vous avez perdu vos cartes sources d'origine, si vous avez une obfuscation personnalisée que votre bundler ne prend pas en charge, si vous souhaitez comprendre le format de la carte source ou si vous devez créer une carte source pour des scripts minifiés ou concaténés manuellement.
Oui, 100% gratuit. Il n'y a pas d'inscription, pas de niveau premium, pas de limites d'utilisation et pas de limite de taille de code. L'outil fonctionne entièrement dans votre navigateur et sera toujours libre d'utilisation sur Aback Tools.