Files, Binary & Compression

Décodeur de source mappour retrouver la ligne d’origine d’une erreur

Collez un fichier .map (ou un JS avec une map inline), puis saisissez ligne:colonne ou une stack trace complète pour voir le fichier, la ligne et le code d’origine.

Analyse autoExemple :

Source map

{
  "version": 3,
  "sources": [
    "webpack://shop/./src/format.ts",
    "webpack://shop/./src/cart.ts",
    "webpack://shop/./src/main.ts"
  ],
  "sourcesContent": [
    "export function formatPrice(value: number): string {\n  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);\n}\n",
    "import { formatPrice } from './format';\n\nexport interface LineItem {\n  sku: string;\n  price: number;\n  quantity: number;\n}\n\nexport function cartTotal(items: LineItem[]): string {\n  const sum = items.reduce((acc, item) => acc + item.price * item.quantity, 0);\n  const discount = items[0].coupon.percent / 100;\n  return formatPrice(sum * (1 - discount));\n}\n",
    "import { cartTotal } from './cart';\n\nconst cart = JSON.parse(localStorage.getItem('cart') ?? '[]');\ndocument.querySelector('#total')!.textContent = cartTotal(cart);\n"
  ],
  "mappings": "MAAO,SAASA,EAAYC,EAAuB,CACjD,OAAO,IAAI,KAAK,aAAa,QAAS,CAAE,MAAO,WAAY,SAAU,KAAM,CAAC,EAAE,OAAOA,CAAK,CAC5F,CCMO,SAASC,EAAUC,EAA2B,CACnD,IAAMC,EAAMD,EAAM,OAAO,CAACE,EAAKC,IAASD,EAAMC,EAAK,MAAQA,EAAK,SAAU,CAAC,EACrEC,EAAWJ,EAAM,CAAC,EAAE,OAAO,QAAU,IAC3C,OAAOK,EAAYJ,GAAO,EAAIG,EAAS,CACzC,CCVA,IAAME,EAAO,KAAK,MAAM,aAAa,QAAQ,MAAM,GAAK,IAAI,EAC5D,SAAS,cAAc,QAAQ,EAAG,YAAcC,EAAUD,CAAI",
  "names": [
    "formatPrice",
    "value",
    "cartTotal",
    "items",
    "sum",
    "acc",
    "item",
    "discount",
    "formatPrice",
    "cart",
    "cartTotal"
  ],
  "file": "app.js"
}

Positions générées (ligne:colonne ou stack trace)

Analysé dans cet onglet. Les sources distantes et les sourceMappingURL externes ne sont jamais téléchargées.

Résultat

LocaliserSourcesMappings

Saisie modifiée — analyse automatique…

Colonnes à partir de 1

Le rapport d’erreur de production indique seulement app.3f2a.js:1:20931 : ligne un, colonne vingt mille d’un bundle minifié. Le fichier .js.map produit par le même build sait exactement de quelle ligne de quel fichier .ts ou .jsx il s’agit, mais ses mappings sont encodés en Base64 VLQ, illisibles à l’œil nu. Pour décoder une source map et y chercher une position, ce décodeur de source map fait le travail à votre place, sans écrire de script jetable autour de la bibliothèque source-map.

Il sert quand l’outil de suivi d’erreurs n’a pas reçu les maps, quand vous n’avez que les artefacts de la CI, ou quand il faut vérifier qu’une map correspond bien au bundle livré. Il permet aussi de lire un fichier .js.map pour lui-même : quelles sources il liste, lesquelles ont un sourcesContent, lesquelles sont dans l’ignoreList, et si la chaîne mappings est valide. Contrairement aux services qui décodent la map sur un serveur, rien n’est envoyé et aucune URL distante n’est appelée.

Pourquoi utiliser ce décodeur de source map

Il répond à la vraie question — quelle ligne d’origine est-ce ? — pour toutes les frames d’un coup, et signale quand la réponse n’est qu’approximative.

