Herramienta para Desminificar / Descomprimir JavaScript [cerrado]

430

¿Hay scripts de línea de comandos y / o herramientas en línea que puedan revertir los efectos de la minificación de forma similar a cómo Tidy puede limpiar HTML horrible?

(Estoy buscando específicamente desminificar un archivo JavaScript minificado, por lo que el cambio de nombre de la variable aún podría ser un problema).

Andy Ford
fuente
44
Para aquellos de ustedes que pueden no estar al tanto, la minificación cambia los nombres de las variables internas a una sola letra y elimina los comentarios del código. Deshacer estos cambios no se puede automatizar.
Vivian River
@DanielAllenLangdon Buen punto. He editado la pregunta para que ya no implique que la minificación no cambia los nombres de las variables.
Andy Ford
12
FWIW ... acabo de encontrar a JS NICE jsnice.org
Andy Ford
marcusjenkins.com/linux/… funcionó bien para mí.
ychaouche
1
Para @DanielAllenLangdon: jsnice.org puede desminificar y desfuscar incluso 30k de código angularjs.
Verde

Respuestas:

504

Puede usar esto: http://jsbeautifier.org/ Pero depende del método de minificación que esté usando, este solo formatea el código, no cambia los nombres de las variables ni descomprime la codificación base62.

editar: de hecho, puede desempaquetar guiones "empaquetados" (empaquetados con el empaquetador de Dean Edward: http://dean.edwards.name/packer/ )

Fabien Ménager
fuente
2
+1: he usado este método antes y jsbeautifier.org es un excelente servicio.
Dan Lew
Gracias. Esto es exactamente lo que estaba buscando.
Andy Ford
55
No, dije base 62: dean.edwards.name/packer y en.wikipedia.org/wiki/Base_62
Fabien Ménager
44
¿Existe una herramienta que "cambie los nombres de las variables" y aún tenga conocimiento de la sintaxis de JS para no romper el código?
Jorge Vargas
3
subiría esto 10 veces si pudiera. acaba de salvarme de un día perdido
benlumley
154

Las herramientas para desarrolladores de Chrome tienen esta característica incorporada. Abra las herramientas del desarrollador (presionar F12 es una forma), en la pestaña Fuentes, la barra inferior izquierda tiene un conjunto de iconos. El icono "{}" es "Pretty print" y realiza esta conversión a pedido.

ACTUALIZACIÓN: IE9 "F12 Developer Tools" también tiene una función "Formatear JavaScript" en la pestaña Script debajo del ícono Herramientas allí. ( Ver Consejo # 4 en F12 El secreto de depuración web mejor guardado )

ingrese la descripción de la imagen aquí

Jon Adams
fuente
1
Para el .js particular que estaba tratando de desminificar, este método funcionó mejor, saludos.
igneosaurio
1
Esto está ahora en la pestaña "Fuentes", no en la pestaña Scripts.
mhenry1384
@ mhenry1384: Sí, Chrome cambió el nombre de la pestaña. Actualicé la respuesta en consecuencia.
Jon Adams
¡¡SI!! (Nuestra aplicación no tiene un modo de depuración / desarrollo para js que conozco, afortunadamente no acortamos / transformamos nombres de variables)
Steven Lu
2
Solo un aviso: Chrome a veces desordena el código JavaScript. Por ejemplo, if (a) /regex/.match(foo);está bastante impreso ya if (a)\n / /regex/ .\nmatch(foo);que es un error de sintaxis.
anfetamáquinas
56

¡Entendido! JSBeautifier hace exactamente esto, e incluso tiene opciones para el formateo automático.

El flash
fuente
55
stackoverflow-then-google en lugar de google-then-stackoverflow? :))))
dfa
Hice el google para "javascript formateador en línea"
CGP
1
Este plugin de Firefox utiliza jsBeautifier a javascript no-Minify por lo que puede establecer puntos de interrupción en las líneas de depurador de FireBug js !!: addons.mozilla.org/en-US/firefox/addon/javascript-deminifier
BT
16

¿No puedes usar un formateador de JavaScript ( http://javascript.about.com/library/blformat.htm )?

Janco
fuente
+1 por respuesta que también funciona. Fabien acaba de responder primero
Andy Ford
Esto solo responde a la parte "descomprimir" de la pregunta.
Jorge Vargas
No, esto no está funcionando bien. Rompe el código ... :(
Ramesh
14

En Firefox, SpiderMonkey y Rhino, puede incluir cualquier código en una función anónima y llamar a su toSourcemétodo, que le dará una fuente bien formateada de la función.

toSource También despoja los comentarios.

P.ej. :

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

Se convertirá en una cadena:

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

PD : No es una "herramienta en línea", pero todas las preguntas sobre técnicas generales de embellecimiento están cerradas como duplicados de esta.

katspaugh
fuente
Interesante. Hice la pregunta hace 2.5 años, así que siento que es demasiado tarde para editar el título, pero todavía me gusta ver las opciones en línea y fuera de línea. Gracias por hablar. +1
Andy Ford
10

Si tiene una Mac y TextMate: una alternativa fácil para formatear Javascript es:

  1. Abre el archivo con Textmate.
  2. Haga clic en> Paquetes> JavaScript> Reformatear documento
  3. Abre una cerveza.
Roca
fuente
2
La cerveza se está sirviendo en este momento :)
dgilperez
6

La mayoría de los IDE también ofrecen funciones de formateo automático. Por ejemplo en NetBeans, sólo tiene que pulsar CTRL + K .

gou1
fuente
5

Como alternativa (dado que no sabía sobre jsbeautifier.org hasta ahora), he usado un marcador que volvió a habilitar el botón de decodificación en el Packer de Dean Edward.

Encontré las instrucciones y el bookmarklet aquí .

aquí está el bookmarklet (en caso de que el sitio esté caído)

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
fuente
5

Similar a la respuesta de Stone , pero para los desarrolladores de Windows / .NET:

Si tiene Visual Studio y ReSharper: una alternativa fácil para formatear Javascript es:

  • Abra el archivo con Visual Studio;
  • Haga clic en ReSharper> Herramientas> Código de limpieza (Ctrl + E, C);
  • Seleccione "Predeterminado: Reformatear código" y haga clic en Aceptar;
  • Abre una cerveza.
C. Augusto Proiete
fuente
4

A pesar de su interfaz muy lejos de ser bonita, JSPretty es una buena herramienta gratuita y en línea para hacer que los códigos fuente de JavaScript sean legibles para los humanos. Puede aplicar su tipo preferido de sangría y también puede detectar ofuscación.

Farshid
fuente
3

Pretty Diff embellecerá (bonita impresión) JavaScript de una manera que se ajuste alos algoritmos de espacio en blanco JSLint y JSHint .

austincheney
fuente
Es irónico que el sitio no sea tan bonito, pero esta es una herramienta genial.
Andy Ford