¿Cómo establecer puntos de interrupción en Javascript en línea en Google Chrome?

211

Cuando abro las Herramientas para desarrolladores en Google Chrome, veo todo tipo de características como Perfiles, Líneas de tiempo y Auditorías, ¡pero faltan funcionalidades básicas como poder establecer puntos de interrupción tanto en archivos js como en archivos html y javascript! Intenté usar la consola javascript, que en sí misma tiene errores; por ejemplo, una vez que encuentra un error de JS, no puedo salir de ella a menos que actualice toda la página. Alguien puede ayudar?

javascript debugging google-chrome as
fuente
Me di por vencido con Chrome. Intenté con Firefox y obtuve mi punto de corte en unos segundos. Puede ser posible con Chrome, pero ciertamente no es obvio cómo.
Oliver P

Respuestas:

127

Use la pestaña de fuentes, puede establecer puntos de interrupción en JavaScript allí. En el árbol de directorios debajo (con las flechas hacia arriba y hacia abajo), puede seleccionar el archivo que desea depurar. Puede salir de un error presionando reanudar en el lado derecho de la misma pestaña.

Rian Schmits
fuente
31
Por alguna razón, veo la lista de archivos js incluidos, pero no puedo elegir la página de ejecución en sí, no se muestra en la lista. ¿Algunas ideas?
ulu
67
@ulu, tuve el mismo problema. Asegúrese de que su atributo type = "text / javascript" esté configurado en su elemento <script>.
contactmatt
9
excepto que en HTML5 este atributo ya no es obligatorio. ¡No estoy cambiando el código fuente solo para depurar!
sashok_bg
10
No veo incluso después de agregar type = "text / javascript"
Nitin Kumar Mishra
3
si esto no funciona, y tiene un código JavaScript en línea como: <script> your code </script>agregue un nombre como: <script> your code //# sourceURL=somename.js </script> Esto se explica mejor en una respuesta a continuación
KM.
209

¿Estás hablando de código dentro de las <script>etiquetas, o en los atributos de la etiqueta HTML, como este?

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

De cualquier manera, la debuggerpalabra clave como esta funcionará:

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

Nota: Chrome no se detendrá en debuggers si las herramientas de desarrollo no están abiertas.

También puede establecer puntos de interrupción de propiedad en archivos JS y <script>etiquetas:

  1. Haga clic en la pestaña Fuentes
  2. Haga clic en el icono Mostrar navegador y seleccione el archivo
  3. Haga doble clic en el número de una línea en el margen izquierdo. Se agrega una fila correspondiente al panel Puntos de interrupción (4).

ingrese la descripción de la imagen aquí

Matt Ball
fuente
44
No hay pestaña Scripts. ¡Veo todas las otras pestañas que están en esta imagen pero no la pestaña Scripts!
as
55
Me refiero a poder establecer un punto de interrupción dentro de la etiqueta de scrip en html. También intenté usar el depurador; palabra clave pero no funciona. Chrome no tiene un punto de corte en eso, pero funciona en Firefox. Estoy buscando una solución de punto de interrupción que no se base en la palabra clave del depurador, lo cual es inconveniente para colocar en muchos lugares en el código y luego tener que eliminarlo.
as
2
En el menú desplegable debajo de la pestaña Scripts solo veo los archivos JS listados, pero no los archivos HTML que contienen la etiqueta <script> que quiero depurar. Firebug en FF tiene un menú desplegable similar, pero también enumera los archivos HTML que contienen etiquetas <script>. ¿Es esto un error o hay otra forma de establecer un punto de interrupción en el código JS incorporado?
Wolfram Arnold
8
Se llama a la pestaña en Sourceslugar de Scriptsahora.
CoderDennis
1
Cuando intenté depurar mi hsml js incrustado, obtuve una página en blanco en mi área de desarrollo. Tuve que actualizar mientras miraba el archivo fuente en blanco para que se completara.
HappyCoder86
73

También puedes ponerle un nombre a tu script:

<script> ... (your code here) //# sourceURL=somename.js </script>

