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éminification

JavaScript

CSS

Débogage

Embellissement

Tutoriel

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 est 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 mangled restent mangled ; les commentaires supprimés ne reviennent pas

URL unminify pour un extrait de production compressé, URL beautify pour du source déjà lisible

Quand unminify est le bon clic — 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 le deep dive : pretty-print Chrome, sourceMappingURL, maps hidden, et pourquoi a ne redeviendra jamais getUserProfile sans map. Ce texte ne refait pas cette visite 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 — pas de 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 source indenté dans un éditeur

Vous avez déjà pretty-printé dans Chrome et voulez encore une copie 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 dures — elles collent à ce que font les outils (js-beautify dans l’onglet, taille d’indent et espaces vs tabulations, contrôle de syntaxe d’abord).

Limitations :

Les noms mangled restent mangled : a, b, c ne redeviennent pas getUserProfile

Les réécritures du minifier du type !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 CSS invalide échoue au lieu de produire un « à peu près » — le formateur valide la syntaxe

Ce qui fonctionne :

Restaurer l’indentation, le wrapping, et une déclaration CSS par ligne

Espaces autour des opérateurs et des accolades pour poser des breakpoints sur des lignes lisibles

Scanner plus facilement if / for / @media

Tout reste dans le navigateur — rien n’est uploadé

Indent 2 ou 4 espaces, ou tabulations — les mêmes molettes sur unminify et beautify

Workflow : maps d’abord, puis 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 voisin .map, 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

Chrome Sources : le contrôle {} Pretty Print formate le fichier sur place. VS Code : Format Document sur un .min.js ou .min.css sauvé. Même limite : les noms restent mangled. 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 fichier

Pas de map, et vous voulez du source 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. Taille et caractère d’indent sont des réglages de 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
};

Ce que vous récupérez : une forme lisible, pas le source d’origine

JavaScript : retours à la ligne et indent, 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 : indent 2 (défaut) ou 4, espaces ou tabulations — ignoré par minify, utilisé par unminify et beautify

Du JavaScript invalide lève une erreur au lieu d’émettre un fichier à moitié formaté

Les template literals et les chaînes sont préservés ; le travail est l’espace, pas le renommage

Besoin de l’inverse ensuite ? minificateur JavaScript en ligne — autre page

Pour les source maps et le {} Chrome, restez sur le guide de débogage JS

CSS : règles et @media redeviennent scannables

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 — seulement les blancs. 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 molettes d’indent que le 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 est un workflow de la page minify — 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() ; autre cluster

Utiliser les pages unminify : deux boucles concrètes

JavaScript : coller, déminifier, chercher une chaîne

Ouvrez le déminificateur JavaScript en ligne. Collez un seul extrait (une fonction, un chunk webpack, un bookmarklet). Cliquez 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.

Étape 1 : copiez le fichier qui plante, pas la page HTML

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

Étape 2 : collez dans unminify-js

Laissez l’indent à 2 espaces sauf si l’équipe utilise des tabulations. Si vous voyez une erreur de syntaxe, le collage est tronqué ou mélangé avec du HTML — corrigez le collage, ne baissez pas le niveau de l’outil.

Étape 3 : cherchez des littéraux, puis retournez dans DevTools

Trouvez le message d’erreur ou l’URL. Notez le flux de contrôle autour. Pretty-printtez le fichier live dans Chrome si vous avez encore besoin de breakpoints — une copie formatée sur disque ne remplace pas une pile d’appels en pause.

CSS : coller la feuille minifiée, puis chasser 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.

Étape 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.

Étape 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.

Étape 3 : gardez le panneau Styles pour la vérité

Le fichier formaté dit ce qui a été livré. Le panneau Styles dit ce qui s’applique vraiment (overrides, layers, !important). Utilisez les 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 parser : du JS/CSS invalide est 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 vs beautify : même formateur, 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 scission est l’intention, pas un second algorithme. Les URL unminify ciblent une sortie de production compressée. Les URL beautify ciblent du 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

Source déjà enroulé mais sale → beautify-js ou beautify-css

Besoin d’assets plus petits → minify-js / minify-css, pas ces pages

Hub formateurs : outils beautify ; hub expand-minified : outils unminify

Quand rester dans VS Code

Si le fichier est déjà sur disque et que l’équipe lance Prettier ou les language services JS/CSS, Format Document est la même classe d’opération : des blancs, pas des symboles. Utilisez FastMinify quand l’extrait vit dans un ticket, une réponse CDN, ou une machine sans votre profil d’éditeur. Aucun des deux chemins ne restaure les noms mangled.

VS Code Format Document : pas d’étape collage, réglages du workspace

FastMinify : pas d’install, molettes d’indent dans la barre, rien n’est uploadé

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 : source maps si elles existent, pretty-print dans DevTools si vous n’avez besoin que de la ligne qui plante, et un déminificateur navigateur seulement quand il vous faut une copie formatée et que les maps manquent. Les pages unminify et beautify de FastMinify réindentent avec js-beautify ; elles n’annulent pas le mangling. Pour le deep dive Chrome et maps, gardez le guide de débogage JavaScript. Pour formater du source déjà lisible au quotidien, utilisez les URL beautify.

Maps absentes et besoin de JS ou CSS indenté en local ? Formatez dans le navigateur — puis retournez dans 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

Traitez les noms mangled et les réécritures !0 / !1 comme perdus sans maps

URL beautify pour du source déjà lisible ; URL minify pour recompresser

Partager cet article

Partager cet article:

Articles connexes

PHP unserialize : décoder options WordPress et données sérialisées

Désérialisez `wp_postmeta`, sessions PHP et caches Laravel en JSON lisible dans le navigateur — tableaux et scalaires uniquement, sans script local.

31.08.202610 min de lecture

GitLab CI : formater et valider votre .gitlab-ci.yml en ligne

Stages, includes, règles `rules:` : validez la structure d'un .gitlab-ci.yml avant la pipeline — pas un runner GitLab, pas le CI Lint officiel.

29.08.20269 min de lecture

GitHub Actions : linter et corriger vos workflows YAML

YAML cassé, `on` ou `jobs` manquants, steps vides : validez la structure de vos workflows avant le push — et laissez actionlint à la CI.

27.08.20267 min de lecture

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

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

Quand unminify est le bon clic — et quand il ne l’est pas

Limitations :

Ce qui fonctionne :

Workflow : maps d’abord, puis pretty-print, puis les pages outils

1Cherchez une source map

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

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

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

Exemple :

Ce que vous récupérez : une forme lisible, pas le source d’origine

Avant

Après

Avant

Après

Utiliser les pages unminify : deux boucles concrètes

Étape 1 : copiez le fichier qui plante, pas la page HTML

Étape 2 : collez dans unminify-js

Étape 3 : cherchez des littéraux, puis retournez dans DevTools

Étape 1 : copiez la feuille de styles, pas le HTML minifié

Étape 2 : déminifiez, puis cherchez la classe ou l’id

Étape 3 : gardez le panneau Styles pour la vérité

Unminify vs beautify : même formateur, intentions de recherche différentes

Et ensuite

Articles connexes

1
Cherchez une source map

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

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

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