ver una tiempo saber real que pagina modificar esta ejecutando depurar consola como codigo chrome javascript debugging firefox firebug

una - modificar javascript en tiempo real chrome



¿Cómo puedo depurar un JS minificado en Firebug? (8)


Tengo una página web que incluye una cantidad insana de archivos JS minificados. La página web funciona perfectamente bien en mi red local, pero arroja algunos errores de JS en la puesta en escena. Hay un problema en JS y quiero depurarlo. Cuando cargo el JS en la etiqueta de script de Firebug, aparece en una línea horizontal larga. ¿Hay alguna salida en Firebug que amplíe o embellezca el script para la depuración? Sé que puedo usar jsbeautifier pero no me ayudarán. No puedo cargar un archivo expandido a CDN, se derrota el propósito de usar CDN.

Puntos a tener en cuenta,
a) No puedo controlar la caja que sirve JS, está en CDN, lo mencioné.
b) Puedo usar embellecedores, etc. ¿Pero eso me ayudaría a depurar el script en tiempo de ejecución? En mi humilde opinión, no
c) Estoy obligado por NDA y otras cuestiones legales No puedo compartir el script, pero es un problema genérico, puedes encontrarlo con un jQuery minificado

¡Considera un cambio!

Firefox con Firebug fue mi método favorito de depuración de JavaScript durante casi un año, pero recientemente me he mudado a Google-Chrome''s Developer-Tools, que es mucho más superior.

  • Chrome es compatible con el embellecimiento On-The-Fly (función incorporada) de los recursos de JavaScript

  • Una vez embellecido, puede depurar el archivo de recursos de JavaScript, ya que se descargó "de forma nativa" embellecido del servidor web. Los puntos de ruptura se establecen haciendo clic en el número de línea.

  • Una de las características más poderosas ,
    Una vez que has parado en un punto de ruptura, eres libre de ejecutar comandos (usando la consola) en el mismo ámbito, ERES en el punto de ruptura . En Firefox no puedes hacer eso. Es tan fácil de depurar (incluso funciones anónimas), que nunca volverás a Firefox.
    ¡Intentalo!

  1. Beautify tu script
  2. Agregue el host CDN en /etc/hosts o su DNS local para resolverlo en su propio servidor web
  3. Aloje la versión embellecida y todo lo que necesita en dicho servidor web
  4. Tanto Firefox como Chrome (versiones a partir de esta edición) admiten el embellecimiento de la secuencia de comandos con el botón {} disponible en el inspector.

Colocar puntos de interrupción en JavaScript hace que la depuración sea mucho más fácil, pero si su código ya ha llegado a la producción, es probable que se haya minimizado. ¿Cómo se puede depurar el código minificado? De manera práctica, algunos navegadores tienen la opción de desmintimizar tu JavaScript.

En Chrome y Safari, simplemente seleccione la pestaña "Secuencias de comandos", encuentre el archivo relevante y luego presione el ícono "{}" (letra bonita) ubicado en el panel inferior.

En Internet Explorer, haga clic en el icono de la herramienta en la lista desplegable de selección de scripts para encontrar la opción de formatear el JavaScript.

Opera encriptará automáticamente JavaScript minificado. Source

Este es un problema común y el equipo de desarrollo de Chrome ha presentado recientemente una solución elegante, a la que llamaron Source Maps; consulte http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ para obtener más información, ¡Creo que descubrirás que es exactamente lo que tú (y el resto de nosotros) hemos estado pidiendo! :)

Esto es más una solución, pero puede ayudar. La idea es que reemplacemos los archivos provenientes del servidor por archivos en su máquina.
Esto funcionará con cualquier navegador.
Se necesita un poco de configuración la primera vez (quizás 15 minutos), pero puede ser muy conveniente.
También puede ayudar a probar tus errores en un entorno en vivo / prod.

  1. Obtenga Fiddler (es un proxy de depuración web), instálelo, ejecútelo.
    http://www.fiddler2.com/fiddler2/
    (Reinicie el navegador después de la instalación para obtener la extensión Fiddler)
  2. Si depura un sitio web HTTPS, verifique esto primero:
    http://www.fiddler2.com/Fiddler/help/httpsdecryption.asp
  3. A partir de ahora, debería ver en Fiddler (panel de "Sesiones web" a la izquierda) todas las descargas realizadas por su navegador, incluidos los archivos JS.
    Si no, comprueba esto: Fiddler no muestra las sesiones
  4. Encuentre el archivo que desea depurar en la lista (Ctrl + F funciona)
  5. Haga clic en el archivo. Entonces tambien:
    • obtener el contenido del archivo del panel de inspectores (pestaña de texto), embellecerlo, guardar en un archivo en su computadora local
    • o tiene acceso a un archivo que contiene el código fuente (por ejemplo: desde su control de origen)
  6. Ir a la pestaña AutoResponder (panel superior izquierdo).
    Seleccione la casilla de verificación "Activar respuestas automáticas".
    Seleccione la casilla de verificación "Peticiones cruzadas sin coincidencia".
  7. Arrastre su archivo desde el panel izquierdo al panel derecho (el editor de reglas de la parte inferior se encuentra en la parte inferior)
  8. Establezca el otro campo con la ruta de su archivo local
  9. Haga clic en el botón Guardar
  10. Vuelve a cargar la página y disfruta de tu sesión de depuración.

Fiddler puede hacer muchas más cosas, pero este caso de uso responde a la pregunta inicial.

Impresiona bastante tu JavaScript. Busca esto en Google y encontrarás múltiples embellecedores JS en línea.

Yo uso Beautify y funciona bien, pero busca otros y utiliza uno que se adapte a tus necesidades.

Advertencia: Aún no podrá obtener nombres de variables locales significativos (que generalmente son renombrados por un minificador). Si el código fue compilado por el compilador de cierre , entonces no obtendrá ninguna información útil, incluso cuando esté autenticado, porque entonces todas las variables y funciones y propiedades se destrozarán (no solo las locales).

Ahora, si su problema es con un código de depuración que proviene del exterior (por ejemplo, un CDN), obviamente ese código se minimizará y no podrá guardar su versión embellecida allí. En este caso, puede reemplazar las etiquetas que cargan el código de un CDN con una url que apunta a su versión local, luego puede embellecer el código (descargado del CDN) en su propio servidor y luego puede depurarlo con FireBug.

Ahora, si ni siquiera controla el código HTML que contiene esas etiquetas (p. Ej., Reside en un servidor externo), lamentablemente no hay forma de que haga lo que desea sin descargar físicamente todo el sitio en su propio servidor. Incluso si descargó el sitio completo (con todos los archivos), puede que no funcione, ya que el sitio puede estar impulsado por un lenguaje de procesamiento de fondo o acceder a una base de datos de fondo. En tal caso, también deberá simular todos esos datos. Sin embargo, se puede hacer, solo tienes que pasar por mucho dolor. Mi recomendación es guardar una versión de la página web y ejecutarla en su propio servidor, que sirve código embebido de su propio servidor para depurar.

Simplemente cargue el archivo minimizado y presione el botón {} en la parte inferior y embellece al instante, lo que permite puntos de interrupción y otra depuración. (Es cierto para Chrome también)