¿Cómo edito "dinámicamente" el código JavaScript en el depurador de Chrome? No es para mí, así que no tengo acceso al archivo fuente. Quiero editar el código y ver qué efectos tienen en la página, en este caso evitar que una animación se ponga en cola un montón de veces.
247
num = 5, console.log(arguments[0], num), falsepara actualizar y registrar el valor dentro de lafoofunción.Respuestas:
Puede usar el depurador de JavaScript incorporado en las Herramientas para desarrolladores de Chrome en la pestaña "Scripts" (en versiones posteriores es la pestaña "Fuentes"), pero los cambios que aplica al código se expresan solo en el momento en que la ejecución los atraviesa. 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, cambios en el código que reside en los controladores del mouseover , que puede probar sobre la marcha.
Hay un video del evento Google I / O 2010 que presenta otras capacidades de las Herramientas para desarrolladores de Chrome.
fuente
Me encontré con 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 dado que los puntos de interrupción permanecen incluso después de una recarga de la página , pude editar los cambios que quería 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:
fuente
Esto es lo que estás buscando:
1.- Navegue a la pestaña Fuente y abra el archivo javascript
2.- Edite el archivo, haga clic derecho y aparecerá un menú: haga clic en Guardar y guárdelo localmente.
Para ver el diferencial o revertir sus cambios, haga clic derecho y seleccione la opción Modificaciones locales ... del menú. Verá sus cambios con respecto al archivo original si expande la marca de tiempo que se muestra.
Información más detallada aquí: http://www.sitepoint.com/edit-source-files-in-chrome/
fuente
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.
fuente
Como esta es una pregunta bastante popular que trata con la edición en vivo de JS, quiero señalar otra opción útil. Como lo describe svjacob en su respuesta:
La solución anterior no funcionó para mí para JS bastante grande (paquete de paquete web - versión minimizada de 3.21MB, 130k líneas de código en versión prettificada) - Chrome se bloqueó 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 AutoRespond para reemplazar cualquier recurso remoto con cualquier archivo local de su computadora; consulte esta pregunta de SO para obtener más detalles .
En mi caso, también tuve que agregar encabezados CORS al violinista para simular con éxito la respuesta.
fuente
Si es javascript que se ejecuta con un botón, entonces hacer el cambio en Fuentes> Fuentes (en las herramientas de desarrollador en Chrome) y presionar Ctrl + S para guardar, es suficiente . Hago esto todo el tiempo.
Si actualiza la página, sus cambios de JavaScript desaparecerán, pero Chrome aún recordará sus puntos de interrupción.
fuente
Ahora Google Chrome ha introducido una nueva función. Mediante el uso de esta función, puede editar su código en Chrome Chrome. (Cambio permanente en la ubicación del código)
Para eso, presione F12 -> Pestaña Fuente - (lado derecho) -> Sistema de archivos - en eso, seleccione su ubicación de código. y luego el navegador Chrome le pedirá permiso y luego ese código se hundirá en color verde. y puede modificar su código y también se reflejará en la ubicación de su código (significa que cambiará permanentemente)
Gracias
fuente
Al igual que la respuesta de @mark, podemos crear fragmentos en Chrome DevTools, con
overrideel JavaScript predeterminado. Finalmente, podemos ver qué efectos tienen en la página.fuente
Aquí hay una suave introducción al depurador js en Chrome que escribí. Tal vez ayude a otros que buscan información sobre esto: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/
fuente
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 ver que sus cambios surtan efecto.
fuente
Estaba buscando una manera de cambiar el guión y depurar ese nuevo guión. La forma en que logré hacer eso es:
Establezca el punto de interrupción en la primera línea del script que desea cambiar y depurar.
Vuelva a cargar la página para que se llegue al punto de interrupción
Pegue su nuevo script y establezca los puntos de interrupción deseados en él
Ctrl + s, y la página se actualizará haciendo que se golpee ese punto de interrupción en la primera línea.
F8 para continuar, y ahora su script recién pegado reemplaza el original siempre que no se realicen redireccionamientos y recargas.
fuente
Chrome DevTools tiene un panel de Fragmentos donde puede crear y editar código JavaScript como lo haría en un editor, y ejecutarlo. Abra DevTools, luego seleccione el panel Orígenes, luego seleccione la pestaña Fragmentos.
https://developers.google.com/web/tools/chrome-devtools/snippets
fuente
Puede usar "Anulaciones" en Chrome para persistir los cambios de JavaScript entre las cargas de la página, incluso cuando no aloja la fuente original.
fuente