extension depurar debugger debug consola chrome breakpoint javascript google-chrome debugging

debugger - depurar javascript chrome



Edición en el depurador de Chrome (12)

¿Cómo puedo editar "dinámicamente" el código JavaScript en el depurador de Chrome? No es para mí, por lo que no tengo acceso al archivo fuente. Quiero editar el código y ver qué efectos tienen en la página, en este caso, para evitar que una animación se ponga en cola un montón de veces.

Ahora Google Chrome ha introducido una nueva característica. Mediante el uso de esta función puede editar su código en chrome browse. (Cambio permanente en la ubicación del código)

Para eso Presione F12 -> Ficha Fuente - (lado derecho) -> Sistema de archivos - en el que seleccione su ubicación de código. y luego el navegador Chrome le pedirá permiso y después ese código se hundirá con el color verde. y puede modificar su código y también se reflejará en su ubicación de código (Significa que será un cambio permanente)

Gracias

Bastante fácil, vaya a la pestaña ''scripts''. Y seleccione el archivo de origen que desee y haga doble clic en cualquier línea para editarlo.

Como esta es una pregunta muy popular que trata sobre la edición en vivo de JS, quiero señalar otra opción útil. Como lo describe svjacob en su respuesta:

Me di cuenta de que podía adjuntar un punto de interrupción en el depurador a alguna línea de código antes de lo que quería editar dinámicamente. Y como los puntos de interrupción permanecen incluso después de una recarga de la página, pude editar los cambios que deseaba mientras estaba en pausa en el punto de interrupción y luego continué dejando que la página se cargara.

La solución anterior no me funcionó para JS bastante grande (paquete de paquete web - 3.21MB versión minificada, 130k líneas de código en versión prettified) - Chrome se estrelló y solicitó la recarga de la página que revirtió cualquier cambio guardado. El camino a seguir en este caso fue Fiddler, donde puede configurar la opción Respuesta automática para reemplazar cualquier recurso remoto con cualquier archivo local desde su computadora. Consulte esta pregunta SO para obtener más información .

En mi caso, también tuve que agregar encabezados CORS al violinista para simular una respuesta exitosa.

Encontré esto hoy, cuando estaba jugando con el sitio web de otra persona.

Me di cuenta de que podía adjuntar un punto de interrupción en el depurador a alguna línea de código antes de lo que quería editar dinámicamente. Y como los puntos de interrupción permanecen incluso después de una recarga de la página , pude editar los cambios que deseaba mientras estaba en pausa en el punto de interrupción y luego continué dejando que la página se cargara.

Entonces, como una solución rápida, y si funciona con su situación:

  1. Agregue un punto de ruptura en un punto anterior de la secuencia de comandos
  2. Recargar página
  3. Edita tus cambios en el código
  4. CTRL + s (guardar cambios)
  5. Desactivar el depurador

Estaba buscando una manera de cambiar el script y depurar ese nuevo script. Manera que logré hacer eso es:

  1. Establezca el punto de interrupción en la primera línea del script que desea cambiar y depurar.

  2. Recargue la página para que el punto de interrupción esté siendo alcanzado.

  3. Pegue su nuevo script y establezca los puntos de interrupción deseados en él

  4. Ctrl + s, y la página se actualizará haciendo que ese punto de interrupción en la primera línea sea alcanzado.

  5. F8 continuará, y ahora su script recién pegado reemplaza al original siempre que no se realicen redirecciones y recargas.

Esto es lo que buscas:

1.- Navega a la pestaña Fuente y abre el archivo javascript

2.- Edite el archivo, haga clic derecho y aparecerá un menú: haga clic en Guardar y guárdelo localmente.

Para ver la diferencia o revertir sus cambios, haga clic con el botón derecho y seleccione la opción Modificaciones locales ... en el menú. Verá que sus cambios difieren con respecto al archivo original si expande la marca de tiempo que se muestra.

Más información detallada aquí: http://www.sitepoint.com/edit-source-files-in-chrome/

Puede usar el depurador de JavaScript incorporado en Chrome Developer Tools en la pestaña "Secuencias de comandos" (en las versiones posteriores, en la pestaña "Fuentes"), pero los cambios que aplique al código se expresan solo en el momento en que la ejecución pasa a través de ellos. Eso significa que los cambios en el código que no se ejecuta después de que se cargue la página no tendrán efecto. A diferencia de, por ejemplo, los cambios en el código que reside en los controladores de mouseover , que puede probar sobre la marcha.

Hay un video del evento Google I / O 2010 que presenta otras funciones de Chrome Developer Tools.

Si su javascript se ejecuta en un botón, haga clic en Orígenes> Orígenes (en las herramientas de desarrollador en Chrome) y presione Ctrl + S para guardar, es suficiente . Hago esto todo el tiempo.

Si actualizas la página, tus cambios de javascript habrán desaparecido, pero Chrome aún recordará tus puntos de ruptura.

puede editar los archivos javascrpit dinámicamente en el depurador de Chrome, en la pestaña Fuentes ; sin embargo, sus cambios se perderán si actualiza la página, para pausar la carga de la página antes de realizar los cambios, deberá establecer un punto de interrupción y luego volver a cargar la página. y edite sus cambios y, finalmente, desactive el depurador para que los cambios surtan efecto.

This es un tutorial impresionante para el depurador de Chrome. Muestra los pasos muy simples para realizar cambios en el depurador a sus scripts.