Collez toute la stack trace, pas une position à la fois

Chaque ligne qui se termine par :ligne:colonne est cherchée dans la map : fichier, ligne et colonne d’origine, nom de l’identifiant d’origine et quelques lignes de code autour. Les frames qui viennent d’un autre fichier que celui décrit par la map sont signalées, pour qu’une frame du bundle vendor ne soit pas résolue en silence avec la map de votre application.

Lire les règles de localisation

Une stack trace minifiée à gauche ; à droite, chaque frame résolue vers un fichier TypeScript d’origine et sa ligne, avec le code correspondant surligné.

Voir et récupérer les sources que contient la map

La vue Sources liste chaque entrée de sources avec le sourceRoot appliqué, indique celles qui ont un sourcesContent et celles de l’ignoreList, et affiche le code intégré avec les numéros de ligne. Un clic enregistre un fichier, ou toutes les sources intégrées dans un zip qui garde l’arborescence — utile quand la map est la dernière copie du code d’origine.

Essayer dans l’outil

La liste des fichiers source d’une map, certains marqués sans contenu, à côté d’un fichier TypeScript restauré avec numéros de ligne et un bouton de téléchargement zip.

Trois détails pour tomber sur la bonne ligne

Donnez la map sous la forme que vous avez

Collez le JSON du .map, ouvrez ou déposez le fichier, ou collez directement le fichier JS ou CSS compilé : s’il se termine par un commentaire //# sourceMappingURL=data:…, la map inline est extraite et décodée (Base64 et encodage URL). Si le commentaire pointe vers une URL classique, elle est affichée mais pas téléchargée : ouvrez alors ce fichier .map ici.

La première ligne anti-XSSI )]}' et un BOM UTF-8 sont retirés automatiquement : une map enregistrée depuis une réponse serveur se colle telle quelle.

Vérifiez à partir de quel chiffre comptent les colonnes

