Retour au blog
Déminifier JS et CSS : déboguer du code minifié en production

Déminifier JS et CSS : déboguer du code minifié en production

Source maps absentes : retrouvez du JS et du CSS lisibles dans le navigateur avec unminify et beautify — formatage seul, noms mangled perdus.

02.09.2026
11 min de lecture
Partager cet article:
DéminificationJavaScriptCSSDébogageEmbellissementTutoriel

Quand le JS et le CSS de production tiennent sur une ligne illisible

Une stack trace qui pointe vers app.min.js:1:18432, ou une feuille de styles d’une seule ligne de 40 Ko, est d’abord un problème de formatage, pas un problème de décompilateur. La minification a retiré espaces et commentaires. Le mangling (Terser mangle, compression d’identifiants cssnano si elle est activée) a renommé les symboles. Le pretty-print rend la forme. Seule une source map rend les noms d’origine. Quand les maps manquent et qu’il vous faut une copie locale, le déminificateur JavaScript en ligne et le déminificateur CSS en ligne réindentent dans le navigateur. Ils n’envoient pas le payload. Ils n’annulent pas le mangling. Pour le parcours DevTools et source maps côté JavaScript seul, gardez le guide pour déboguer du JavaScript minifié sous la main. Cet article décrit le workflow des pages outils JS et CSS.

Utilisez les source maps quand elles existent : les noms d’origine battent n’importe quel formateur
Pretty-print dans DevTools avant de copier un bundle hors de l’onglet
Déminifiez JS et CSS en local quand vous voulez un fichier indenté et que les maps manquent
Limite dure : les identifiants raccourcis par le mangling le restent, et les commentaires supprimés ne reviennent pas
URL unminify pour un extrait de production compressé, URL beautify pour du code source déjà lisible

Quand unminify est le bon choix, et quand il ne l’est pas

Cet article vs le guide de débogage JavaScript

Le guide de débogage du JavaScript minifié est l’approfondissement. Il couvre le pretty-print de Chrome, sourceMappingURL, les maps cachées, et pourquoi a ne redeviendra jamais getUserProfile sans map. Ce texte ne refait pas cette visite de DevTools. Il répond à une autre recherche. Vous avez déjà un extrait JS ou CSS minifié (ticket, copie CDN, fichier de thème) et vous voulez les pages FastMinify qui le formatent. Les formateurs de la famille sont sur le hub d’outils unminify.

TypeError de production à la colonne 12 000 d’un bundle d’une ligne, sans fichier .map à côté
Un thème WordPress ou Shopify livre du CSS compressé et vous devez voir quelle règle gagne
Un fichier vendor sans map, que vous avez le droit d’inspecter
Vous avez sauvé app.min.js / styles.min.css et voulez du code source indenté dans un éditeur
Vous avez déjà utilisé le pretty-print de Chrome et voulez encore une copie dans un fichier
Ce que le formatage ne peut pas restaurer

Unminify et beautify sur FastMinify réindentent. Ce ne sont pas des décompilateurs. Tenez ces limites pour strictes, car elles collent à ce que font les outils (js-beautify dans l’onglet, taille d’indent et espaces ou tabulations, contrôle de syntaxe d’abord).

Limitations :

Les noms raccourcis par le mangling le restent : a, b, c ne redeviennent pas getUserProfile
Les réécritures de minification comme !0 / !1 (true / false) restent telles quelles
Commentaires supprimés et code mort retiré par le minifier ne reviennent pas
Les transforms agressifs (inlining, folding, fusion de règles) restent durs à lire même après pretty-print
Du JS ou du CSS invalide échoue au lieu de produire une sortie approximative : le formateur valide la syntaxe

Ce qui fonctionne :

Restaurer l’indentation, les retours à la ligne et une déclaration CSS par ligne
Espaces autour des opérateurs et des accolades pour poser des breakpoints sur des lignes lisibles
Parcourir plus facilement la structure if / for / @media
Tout reste dans le navigateur, rien n’est envoyé
Indentation de 2 ou 4 espaces, ou tabulations, avec les mêmes réglages sur unminify et beautify

