Outil pour Unminify / Decompress JavaScript [fermé]

430

Existe-t-il des scripts de ligne de commande et / ou des outils en ligne qui peuvent inverser les effets de la minification de la même manière que Tidy peut nettoyer un HTML horrible?

(Je cherche spécifiquement à minimiser un fichier JavaScript minifié, donc le changement de nom de variable peut toujours être un problème.)

Andy Ford
la source
4
Pour ceux d'entre vous qui ne le savent peut-être pas, la minification change les noms de variables internes en une seule lettre et supprime les commentaires de code. L'annulation de ces modifications ne peut pas être automatisée.
Vivian River
@DanielAllenLangdon Bon point. J'ai édité la question afin qu'elle n'implique plus que la minification ne change pas les noms de variables.
Andy Ford
12
FWIW ... vient de trouver JS NICE jsnice.org
Andy Ford
marcusjenkins.com/linux/… a bien fonctionné pour moi.
ychaouche
1
Pour @DanielAllenLangdon: jsnice.org peut minimiser et désobscurcir même le code angularjs de 30k.
Vert

Réponses:

504

Vous pouvez utiliser ceci: http://jsbeautifier.org/ Mais cela dépend de la méthode minify que vous utilisez, celle-ci ne formate que le code, elle ne change pas les noms des variables, ni décompresse l'encodage base62.

edit: en fait, il peut décompresser des scripts "emballés" (emballés avec le packer de Dean Edward: http://dean.edwards.name/packer/ )

Fabien Ménager
la source
2
+1 - J'ai déjà utilisé cette méthode et jsbeautifier.org est un excellent service.
Dan Lew
Merci. Ceci est exactement ce que je cherchais.
Andy Ford
5
Non, j'ai dit base 62: dean.edwards.name/packer et en.wikipedia.org/wiki/Base_62
Fabien Ménager
4
existe-t-il un outil qui "change les noms de variables" et qui connaît toujours la syntaxe JS pour ne pas casser le code?
Jorge Vargas
3
serait jusqu'à 10 fois si je pouvais. vient de me sauver d'une journée perdue!
benlumley
154

Les outils de développement Chrome ont cette fonctionnalité intégrée. Affichez les outils de développement (en appuyant sur F12 dans un sens), dans l'onglet Sources, la barre en bas à gauche a un ensemble d'icônes. L'icône "{}" est "Pretty print" et effectue cette conversion à la demande.

MISE À JOUR: IE9 "Outils de développement F12" a également une fonction "Format JavaScript" dans l'onglet Script sous l'icône Outils. ( voir Astuce # 4 dans F12 Le secret de débogage web le mieux gardé )

entrez la description de l'image ici

Jon Adams
la source
1
Pour le .js particulier que j'essayais de minimiser, cette méthode a fonctionné le mieux, cheers.
igneosaur
1
C'est maintenant dans l'onglet "Sources", pas l'onglet Scripts.
mhenry1384
@ mhenry1384: Oui, Chrome a renommé l'onglet. J'ai mis à jour la réponse en conséquence.
Jon Adams du
OUI!! (notre application n'a pas de mode de débogage / développement pour js que je connaisse - heureusement, nous ne raccourcissons / transformons pas les noms de variables.)
Steven Lu
2
Juste un avertissement: Chrome gâche parfois le code JavaScript. Par exemple, if (a) /regex/.match(foo);est assez imprimé comme if (a)\n / /regex/ .\nmatch(foo);ce qui est une erreur de syntaxe.
amphetamachine
56

Je l'ai! JSBeautifier fait exactement cela, et vous avez même des options pour le formatage automatique.

Le flash
la source
5
stackoverflow-then-google au lieu de google-then-stackoverflow? :))))
dfa
J'ai fait le google pour "javascript formatter online"
cgp
1
Ce plugin FireFox utilise JSBeautifier pour dé-minimiser javascript afin que vous puissiez ensuite définir des points d'arrêt sur les lignes dans le débogueur js de FireBug !!: addons.mozilla.org/en-US/firefox/addon/javascript-deminifier
BT
16

Ne pouvez-vous pas simplement utiliser un formateur javascript ( http://javascript.about.com/library/blformat.htm )?

Janco
la source
+1 pour une réponse qui fonctionne également. fabien vient juste de répondre en premier
Andy Ford
Cela ne répond qu'à la partie "décompresser" de la question.
Jorge Vargas
Non, cela ne fonctionne pas bien. Ça casse le code ... :(
Ramesh
14

Dans Firefox, SpiderMonkey et Rhino, vous pouvez envelopper n'importe quel code dans une fonction anonyme et appeler sa toSourceméthode, qui vous donnera une source bien formatée de la fonction.

toSource dépouille également les commentaires.

Par exemple. :

(function () { /* Say hello. */ var x = 'Hello!'; print(x); }).toSource()

Sera converti en chaîne:

function () {
    var x = "Hello!";
    print(x);
}

PS : Ce n'est pas un "outil en ligne", mais toutes les questions sur les techniques d'embellissement générales sont fermées en double de celui-ci.

katspaugh
la source
Intéressant. J'ai posé la question il y a 2,5 ans, donc je pense qu'il est trop tard pour modifier le titre, mais j'aime toujours voir les options en ligne et hors ligne. Merci d'avoir sonné. +1
Andy Ford
10

Si vous avez un Mac et TextMate - Une alternative simple pour mettre en forme Javascript est:

  1. Ouvrez le fichier avec Textmate.
  2. Cliquez sur> Bundles> JavaScript> Reformater le document
  3. Ouvrez une bière.
Calcul
la source
2
Bière servie en ce moment :)
dgilperez
6

La plupart des IDE offrent également des fonctionnalités de formatage automatique. Par exemple dans NetBeans, appuyez simplement sur CTRL + K .

gou1
la source
5

Comme alternative (puisque je ne connaissais pas jsbeautifier.org jusqu'à présent), j'ai utilisé un bookmarklet qui a réactivé le bouton de décodage dans Dean Edward's Packer.

J'ai trouvé les instructions et le bookmarklet ici .

voici le bookmarklet (en cas de panne du site)

javascript:for%20(i=0;i<document.forms.length;++i)%20{for(j=0;j<document.forms[i].elements.length;++j){document.forms[i].elements[j].removeAttribute(%22readonly%22);document.forms[i].elements[j].removeAttribute(%22disabled%22);}}
Mottie
la source
5

Similaire à la réponse de Stone , mais pour les développeurs Windows / .NET:

Si vous avez Visual Studio et ReSharper - Une alternative simple pour mettre en forme Javascript est:

  • Ouvrez le fichier avec Visual Studio;
  • Cliquez sur ReSharper> Outils> Code de nettoyage (Ctrl + E, C);
  • Sélectionnez "Par défaut: reformater le code", puis cliquez sur OK;
  • Ouvrez une bière.
C. Augusto Proiete
la source
4

Malgré son interface à des kilomètres de distance, JSPretty est un bon outil gratuit et en ligne pour rendre les codes source javascript lisibles par l'homme. Vous pouvez appliquer votre type d'indentation préféré et il peut également détecter l'obscurcissement.

Farshid
la source
3

Pretty Diff embellira (jolie impression) JavaScript d'une manière conforme auxalgorithmes d'espaces blancs JSLint et JSHint .

austincheney
la source
C'est ironique que le site soit si peu joli, mais c'est un outil sympa.
Andy Ford