Les positions acceptent 12:345, « 12 345 » ou une frame complète comme at n (https://example.com/app.js:1:177). Les colonnes commencent à 1 par défaut, comme dans les stack traces de Chrome, Firefox et Node. Si votre colonne vient de la bibliothèque mozilla/source-map ou d’un champ qui commence à 0, désactivez « Colonnes à partir de 1 », sinon chaque résultat est décalé d’un caractère.

Les lignes sans ligne:colonne, comme le message d’erreur en tête de stack trace, sont ignorées et comptées au lieu de faire échouer la recherche.

Regardez le type de correspondance, puis remontez dans l’autre sens

Une correspondance exacte signifie qu’un segment commence à cette colonne ; sinon le segment le plus proche à gauche est utilisé et le résultat le précise — la même règle que le navigateur et la bibliothèque source-map. « Ouvrir dans Sources » saute à la ligne d’origine, où le champ Ligne d’origine liste toutes les positions générées qui y renvoient.

Quand l’analyse automatique est désactivée, Ctrl/Cmd+Entrée lance l’analyse et la recherche depuis n’importe où dans le panneau.

Ce que le décodeur met à plat

Chaque segment de mapping décodé

La vue Mappings transforme la chaîne VLQ en lignes « ligne:colonne générée → source, ligne:colonne d’origine, nom », 100 à la fois, et exporte la table complète en TSV pour un tableur ou un diff.

De la ligne d’origine au code généré

Choisissez une source et une ligne d’origine pour lister toutes les positions générées qui y renvoient — pratique pour voir si une ligne a été inlinée, dupliquée ou supprimée par le minifieur.

Maps inline, indexées et ignoreList

Les URL data: inline, les maps indexées avec sections et offset, la concaténation du sourceRoot, ainsi que ignoreList et l’ancien x_google_ignoreList sont pris en charge, pour distinguer le code du framework du vôtre.

Des erreurs qui pointent le segment cassé

Un JSON invalide est signalé avec sa ligne et sa colonne ; un caractère VLQ invalide, un segment au mauvais nombre de champs ou un index de source ou de nom hors limites indique la ligne générée et le segment concernés.

Ce qu’il fait, et ce qu’il ne fait pas

Rien n’est téléchargé: Les liens sourceMappingURL externes, les entrées http(s) de sources et les sections indexées qui référencent une URL sont affichés mais jamais demandés. La map, ses sources et votre stack trace restent dans cet onglet et ne sont écrites ni dans l’URL ni dans le stockage local.
Version 3 uniquement, jusqu’à 50 Mo: Seule la Source Map v3 est acceptée ; la version 2 ou un fichier sans version est refusé avec un message. Au-delà de 50 Mo, l’entrée est rejetée, et une très grosse map peut figer la page un instant pendant le décodage.
La recherche se cale à gauche, jamais à droite: Si aucun segment ne commence à une colonne, le résultat prend le plus proche avant elle et le marque comme approximatif. Une colonne dans du code ajouté par le bundler renvoie « segment sans position d’origine » au lieu d’inventer une position voisine.
Pas de sourcesContent, pas de code: Si la map a été générée sans sourcesContent, la recherche donne toujours le chemin et la position d’origine, mais aucun extrait, aperçu ni entrée de zip n’est possible : le texte d’origine n’est tout simplement pas dans le fichier.
Une map par recherche: Chaque map ne décrit que son propre bundle. Les frames d’autres fichiers sont signalées mais quand même recherchées : lisez l’avertissement avant de vous y fier. Visualiser une source map segment par segment en couleurs, la modifier ou fusionner des maps sort du périmètre.

Questions fréquentes sur le décodeur de source map

À quoi servent les fichiers en *.js.map ?

Ce sont des source maps : elles relient chaque position du JavaScript compilé et minifié à une position du code source d’origine. Les outils de développement du navigateur s’en servent pour afficher votre code réel dans le débogueur et les stack traces. Collez-en une dans le décodeur de source map ci-dessus pour voir ce qu’elle contient.

Qu’est-ce que les source maps et comment fonctionnent-elles ?

Une source map est un fichier JSON : sources liste les fichiers d’origine, names les identifiants, et mappings encode les correspondances — lignes séparées par des points-virgules, segments par des virgules, chaque segment étant une suite de différences en Base64 VLQ. La vue Mappings de l’outil déplie cette chaîne en tableau lisible.

Comment retrouver la ligne et la colonne d’origine d’une erreur dans du JavaScript minifié ?

Saisissez la ligne:colonne, ou collez toute la stack trace, dans le champ des positions. Les colonnes commencent à 1 par défaut, comme dans les stack traces des navigateurs. Si aucun segment ne commence à cette colonne, le plus proche à gauche est utilisé et le résultat est marqué comme approximatif.

Une source map en production, est-ce dangereux pour le code source ?

Une map publique qui contient sourcesContent rend votre code d’origine, commentaires compris, lisible par tous. Beaucoup d’équipes n’envoient donc les maps qu’à leur outil de suivi d’erreurs ou les servent derrière une authentification. Les examiner ici n’ajoute aucun risque : tout est décodé localement dans le navigateur.

Comment reconstituer le code source à partir d’un fichier .map ?

C’est possible si la map contient sourcesContent, qui stocke le texte complet de chaque fichier. Ouvrez la vue Sources pour lire et enregistrer chaque fichier, ou téléchargez-les tous dans un zip qui conserve l’arborescence. Sans sourcesContent, la map ne contient que des chemins et des positions, et le code ne peut pas en être tiré.

Toujours une question ?

Ouvrez votre map dans le décodeur de source map

Déposez le fichier .map du dernier build, collez la stack trace du rapport de bug : le décodeur de source map vous montre la ligne d’origine en quelques secondes.

Retour à l'outil Voir tous les outils

Tout se passe localement dans votre navigateur.

Décodeur de source mappour retrouver la ligne d’origine d’une erreur