por supuesto, reemplace "somename" por algún nombre;) y luego lo verá en el depurador de Chrome en "Fuentes> arriba> (sin dominio)> somename.js" como un script normal y podrá depurarlo como otros scripts

buildhome.eu
fuente
3
La forma más fácil y perfecta de hacerlo. pero tenga en cuenta para otros, recuerde eliminarlo antes de llevarlo a producción.
Zameer Fouzan
2
Dios mío, no tienes idea de cuánto me ayudó esto. Dios mío, esto es brillante. He estado buscando algo como esto por años.
GregRos
Usé esta idea (buena), pero no pude ver el nuevo archivo en la pestaña de fuentes, solo el archivo html. Luego ejecuté el código y, al final, en la consola, a la derecha de cualquier mensaje escrito desde el script, puede ver un enlace al código. La mejor parte es que el enlace muestra el nombre de archivo que le dio al script (es decir, // # sourceURL = somename.js).
Manuel Rivera
1
Te daría 1000 votos a favor si pudiera;) Truco muy útil
Giulio Quaresima
43

Actualice la página que contiene el script mientras las herramientas del desarrollador están abiertas en la pestaña de scripts. Esto agregará una entrada (programa) en la lista de archivos que muestra el html de la página, incluido el script. Desde aquí puede agregar puntos de interrupción.

Conejito Gruff
fuente
Esto no funcionó para mí. En cambio, hice clic en un icono de error de secuencia de comandos en la parte inferior derecha para abrir el archivo del programa en la pestaña de secuencias de comandos.
sanbikinoraion
1
¡Gracias! Usando Chrome 69, esto funcionó incluso si no estaba en la pestaña de fuentes. Tener las herramientas de desarrollador abiertas mientras la página cargada parece ser la clave.
Sam
Esta habría sido la respuesta aceptada si esta fuera mi pregunta. Gracias.
plumpNation
Trabajó en Chrome 83. En mi entorno, el nombre del archivo se basa en la URL de su aplicación. Por ejemplo, si la URL es example.com/xxx/yyy, el nombre del archivo será "aaaa".
Helix Quar
18

Otro truco intuitivo y simple para depurar, especialmente el script dentro de html devuelto por ajax, es poner temporalmente console.log ("prueba") dentro del script.

Una vez que haya disparado el evento, abra la pestaña de la consola dentro de las herramientas del desarrollador. verá el enlace del archivo de origen que se muestra en el lado derecho de la declaración de impresión de depuración "prueba". simplemente haga clic en la fuente (algo así como VM4xxx) y ahora puede establecer el punto de interrupción.

PD: además, puedes considerar poner una declaración de "depurador" si estás usando Chrome, como lo que sugiere @Matt Ball

conocido
fuente
10

Mi situación y lo que hice para solucionarlo:
tengo un archivo javascript incluido en una página HTML de la siguiente manera:
Nombre de la página: test.html

<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/common.js"></script>
        <title>Test debugging JS in Chrome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>
         <script type="text/javascript">
            document.write("something");
         </script>

        </div>
     </body>
</html>

Ahora, ingresando el depurador de Javascript en Chrome, hago clic en la pestaña Scripts y desplego la lista como se muestra arriba. Puedo ver claramente scripts / common.js, sin embargo, NO pude ver la página html actual test.html en el menú desplegable, por lo tanto, no pude depurar el javascript incrustado:

<script type="text/javascript">
  document.write("something");
</script>

Eso fue desconcertante. Sin embargo, cuando eliminé el tipo obsoleto = "text / javascript" del script incrustado:

<script>
  document.write("something");
</script>

... y actualicé / volví a cargar la página, listo, apareció en la lista desplegable, y todo volvió a estar bien.
Espero que esto sea útil para cualquiera que tenga problemas para depurar JavaScript incrustado en una página html.

Aditya Singh
fuente
¡Buen trabajo! Probado en Chrome 20.0.1132.57 en Mac 10.7.4 Error enviado al proyecto Chromium.
Mars Robertson
Tenga en cuenta que en HTML 4 y XHTML, typees un atributo obligatorio. En HTML5, es opcional.
hotshot309
2
No tiene nada que ver con el tipo. La secuencia de comandos es recopilada por VM después de la ejecución, a menos que el inspector ya esté abierto en este momento. Cuando volviste a cargar la página, no recopiló el script.
vsevik
Soy mi caso, la falta <div>me impidió ver el código en el depurador
ceztko
5

