page - Usar Google Chrome para depurar y editar javascript incrustado en la página HTML

inspector google chrome

Question

Las herramientas de desarrollador de Chrome le permiten editar javascript en el navegador si el javascript está en un archivo .js. Sin embargo, no parece que me permita editar javascript que está incrustado en una página HTML. es decir:

<script type="text/javascript>
// code here that I want to debug/edit
</script>

Este es un gran problema para mí ya que tengo bastante JavaScript incrustado en una página determinada.

Similar a esta pregunta: Editar bloques de JavaScript de la página web ... en vivo, pero esto es sobre Firefox, no Chrome.

¿Cómo puedo editar javascript incrustado en una página HTML usando Google Chrome Developer Tools?

Answer 1

En realidad, Chrome permite hacer eso, elegir archivos HTML en la pestaña Fuentes en la ventana Herramientas del desarrollador. Verá HTML en lugar de javascript y simplemente agregará puntos de interrupción en las etiquetas <script> . También puede agregar debugger; comando para script lo que quiere depurar. Por ejemplo:

<script>
// some code
debugger; // This is your breakpoint
// other code you will able to debugg
</script>

No olvides eliminar el debugger; Es cuando quieres lanzar tu sitio web.

Answer 2

Ninguna de estas respuestas me ha funcionado.

Lo que funciona para mí es que si tengo mi javascript en la página ya cargada, puedo copiar ese javascript, editarlo, pegarlo en la consola y redefinirá cualquier función o lo que sea que deba redefinir.

por ejemplo, si la página tiene:

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

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

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

y funcionará para mí.

O si tienes,

function foo() {
doAThing();
}

Solo puede ingresar

function foo() {
doSomethingElse();
}

y foo será redefinido.

Probablemente no sea la mejor solución, pero funciona.

Answer 3

Tuve un momento difícil para encontrar el archivo que tenía mi javascript en línea / incrustado. Para otros que tienen el mismo problema, esto puede o no ser útil ...

Usando Chrome 21.0.1180.89 m para Windows

Todos los archivos se muestran luego de hacer clic en ese botón colocado de forma muy discreta. Ver:

Ahora puedes comenzar a depurar ...

Answer 4

Vaya a la pestaña Elementos, encuentre su secuencia de comandos, haga clic con el botón derecho en la parte que necesita y elija "Editar como HTML".

Si Editar como HTML no aparece, haga doble clic en el nodo y se resaltará y se podrá editar.