javascript debugger - Edición en el depurador de Chrome




depurar console (11)

¿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.


Answers

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.


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


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.



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


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.


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/


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


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.


Cada objeto tiene una propiedad interna, [[Prototipo]], que lo vincula a otro objeto:

object [[Prototype]] -> anotherObject

En javascript tradicional, el objeto vinculado es la propiedad prototype de una función:

object [[Prototype]] -> aFunction.prototype

Algunos entornos exponen [[Prototype]] como __proto__ :

anObject.__proto__ === anotherObject

Usted crea el enlace [[Prototipo]] al crear un objeto.

// (1) Object.create:
var object = Object.create(anotherObject)
// object.__proto__ = anotherObject

// (2) ES6 object initializer:
var object = { __proto__: anotherObject };
// object.__proto__ = anotherObject

// (3) Traditional JavaScript:
var object = new aFunction;
// object.__proto__ = aFunction.prototype

Así que estas declaraciones son equivalentes:

var object = Object.create(Object.prototype);
var object = { __proto__: Object.prototype }; // ES6 only
var object = new Object;

Una new declaración no muestra el objetivo del enlace ( Object.prototype ); en cambio, el objetivo está implícito por el constructor ( Object ).

Recuerda:

  • Cada objeto tiene un enlace, [[Prototipo]], a veces expuesto como __proto__ .
  • Cada función tiene una propiedad prototype .
  • Los objetos creados con new están vinculados a la propiedad prototype de su constructor.
  • Si una función nunca se usa como un constructor, su propiedad prototype no se usará.
  • Si no necesita un constructor, use Object.create lugar de new .






javascript google-chrome debugging