Edición de JavaScript con las herramientas para desarrolladores de Chrome

Question 1

Estoy intentando editar javascript en un sitio usando las herramientas para desarrolladores de Chrome. He leído alrededor de 30 relatos sobre cómo hacer esto y he visto algunos videos. El hecho es que cuando voy a la pestaña de fuentes y abro el archivo que quiero editar, no puedo hacerle nada. ¿Hay algún paso que me falte?

Puedo crear puntos de interrupción, recorrer, etc. Simplemente no puedo editar. ¿Se eliminó esta función recientemente?

Question 2

Sé que esta pregunta está obsoleta, pero acabo de tener un problema similar y encontré la solución.

Si tiene el archivo embellecido, Chrome no permitirá modificaciones. Lo apagué y pude editar. Dispuesto a apostar que esto es / fue tu problema.

Question 3

Puede editar javascript en las herramientas de desarrollo en la pestaña "Fuentes", PERO solo le permitirá editar javascript en su propio archivo. El script incrustado en un archivo HTML (o PHP) seguirá siendo de solo lectura.

Question 4

Tiene algunas limitaciones:

tiene que ser un archivo JS. no se pueden insertar etiquetas en una página html.
no se puede embellecer.

Question 5

No sé si necesita esto para guardar permanentemente, pero si necesita modificar temporalmente el js:

Puedo copiar ese javascript que quiero modificar en un editor de texto, editarlo, luego pegarlo en la consola y redefinirá cualquier función o lo que sea que necesite redefinir.

por ejemplo, si la página tiene:

<script>
var foo = function() { console.log("Hi"); }
</script>

Puedo tomar el contenido entre el script, editarlo y luego ingresarlo en el depurador como:

foo = function() { console.log("DO SOMETHING DIFFERENT"); }

y funcionará para mí.

O si tienes me gusta

function foo() {
    doAThing();
}

Puedes entrar

function foo() {
    doSomethingElse();
}

y foo será redefinido.

Probablemente no sea la mejor solución, pero funciona. Durará hasta que vuelva a cargar la página.

Question 6

Busqué "herramienta de desarrollo de Chrome editar javascript". Esta página es el primer resultado de búsqueda. Pero está demasiado desactualizado, no me ayuda.

Estoy usando Chrome 73, esta versión de Chrome tiene la opción "Habilitar anulaciones locales". Usando la función, podría editar un javascript y podría ejecutar y depurar.

Answer 1

94

Estoy intentando editar javascript en un sitio usando las herramientas para desarrolladores de Chrome. He leído alrededor de 30 relatos sobre cómo hacer esto y he visto algunos videos. El hecho es que cuando voy a la pestaña de fuentes y abro el archivo que quiero editar, no puedo hacerle nada. ¿Hay algún paso que me falte?

Puedo crear puntos de interrupción, recorrer, etc. Simplemente no puedo editar. ¿Se eliminó esta función recientemente?

javascript google-chrome web-developer-toolbar cooperia
fuente

1

Puedo hacer llamadas en la consola sin problemas. Simplemente no puedo editar cosas.

cooperia

1

Puede anular funciones y variables locales, pero no hay forma de guardar cambios en un archivo desde las herramientas de desarrollo. Todavía necesitas un editor externo para eso.

Geuis

1

En realidad, puedo editar archivos css pero no puedo editar un script incrustado en un archivo php. >.>

cooperia

1

Bueno, puedo hacer lo que quiera con Opera. Tipo de problema resuelto.

cooperia

1

@cooperia colocó su código js en un archivo * .js, luego podrá editarlo y ejecutarlo en tiempo real en Chrome.

Mahn

Answer 2

1

Puedo hacer llamadas en la consola sin problemas. Simplemente no puedo editar cosas.

cooperia

Answer 3

1

Puede anular funciones y variables locales, pero no hay forma de guardar cambios en un archivo desde las herramientas de desarrollo. Todavía necesitas un editor externo para eso.

