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

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

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

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

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

13

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.

— Byronaltice
fuente

5

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.

— wafe
fuente