Déminifier et embellir votre code en ligne

Déminifier un format précis

Chaque format a sa propre page, avec les détails qui comptent pour ce langage :

• Déminifier du JavaScriptJavaScript
• Déminifier du CSSCSS
• Déminifier du HTMLHTML
• Déminifier du XMLXML
• Déminifier du JSONJSON

C'est quoi, la minification de code ?

Les développeurs écrivent du code pour d'autres développeurs. Cela veut dire des commentaires, de l'indentation, des lignes vides entre les blocs, et des noms de variables qui disent vraiment ce qu'elles contiennent. Tout cela aide les humains, et rien de tout cela n'aide le navigateur. La minification est l'étape de build qui retire tout ce dont la machine n'a pas besoin : espaces, retours à la ligne, commentaires, et très souvent les noms d'origine des variables et des fonctions, réécrits en une seule lettre. Le comportement du programme reste strictement identique, seule sa forme change.

Le gain est réel. Un bundle JavaScript minifié pèse couramment 30 à 70 pour cent de moins que sa source, ce qui signifie moins d'octets sur le réseau, un premier rendu plus rapide et de meilleurs Core Web Vitals. C'est pour cette raison que presque tous les sites en production servent du JS, du CSS et du HTML minifiés. La contrepartie, c'est que le fichier téléchargé depuis un site en ligne est une seule ligne compacte que personne ne peut lire. Dès que vous devez comprendre ce fichier, le déboguer ou auditer ce qu'il fait réellement, il faut commencer par le déminifier.

Que fait cet outil de déminification ?

LFUnminify prend du code minifié et lui reconstruit une structure lisible. Il rétablit l'indentation, remet chaque instruction sur sa propre ligne, aère les blocs et les opérateurs, puis applique des règles de mise en forme cohérentes pour le langage détecté. Un bundle de quatre mille caractères sur une seule ligne devient quelques centaines de lignes correctement imbriquées, que vous pouvez parcourir, chercher et comprendre.

En coulisses, l'outil fait tourner Prettier, le formateur que la plupart des équipes JavaScript utilisent déjà, directement dans votre navigateur. Le résultat correspond donc à ce que votre propre éditeur produirait sur un fichier source normal : c'est familier plutôt que généré à la machine. La détection est automatique, collez n'importe quoi et l'outil déterminera s'il s'agit de JavaScript, de CSS, de HTML, de XML ou de JSON avant de le formater en conséquence.

Une limite honnête, autant l'annoncer tout de suite. Déminifier n'est pas décompiler. Les commentaires, les noms de variables d'origine et les notes du développeur ont été supprimés au moment du build, et aucun outil au monde ne peut les faire revenir. Ce que vous obtenez, c'est du code structuré, lisible et navigable, avec les noms courts du minifieur toujours en place. Dans la pratique, cela suffit pour suivre la logique, retrouver une fonction, ou repérer ce qu'un script envoie et vers où.

Formats de code pris en charge

Un seul éditeur, cinq langages. LFUnminify lit le contenu que vous collez, détermine de quel langage il s'agit, puis le confie à l'analyseur conçu pour cette syntaxe. Vous n'avez jamais à choisir un format dans un menu, et un fichier portant la mauvaise extension est malgré tout traité correctement :

• JavaScript, y compris la syntaxe ES6 et suivantes, les modules, le code asynchrone et le JSX. Le cas classique : un bundle produit par webpack, Vite, esbuild ou Terser.
• CSS, y compris la syntaxe moderne, les propriétés personnalisées, les media queries et les règles imbriquées. Idéal pour une feuille de style compilée par Tailwind, Sass ou PostCSS.
• HTML, y compris les blocs script et style intégrés, qui sont formatés en même temps que le balisage au lieu de rester sur une seule ligne.
• XML, y compris les sitemaps, les flux RSS, les fichiers SVG, les enveloppes SOAP et les fichiers de configuration arrivés sans le moindre retour à la ligne.
• JSON, y compris les réponses d'API très imbriquées, les manifestes de paquets, les fichiers de configuration et les charges utiles de logs.

Quand a-t-on besoin d'un déminifieur de code ?

On déminifie rarement par curiosité. C'est le plus souvent la façon la plus rapide de répondre à une question précise sur du code que vous n'avez pas écrit, ou sur du code que vous avez écrit mais que vous ne pouvez plus lire :

