¿Cómo puedo «dinámicamente» edición de código JavaScript en el Chrome depurador? No es para mí, así que no tengo acceso al archivo de origen. Quiero editar el código y ver qué efectos tienen en la página, en este caso detener una animación de la cola un montón de veces.

  • Usted podría utilizar la Ópera. Opera permite la edición de los ficheros JS. Después de suave a cargar la página, los cambios serán aplicados. Click derecho > Fuente > Hacer cambios > Aplicar los Cambios.
  • Este es un impresionante tutorial para Chrome depurador. Muestra los pasos muy simples para hacer en el depurador de cambios en los scripts.
  • También puede «inyectar» código a través de el punto de interrupción condicional. En el ejemplo dado uso num = 5, console.log(arguments[0], num), false para actualizar y registrar el valor dentro de foo función.
  • Por favor, encontrar este stackoverflow.com/questions/66420/…
InformationsquelleAutor Tom | 2011-02-21

12 Comentarios

  1. 77

    Usted puede utilizar el construido-en el depurador de JavaScript en Herramientas para Desarrolladores de Chrome en virtud de los «Scripts» de la ficha (en versiones posteriores es la «fuente» de la ficha), pero los cambios se aplican al código sólo se expresan en el momento de 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 la carga de la página, no tendrá efecto. A diferencia de por ejemplo, cambios en el código que residen en el mouseover controladores, que usted puede probar sobre la marcha.

    Hay un video de Google I/O 2010 evento la introducción de otras capacidades de Herramientas para Desarrolladores de Chrome.

    • En las últimas versiones de Chrome la pestaña iconos han pasado y los ‘Scripts’ ficha se cambia el nombre a «Fuentes» – así puede no ser obvio para encontrar el depurador de javascript. Más información aquí stackoverflow.com/questions/12113769/…
    • No existe tal método. Yo también soy incapaz de modificar el código bajo la pestaña de Fuentes.
    • Chrome depurador no permitir la modificación local de javascript. Falso.
    • Lo que es falso? Chrome no permitir la modificación de la secuencia de comandos en el depurador.
    • usted puede modificar si el guión no es engalanada
    • Parece que no puedo editar el js en la entre <fuente> tags en mi HTML
    • Para editar un archivo de configuración de Cromo en el área de trabajo bajo el sistema de Ficheros.

  2. 276

    Me encontré con esto hoy en día, cuando yo estaba jugando con alguien de otro sitio web.

    Me di cuenta de que podía adjuntar un punto de ruptura en el depurador para alguna línea de código antes de lo que yo quería dinámicamente editar. Y desde puntos de ruptura, permanecer incluso después de una recarga de la página, yo era capaz de editar los cambios que quería durante la pausa en el punto de ruptura y, a continuación, continuado para que la carga de la página.

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

    1. Añadir un punto de ruptura en un punto anterior en la secuencia de comandos
    2. Recargar la página
    3. Editar los cambios en el código
    4. CTRL + s (guardar cambios)
    5. Esté el depurador
    • Tenga en cuenta que sólo funciona para los archivos js externo.
    • Gracias! He encontrado esto funcionó cuando es necesario hacer cambios en una función anónima de ejecución automática que se llama la derecha cerca de la carga de la página.
    • Argh, porque había intentado esto antes y no funcionó y a pesar de que oh hombre, ¿cómo me la pierdo. Pero sí, no funciona para mí.
    • Crucial para mí fue saber que los cambios deben ser guardados (paso 4). Gracias!
    • No funciona en javascript en los archivos html para mí. También, si has añadido una carpeta para el espacio de trabajo, seleccione el local js de archivo, haga clic derecho y mapa de ese archivo a la red dito.
    • Así que no hay manera de modificar los scripts en archivos html?
    • Tratando de utilizar esta técnica en un bucle infinito para una verificación rápida de las ideas (es decir. no es necesario volver a cargar la página, solo paso a través de código mediante el uso de F8). Nadie lograr esto de manera efectiva, tal vez con devolución de llamada? function infiniteLoop() { do { myFunction() } while(false); } Cambio false a true después de correr con un punto de ruptura en la parte superior de la secuencia de comandos o de antemano.
    • Estoy sorprendido de que esto todavía parece funcionar para algunas personas. Edición en vivo fue posible en todo 2011/12 (ver stackoverflow.com/questions/7343276/…), pero no más: Usted puede editar un archivo de secuencia de comandos, pero Chrome se ejecuta la versión no modificada. El uso local de los reemplaza en su lugar (vea stackoverflow.com/a/22973253/2733244).

  3. 11

    Esto es lo que están buscando:

    1.- Vaya a la pestaña Fuente y abra el archivo javascript

    2.- Editar el archivo, haga clic en él y aparecerá un menú: haga clic en Guardar y guardarlo localmente.

    Para ver el diff o revertir los cambios, haga clic derecho y seleccione la opción Modificaciones Locales… en el menú. Verás los cambios diff 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/

  4. 5

    Bastante fácil, ir a la ‘scripts’ ficha. Y seleccione el archivo de origen que desea y haga doble clic en cualquier línea de edición.

    • Sería estupendo si pudiera guardar los cambios en el disco en el caso de file:// Url
    • Que fue exactamente lo que hice, pero los cambios no fueron reflejados en la página, como sería de esperar. Necesito cambiar $(selector).fadeIn() … a $(selector).stop(true,true).fadeIn() … sabes? Y quiero ser capaz de ver que sucede en la página.
    • Oh, maldita sea, tienes razón. Ahora me pregunto ¿por qué Chrome nos permite editar nada si no tiene ningún efecto.
    • «Guardar como…» solo guarda el archivo en tu ordenador. No aplicar los cambios después de que la página se vuelve a cargar. Si desea aplicar los cambios a los archivos JS para la depuración, puede utilizar la Ópera.
    • alguien tiene alguna solución sobre esto más?
    • este hace lo que quiere: github.com/NV/chrome-devtools-autosave
    • y esta una que se llama tincr: chrome.google.com/webstore/detail/…
    • parece que no puedo modificar en línea de javascript en el archivo html
    • Haga doble clic de distancia y no pasa nada. Puede que esto no funciona…
    • Estoy descubriendo que no hay manera de editar los ficheros JS en DevTools > Fuentes > Fuentes. Esto es muy extraño, porque «modificaciones Locales» todavía se muestra en el menú de contexto y se abre un espacio en blanco «Local» modificaciones de panel. Hmmmm
    • A veces funciona para mí, todavía tienen que averiguar el patrón de aunque.
    • Hay alguna manera de modificar la secuencia de comandos que se encuentra directamente en la página html?

  5. 2

    Como este es muy popular, cuestión que se aborda en vivo-edición de JS, quiero señalar otra opción útil. Como se describe por svjacob en su respuesta:

    Me di cuenta de que podría adjuntar un punto de ruptura en el depurador para alguna línea de código antes de lo que yo quería dinámicamente editar. Y desde puntos de ruptura, permanecer incluso después de una recarga de la página, yo era capaz de editar los cambios que quería durante la pausa en el punto de ruptura y, a continuación, continuado para que la carga de la página.

    La solución anterior no funciona para mí bastante grande JS (webpack bundle – 3.21 MB record de versión, 130 líneas de código en engalanada versión) – chrome se estrelló y pidió recarga de página que revertía una vez guardados los cambios. El camino a seguir en este caso fue Fiddler donde se puede establecer AutoRespond opción para reemplazar cualquier recurso remoto con cualquier archivo local de su equipo – ver esto ASÍ, pregunta por los detalles.

    En mi caso también tuve que agregar CORS de los encabezados de fiddler con éxito simulacro de respuesta.

  6. 2

    Ahora google chrome ha de introducir la nueva característica. Mediante esta función, Usted puede editar el código en chrome examinar. (Cambio permanente en el código de ubicación)

    Para que Presione F12 –> Ficha Origen — (lado derecho) –> Sistema de Archivos que por favor, seleccione la ubicación de código. y, a continuación, el navegador chrome pedirá permiso y después de que el código será disipador de color verde. y usted puede modificar su código y se reflejan también en el código de ubicación (Esto significa un cambio Permanente)

    Gracias

  7. 1

    aquí una suave introducción a la js depurador en chrome que escribí. Tal vez va a ayudar a los demás buscando info sobre esto: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

    • Esa es una buena valoración crítica. Por desgracia, nada dice de la edición de JS en el depurador, que es la tarea en cuestión.
    • No está de acuerdo. Usted puede ver al final me específicamente dar ejemplo de cómo «»dinámicamente» edición de código JavaScript en el Chrome depurador», que es parte de la pregunta.
    • meeech, a menos que yo estoy entendiendo post, que demuestran cómo evaluar JS en la consola. Que es diferente de la edición de una función de manera que cuando se llama a la función en el futuro, se comporta de manera diferente.
    • Justo lo suficiente. Entendí editar a cambio medio en torno a los valores de la página, y el pensamiento de la escritura, sería de ayuda, ya que una vez que se tienen en la consola, puedes jugar con los valores, y cualquier otra cosa js en el contexto de ejecución.
    • sí, meeech, hice exactamente lo que usted describe por muchos años. Yo sólo obtuvo finalmente frustrado por no ser capaz de lograr un buen bucle de retroalimentación de la modificación de los controladores de eventos. Especialmente los que se desencadenan durante la carga de la página. Como AaronLS y yo hablamos en los comentarios de gnur la respuesta, a veces edición en DevTools > Fuentes > Fuentes funciona y otras veces no. Pero cuando funciona, es muy dulce!
  8. 1

    Si su javascript que se ejecuta en un botón, haga clic en, a continuación, hacer el cambio en virtud de Fuentes>Fuentes (en las herramientas de desarrollo de chrome ) y presionando Ctrl +S para guardar, es suficiente. Lo hago todo el tiempo.

    Si actualizas la página, javascript cambios se ha ido, pero chrome todavía se recuerda su puntos de quiebre.

  9. 1

    puede editar el javascrpit dinámica de archivos en el Chrome depurador, bajo el Fuentes ficha, sin embargo los cambios se perderán si actualizas la página, para detener la carga de la página antes de hacer los cambios, será necesario establecer un punto de quiebre de, a continuación, vuelva a cargar la página y editar sus cambios y, finalmente, esté el depurador para ver los cambios surtan efecto.
    La edición en la Chrome depurador

    • usted tiene que mantener la consola para abrir el chrome va a parar en los puntos de interrupción , de otra chrome ignorar los puntos de interrupción
    • no de trabajo. Yo recargar con F5 y se detiene, puedo cambiar el archivo, a continuación, sigo corriendo y me sale el mismo error me acaba de arreglar. Es un archivo js lado de la página principal.,
  10. 1

    Yo estaba buscando una manera de cambiar el guión y depuración que la nueva secuencia de comandos. Manera me las arreglé para hacer que es:

    1. Establecer el punto de interrupción en la primera línea de la secuencia de comandos que desea cambiar y depuración.

    2. Recargar la página, por lo que el punto de ruptura está siendo golpeado

    3. Pegar su nuevo guión y establecer puntos de interrupción en ella

    4. Ctrl+s, y la página se actualizará causando ese punto de interrupción en la primera línea para ser golpeado.

    5. F8 para continuar, y ahora su recién pegado script sustituye a la original, siempre y cuando no las redirecciones y las recargas realizadas.

  11. 1

    Igual que @marca ‘s respuesta, podemos crear un Fragmentos en Chrome DevTools, a override el valor predeterminado de JavaScript. Finalmente, podemos ver qué efectos tienen en la página.

    La edición en la Chrome depurador

Dejar respuesta

Please enter your comment!
Please enter your name here