Agregar debugger;en la parte superior de mi script funcionó para mí.

JEKO
fuente
4

También tenía el mismo problema, cómo depurar JavaScript que está dentro de las <script>etiquetas. Pero luego lo encontré en la pestaña Fuentes, llamada "(índice)", con paréntesis. Haga clic en el número de línea para establecer puntos de interrupción.

ingrese la descripción de la imagen aquí

Este es Chrome 71.

ocarlsen
fuente
2

Si no puede ver la pestaña "Scripts", asegúrese de iniciar Chrome con los argumentos correctos. Tuve este problema cuando lancé Chrome para depurar JavaScript del lado del servidor con el argumento --remote-shell-port=9222. No tengo ningún problema si ejecuto Chrome sin argumento.

Ángel caido
fuente
¿Podría elaborar por favor? Tengo este problema exacto: no puedo ver la pestaña de scripts en absoluto. Descargué la última versión de desarrollador de Chrome.
Tom Redfern
2

Me encontré con este problema, sin embargo, mi función en línea era una vista angularJS. Por lo tanto, en la carga no pude acceder al script en línea para agregar la depuración, ya que solo index.html estaba disponible en la pestaña de fuentes del depurador.

Esto significaba que cuando estaba abriendo la vista particular con mi línea (no tenía otra opción) no era accesible.

La única forma en que pude golpear fue poner una función errónea o llamar dentro de la función JS en línea.

Mi solución incluyó: 

function doMyInline(data) {
        //Throw my undefined error here. 
        $("select.Sel").debug();

        //This is the real onclick i was passing to 
        angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
    }

Esto significa que cuando hice clic en mi botón, se me solicitó en la consola de Chrome. 

Uncaught TypeError: undefined is not a function

Lo importante aquí fue la fuente de esto: VM5658:6 hacer clic en esto me permitió pasar por la línea y mantener el punto de ruptura allí para más adelante ...

Una forma extremadamente complicada de alcanzarlo ... Pero funcionó y podría resultar útil para las aplicaciones de una sola página que cargan dinámicamente sus vistas.

El VM[n]no tiene un valor significativo y el nencendido equivale a la identificación del script. Esta información se puede encontrar aquí: Chrome "[VM]"

Pogrindis
fuente
1

Usando Visual Studio (2012) tuve el mismo problema y cambié a IIS Express resolvió el problema.

La scriptetiquetatype atributo de no se incluyó en él.

Por alguna razón, el Visual Studio Development Server no proporciona todo lo que Chrome necesita para habilitar los puntos de interrupción.

escape-llc
fuente
1

Sé que la Q no se trata, Firefoxpero no quería agregar una copia de esta pregunta para responderla yo mismo.

Para Firefox, debe agregar debugger;para poder hacer lo que @ matt-ball sugirió para la scriptetiqueta.

Entonces, en su código, agrega por debuggerencima de la línea que desea depurar y luego puede agregar puntos de interrupción. Si solo establece los puntos de interrupción en el navegador, no se detendrá.

Si este no es el lugar para agregar una respuesta de Firefox, dado que la pregunta es sobre Chrome. No lo hagas :( menos la respuesta, solo avísame dónde debería publicarlo y felizmente moveré la publicación. :)

T04435
fuente
0

Esta es una extensión de la respuesta anterior de Rian Schmits . En mi caso, tenía un código HTML incrustado en mi código JavaScript y no podía ver nada más que el código HTML. Tal vez la depuración de Chrome ha cambiado a lo largo de los años, pero al hacer clic con el botón derecho en la pestaña Fuentes / Orígenes me presentó Agregar carpeta al espacio de trabajo . Pude agregar todo mi proyecto, lo que me dio acceso a todos mis JavaScripts. Puede encontrar más detalles en este enlace . Espero que esto ayude a alguien.

Patricia
fuente