• Déboguer un bug en production. La stack trace pointe vers la ligne 1, colonne 24815 d'un bundle. Formater le fichier vous rend de vrais numéros de ligne et vous permet de retrouver la fonction qui a réellement levé l'erreur.
• Auditer un script tiers. Avant d'ajouter une balise analytics, un widget de chat ou un script d'affiliation à votre site, déminifiez-le et lisez ce qu'il collecte, quels domaines il contacte, et ce qu'il écrit dans le stockage du navigateur.
• Relire une feuille de style compilée. Les frameworks utilitaires produisent d'énormes fichiers CSS sur une seule ligne. Les embellir permet de voir la cascade, de trouver la règle qui gagne, et de comprendre pourquoi votre surcharge est ignorée.
• Inspecter une réponse d'API. Une charge utile JSON copiée depuis l'onglet réseau est illisible tant qu'elle n'est pas formatée. Une fois embellie, la structure, l'imbrication et le champ manquant sautent aux yeux en quelques secondes.
• Apprendre à partir de vrai code. Lire comment une bibliothèque bien conçue résout réellement un problème fait progresser vite, et un fichier formaté est la seule façon d'en lire une confortablement.

Comment utiliser LFUnminify

Il y a trois façons de faire entrer du code dans l'éditeur. Collez-le directement dans le panneau de gauche, cliquez sur Fichier pour importer un fichier depuis votre machine, ou glissez-déposez un fichier sur la zone de saisie. Vous pouvez aussi cliquer sur Charger depuis une URL et donner à l'outil un lien direct vers un fichier .js, .css, .html, .xml ou .json, ce qui est pratique pour inspecter une ressource servie par un site en ligne.

La mise en forme démarre toute seule, il n'y a pas de bouton à chercher. L'outil attend que vous arrêtiez de taper, détecte le langage, puis affiche le résultat embelli dans le panneau de droite avec la coloration syntaxique. Vous pouvez ensuite copier toute la sortie dans le presse-papiers en un clic, ou la télécharger sous forme de fichier correctement nommé pour l'ouvrir dans votre éditeur.

Deux petites choses utiles sur les longs fichiers. Activez les numéros de ligne quand vous devez citer une position précise ou comparer deux versions, la préférence est conservée pour votre prochaine visite. Et si le format détecté n'est pas celui que vous attendiez, c'est souvent un indice en soi : un fichier reconnu comme du JavaScript alors que vous pensiez avoir du JSON est fréquemment une réponse JSONP ou une configuration enveloppée dans une affectation.

Votre code ne quitte jamais votre machine

Le point mérite d'être dit clairement. Le formatage se fait localement, dans votre navigateur, avec du JavaScript chargé une seule fois avec la page. Votre code n'est pas envoyé, pas mis en file d'attente sur un serveur, pas écrit dans une base de données, et pas journalisé. Vous pouvez couper le réseau une fois la page chargée, le déminifieur continue de fonctionner, ce qui est la preuve la plus simple que rien n'est transmis.

Vous pouvez donc coller sans crainte du code propriétaire, un bundle interne, un projet client ou un fichier de configuration dont vous préféreriez ne pas partager la structure. Le seul moment où une requête part de votre navigateur, c'est lorsque vous demandez explicitement le chargement d'une URL, et même dans ce cas le fichier récupéré est formaté sur votre appareil. Il n'y a aucun compte à créer et aucun suivi du contenu que vous collez.

Pourquoi LFUnminify est-il gratuit ?

LFUnminify fait partie d'une famille d'outils gratuits développés par Ludovic Frank, aux côtés d'un générateur de mots de passe, d'un générateur de favicons, d'un créateur de palettes de couleurs et de quelques autres. Le raisonnement est simple : les petits utilitaires qu'un développeur ouvre plusieurs fois par semaine ne devraient pas être derrière un formulaire d'inscription, un mur de publicités ou un quota. Ici, il n'y a ni compte, ni limite, ni offre payante glissée dans le produit.

C'est aussi une démonstration qui tourne pour de vrai. Chaque outil de la famille est une véritable application, construite et maintenue comme le sont les projets clients, ce qui en dit plus long sur notre façon de travailler qu'une page portfolio. Si vous avez besoin de développement web sur mesure, d'une vraie application plutôt que d'un template, ou de conseil technique, le lien en bas de page est fait pour ça.

Questions fréquentes