Geuis

Answer 4

1

En realidad, puedo editar archivos css pero no puedo editar un script incrustado en un archivo php. >.>

cooperia

Answer 5

1

Bueno, puedo hacer lo que quiera con Opera. Tipo de problema resuelto.

cooperia

Answer 6

1

@cooperia colocó su código js en un archivo * .js, luego podrá editarlo y ejecutarlo en tiempo real en Chrome.

Mahn

Answer 7

105

Sé que esta pregunta está obsoleta, pero acabo de tener un problema similar y encontré la solución.

Si tiene el archivo embellecido, Chrome no permitirá modificaciones. Lo apagué y pude editar. Dispuesto a apostar que esto es / fue tu problema.

raddevon
fuente

4

sí, eso ayudó, gracias @raddevon, puedo editarlos ahora pero no ocurre ningún efecto en la página

Bolas

2

Para otras personas que buscan este tema: había configurado Prettify en OFF pero todavía no podía editar. Encenderlo y apagarlo nuevamente ayudó. (Gracias a IT Crowd por ese consejo;))

Drkawashima

3

Continuó: No. Resulta que tengo el mismo problema que @raddevon. Quizás un error en Chrome. Puede editar y guardar la secuencia de comandos, y puede alcanzar puntos de interrupción durante la depuración. Pero el script que se está ejecutando sigue siendo la versión original no editada. Ejemplo: edité el script, comenté cada una de las líneas, pero aún podía ejecutar el script, alcanzar puntos de interrupción en las líneas, etc. Así que la versión editada ni siquiera se está ejecutando, solo se está mostrando ... en todo tipo de formas diferentes sin ningún efecto

Drkawashima

4

Como nota al margen, si embellece, luego copie y pegue de nuevo en el archivo original, será un archivo original embellecido que es editable.

Eoin

2

@Eoin ¡Maravilloso! Eso funcionó totalmente. Y con la funcionalidad de "Anulaciones locales", esto funciona perfectamente. Gracias por la pista :-)

Xan-Kun Clark-Davis

Answer 8

4

sí, eso ayudó, gracias @raddevon, puedo editarlos ahora pero no ocurre ningún efecto en la página

Bolas

Answer 9

2

Para otras personas que buscan este tema: había configurado Prettify en OFF pero todavía no podía editar. Encenderlo y apagarlo nuevamente ayudó. (Gracias a IT Crowd por ese consejo;))

Drkawashima

Answer 10

3

Continuó: No. Resulta que tengo el mismo problema que @raddevon. Quizás un error en Chrome. Puede editar y guardar la secuencia de comandos, y puede alcanzar puntos de interrupción durante la depuración. Pero el script que se está ejecutando sigue siendo la versión original no editada. Ejemplo: edité el script, comenté cada una de las líneas, pero aún podía ejecutar el script, alcanzar puntos de interrupción en las líneas, etc. Así que la versión editada ni siquiera se está ejecutando, solo se está mostrando ... en todo tipo de formas diferentes sin ningún efecto

Drkawashima

Answer 11

4

Como nota al margen, si embellece, luego copie y pegue de nuevo en el archivo original, será un archivo original embellecido que es editable.

Eoin

Answer 12

2

@Eoin ¡Maravilloso! Eso funcionó totalmente. Y con la funcionalidad de "Anulaciones locales", esto funciona perfectamente. Gracias por la pista :-)

Xan-Kun Clark-Davis

Answer 13

52

Puede editar javascript en las herramientas de desarrollo en la pestaña "Fuentes", PERO solo le permitirá editar javascript en su propio archivo. El script incrustado en un archivo HTML (o PHP) seguirá siendo de solo lectura.

Welah
fuente

4

Estoy usando Chrome en Linux y todavía no puedo editar el JavaScript, incluso si es un solo archivo .js.

roopunk

2