D’abord les maps, puis le pretty-print, puis les pages outils

Ne commencez pas par coller dans un onglet

Suivez cet ordre. Les pages déminifier JavaScript et déminifier CSS sont l’étape 3, quand les maps manquent et qu’il vous faut une copie formatée.

1
Cherchez une source map

Dans DevTools → Sources, cherchez les fichiers d’origine à côté du bundle, un fichier .map voisin, ou un commentaire //# sourceMappingURL= (JS) / /*# sourceMappingURL= (CSS). Si une map charge, déboguez là et arrêtez-vous. Aucun formateur ne bat les noms d’origine.

2
Pretty-print dans le navigateur ou l’éditeur

Dans Chrome Sources, le contrôle {} Pretty Print formate le fichier sur place. Dans VS Code, lancez Format Document sur un .min.js ou .min.css sauvé. La limite reste la même : les noms restent raccourcis. Pour un bug de cascade CSS, pretty-print plus le panneau Styles bat souvent la copie hors du navigateur.

3
Déminifiez en local seulement si vous voulez une copie dans un fichier

Sans map, vous pouvez obtenir du code indenté sur disque ou dans un ticket. Collez le JS dans le déminificateur JavaScript en ligne ou le CSS dans le déminificateur CSS en ligne. Le traitement reste dans le navigateur. La taille et le caractère d’indentation sont des réglages de mise en forme, pas un désobfuscateur.

4
Naviguez avec des littéraux, pas avec des noms

Cherchez des chaînes uniques, des URL, des tokens de couleur, des messages d’erreur. Suivez les motifs if / return / @media. N’attendez pas que a redevienne un identifiant réel.

Exemple :

Avant (minifié) :

function greet(n){return"Hi, "+n;}const cfg={retry:2,debug:!0};

Après (déminifié) :

function greet(n) { return "Hi, " + n; } const cfg = { retry: 2, debug: !0 };

Vous récupérez une forme lisible, pas le code source d’origine

JavaScript retrouve retours à la ligne et indentation, pas les identifiants d’origine

Collez une IIFE d’une ligne ou un morceau de bundle Terser. Le déminificateur JavaScript lance js-beautify dans le navigateur après un contrôle de syntaxe. Vous obtenez le wrapping et l’indent. Vous n’obtenez pas les noms d’avant le mangle. Le !0 de l’exemple est volontaire : beaucoup de minifiers réécrivent true ainsi, et le formatage ne le retransforme pas en true.

Avant

function greet(n){return"Hi, "+n;}const cfg={retry:2,debug:!0};

Après

function greet(n) { return "Hi, " + n; } const cfg = { retry: 2, debug: !0 };
Barre d’outils : indentation de 2 (par défaut) ou 4, espaces ou tabulations. Minify les ignore, unminify et beautify les utilisent
Du JavaScript invalide lève une erreur au lieu d’émettre un fichier à moitié formaté
Les littéraux de gabarit et les chaînes sont conservés. Le travail porte sur les espaces, pas sur le renommage
Besoin de l’inverse ensuite ? Le minificateur JavaScript en ligne est une autre page
Pour les source maps et le {} Chrome, restez sur le guide de débogage JS
Les règles CSS et @media redeviennent faciles à parcourir

Le CSS compressé est en général une ligne avec les sélecteurs collés. Le déminificateur CSS formate avec js-beautify : sélecteurs sur leurs lignes, déclarations indentées, blocs @media imbriqués visuellement. Spécificité et cascade ne changent pas, seuls les blancs changent. Si une règle « disparaît » après formatage, elle ne s’appliquait déjà pas ; le formatage ne l’a pas effacée.

Avant

.btn,.cta{color:#fff;padding:8px 16px}.btn:hover{opacity:.9}@media(min-width:768px){.btn{padding:12px 20px}}

Après

.btn, .cta { color: #fff; padding: 8px 16px; } .btn:hover { opacity: .9; } @media (min-width: 768px) { .btn { padding: 12px 20px; } }
Mêmes réglages d’indentation que pour JS : 2 / 4 espaces ou tabulations
Du CSS invalide (blocs non fermés, sélecteurs cassés) échoue au contrôle de syntaxe
La concaténation de plusieurs fichiers relève de la page minify et n’existe pas sur unminify CSS
Les couleurs hex et les valeurs courtes du type .9 restent courtes ; ce n’est pas un outil « expand to longhand »
Le CSS d’un thème WordPress reste du CSS, pas du PHP serialize() : c’est une autre famille d’outils

Deux boucles concrètes avec les pages unminify

Coller du JavaScript, le déminifier et chercher une chaîne

Ouvrez le déminificateur JavaScript en ligne. Collez un seul extrait (une fonction, un chunk webpack, un bookmarklet). Cliquez sur Déminifier. La sortie est indentée dans le panneau de droite. Copiez-la dans l’éditeur et cherchez une chaîne unique de la stack trace. Tout reste dans l’onglet.

1

1. Copiez le fichier qui plante, pas la page HTML

Depuis DevTools → Network ou Sources, sauvegardez le fichier .js nommé par la trace. Coller tout le document HTML dans un déminificateur JS fera échouer le contrôle de syntaxe.

2

2. Collez dans unminify-js

Laissez l’indent à 2 espaces sauf si l’équipe utilise des tabulations. En cas d’erreur de syntaxe, le collage est tronqué ou mélangé avec du HTML : corrigez le collage, l’outil fait son travail.

3

3. Cherchez des littéraux, puis retournez dans DevTools

Trouvez le message d’erreur ou l’URL. Notez le flux de contrôle autour. Si vous avez encore besoin de breakpoints, utilisez le pretty-print de Chrome sur le fichier live. Une copie formatée sur disque ne remplace pas une pile d’appels en pause.

Coller la feuille minifiée, puis suivre le sélecteur

Ouvrez le déminificateur CSS en ligne. Collez la feuille compressée (ou le morceau qui contient le sélecteur). Après formatage, cherchez la classe du DOM. Comparez avec les styles Computed de DevTools : le formatage ne change pas quelle règle gagne.

1

1. Copiez la feuille de styles, pas le HTML minifié

Panneau Network → la requête .css. Les blocs <style> inline se collent aussi s’ils ne contiennent que du CSS valide.

2

2. Déminifiez, puis cherchez la classe ou l’id

Une liste de sélecteurs du type .btn,.cta se sépare sur deux lignes. C’est de la lisibilité, pas un changement de cascade.

3

3. Fiez-vous au panneau Styles pour le résultat réel

Le fichier formaté montre ce qui a été livré. Le panneau Styles montre ce qui s’applique vraiment (surcharges, couches, !important). Servez-vous des deux.

Ce que la barre d’outils change vraiment

Sur les deux pages unminify, la taille et le caractère d’indent sont les contrôles de format. Minify les ignore. Il n’y a pas d’interrupteur « restaurer les noms d’origine ». Pour le reste de la famille (HTML, JSON, XML), voir le hub d’outils unminify.

Taille d’indent : 2 ou 4, utilisée par unminify et beautify, ignorée par minify
Caractère d’indent : espaces ou tabulations
La syntaxe doit être valide : du JS/CSS invalide donne une erreur, pas un pretty-print partiel
100 % navigateur : le payload n’est pas envoyé aux serveurs FastMinify
Pas un concatenateur : joindre plusieurs fichiers CSS est une action de la page minify

Unminify et beautify partagent le même formateur pour des intentions de recherche différentes

Deux URL, un moteur js-beautify pour JS et CSS

Sur FastMinify, déminifier JavaScript et beautifier JavaScript en ligne formatent tous les deux avec js-beautify après un contrôle de syntaxe. Le même couple existe pour le CSS : déminifier CSS et beautifier CSS en ligne. La différence tient à l’intention, pas à un second algorithme. Les URL unminify ciblent une sortie de production compressée. Les URL beautify ciblent du code source que vous jugez déjà lisible, mais que vous voulez indenter proprement. Le tour plus long des formateurs est le guide du code beautifier.

Dump .min.js / .min.css → unminify-js ou unminify-css
Code déjà retourné à la ligne, mais désordonné → beautify-js ou beautify-css
Besoin d’assets plus petits → minify-js / minify-css, pas ces pages
Les outils beautify forment le hub des formateurs, les outils unminify celui du code minifié à rendre lisible
Quand rester dans VS Code

Si le fichier est déjà sur disque et que l’équipe utilise Prettier ou les services de langage JS et CSS intégrés, Format Document fait le même travail. Il modifie les blancs, pas les symboles. Utilisez FastMinify quand l’extrait se trouve dans un ticket, une réponse CDN ou sur une machine sans votre profil d’éditeur. Aucun des deux chemins ne restaure les noms raccourcis.

VS Code Format Document : pas d’étape collage, réglages du workspace
FastMinify : pas d’installation, réglages d’indentation dans la barre, rien n’est envoyé
Chrome Pretty Print : reste sur le fichier de production live pour les breakpoints
Source maps : toujours le seul moyen de voir les identifiants d’origine

Et ensuite

Déboguez le JS et le CSS minifiés dans cet ordre. Commencez par les source maps si elles existent, passez au pretty-print de DevTools si vous n’avez besoin que de la ligne qui plante, et n’utilisez un déminificateur dans le navigateur que si vous voulez une copie formatée alors que les maps manquent. Les pages unminify et beautify de FastMinify réindentent avec js-beautify ; elles n’annulent pas le mangling. Pour l’approfondissement Chrome et maps, gardez le guide de débogage JavaScript. Pour formater au quotidien du code déjà lisible, utilisez les URL beautify.

Maps absentes et besoin de JS ou CSS indenté en local ? Formatez dans le navigateur, puis retournez dans DevTools.

Déminifier JavaScriptDéminifier CSSBeautifier JavaScriptHub outils unminifyDéboguer du JS minifié (maps et DevTools)
Émettez des source maps en production (hidden-source-map / Vite 'hidden' sauf si vous exposez volontairement les sources)
Pretty-print dans DevTools avant de copier un bundle hors du navigateur
Utilisez unminify-js / unminify-css pour une copie locale lisible, pas comme premier clic de debug
Considérez les noms raccourcis et les réécritures !0 / !1 comme perdus sans maps
URL beautify pour du code source déjà lisible ; URL minify pour recompresser
Partager cet article
Partager cet article:

Articles connexes

HTTP/2, HTTP/3 et minification : la minification est-elle encore utile ?
HTTP/2, HTTP/3 et minification : la minification est-elle encore utile ?

HTTP/2 et HTTP/3 changent le trajet des fichiers, pas leur poids. Mesures de taille, de compilation et de bundling : ce que la minification apporte encore.

22.10.202617 min de lecture
Timestamp Unix : convertir un epoch et éviter les erreurs de fuseau
Timestamp Unix : convertir un epoch et éviter les erreurs de fuseau

Convertissez un epoch Unix en date lisible et inversement, distinguez secondes et millisecondes, et évitez les pièges de fuseau, de JWT et de changement d’heure.

19.10.202620 min de lecture
Expression cron : lire la syntaxe et calculer les prochaines exécutions
Expression cron : lire la syntaxe et calculer les prochaines exécutions

Lisez une expression cron champ par champ, voyez ses prochaines exécutions en UTC ou en heure locale et évitez les pièges de pas, de fuseau et de dialecte.

16.10.202619 min de lecture