Javascripts legibles por humanos en las herramientas para desarrolladores de Chrome

142

¿Alguien sabe si Chrome Developer Tools puede formatear javascripts en forma legible para humanos? Algún tipo de embellecedor sería útil. Digamos que estoy usando una biblioteca JS y necesito instanciar su objeto, para que sepa qué poner en el constructor. Pero buscar en esta enorme biblioteca que tiene 4 líneas en la interfaz de usuario de Chrome Developer Tools es bastante molesto ...

De lo contrario, el lado del servidor debe ocuparse de implementar el "modo de desarrollo" que proporciona archivos javascript que no están minimizados ...

javascript google-chrome-devtools

— Lisak
fuente

Estoy bastante seguro de que eso no es posible, pero espero estar equivocado porque sería una buena característica.

— Zevan

Lo hice, pero la ausencia de esta característica es bastante sorprendente, así que mejor me pregunté aquí

— Lisak

Versión de Firebug: stackoverflow.com/questions/4279319/…

— Ciro Santilli 郝海东冠状病六四事件法轮功

Respuestas:

331

Algunos navegadores tienen un botón de impresión Pretty que se ve así {}y aparece para HTML, JS y / o CSS dependiendo del navegador.

Chrome lo tiene en la pestaña de Fuentes :

Chrome 40 bonito botón de impresión

Firefox lo tiene en la pestaña del depurador

Firefox 35 botón de fuente de prettify :

La posición de estos botones puede cambiar, pero siempre debe estar ahí

— fgm2r
fuente

En Windows es un pequeño icono que se parece a -> {}. El subtítulo dice Pretty Print.

— omninonsense

@with Gracias por mencionar eso. Me pregunto por qué lo implementaron de manera diferente en Windows / Mac OS.

— fgm2r

¿Alguien sabe qué pasó con esta función de Chrome? Creo que he visto eso en el pasado en mi Chrome, pero ahora parece que se fue.

— superjos

@superjos Lo han cambiado para que sea el mismo en Mac OS y Windows ahora.

— fgm2r

uhm, pero ni siquiera puedo ver eso en el menú contextual. Solo el comando 'inspeccionar elemento' está allí. Ver captura de pantalla .

— superjos

¿No existe el ícono Pretty Print (parece: {}), al menos en Windows hay uno, dentro de la pestaña Scripts?

— omninsensense
fuente

Existe http://jsbeautifier.org/ para uso en línea ( necesita copiar / pegar ).

En ese sitio tienen un enlace a fiddler ( un proxy de depuración web ) y un formateador de JavaScript para ello ( tercera extensión ).

— Gabriele Petrioli
fuente