Nota un poco interesante: Activar / desactivar Pretty Print (el icono "{}") permitirá editar js incrustados, pero los cambios no tendrán efecto, por lo que todavía no es lo que estamos buscando. (Chrome 29)

Patrick

Eso es lo que necesitaba saber. Gracias.

geeves

Answer 14

4

Estoy usando Chrome en Linux y todavía no puedo editar el JavaScript, incluso si es un solo archivo .js.

roopunk

Answer 15

2

Nota un poco interesante: Activar / desactivar Pretty Print (el icono "{}") permitirá editar js incrustados, pero los cambios no tendrán efecto, por lo que todavía no es lo que estamos buscando. (Chrome 29)

Patrick

Answer 16

Eso es lo que necesitaba saber. Gracias.

geeves

Answer 17

29

Tiene algunas limitaciones:

tiene que ser un archivo JS. no se pueden insertar etiquetas en una página html.
no se puede embellecer.

gcb
fuente

Si después de seguir la guía anterior y los cambios en la pestaña Fuentes simplemente no surten efecto, intente hacer clic derecho en el archivo editado en la vista de árbol a la izquierda y seleccione "Guardar". Puede aparecer un cuadro de diálogo pidiéndole que guarde un archivo local, pero puede cancelarlo. Solo en ese momento, el historial de edición de Chrome finalmente muestra que la edición se ha bloqueado.

Erhhung

me estaba volviendo loco porque este nuevo archivo tenía js incrustado pero no pude editar ... no entendí por qué ... gracias #gcb y #welah

carinlynchin

¿Es posible desinstalar un archivo JS de la lista en la Sourcespestaña de Herramientas para desarrolladores?

techie_28

@ techie_28 no estoy seguro, abre otra pregunta. Pero escribiría una extensión rápida para eso.

gcb

Answer 18

Si después de seguir la guía anterior y los cambios en la pestaña Fuentes simplemente no surten efecto, intente hacer clic derecho en el archivo editado en la vista de árbol a la izquierda y seleccione "Guardar". Puede aparecer un cuadro de diálogo pidiéndole que guarde un archivo local, pero puede cancelarlo. Solo en ese momento, el historial de edición de Chrome finalmente muestra que la edición se ha bloqueado.

Erhhung

Answer 19

me estaba volviendo loco porque este nuevo archivo tenía js incrustado pero no pude editar ... no entendí por qué ... gracias #gcb y #welah

carinlynchin

Answer 20

¿Es posible desinstalar un archivo JS de la lista en la Sourcespestaña de Herramientas para desarrolladores?

techie_28

Answer 21

@ techie_28 no estoy seguro, abre otra pregunta. Pero escribiría una extensión rápida para eso.

gcb

Answer 22

No sé si necesita esto para guardar permanentemente, pero si necesita modificar temporalmente el js:

Puedo copiar ese javascript que quiero modificar en un editor de texto, editarlo, luego pegarlo en la consola y redefinirá cualquier función o lo que sea que necesite redefinir.

por ejemplo, si la página tiene:

<script>
var foo = function() { console.log("Hi"); }
</script>

Puedo tomar el contenido entre el script, editarlo y luego ingresarlo en el depurador como:

foo = function() { console.log("DO SOMETHING DIFFERENT"); }

y funcionará para mí.

O si tienes me gusta

function foo() {
    doAThing();
}

Puedes entrar

function foo() {
    doSomethingElse();
}

y foo será redefinido.

Probablemente no sea la mejor solución, pero funciona. Durará hasta que vuelva a cargar la página.

Answer 23

Busqué "herramienta de desarrollo de Chrome editar javascript". Esta página es el primer resultado de búsqueda. Pero está demasiado desactualizado, no me ayuda.

Estoy usando Chrome 73, esta versión de Chrome tiene la opción "Habilitar anulaciones locales". Usando la función, podría editar un javascript y podría ejecutar y depurar.

Edición de JavaScript con las herramientas para desarrolladores de Chrome

Respuestas: