online - javascript console chrome
¿Cómo establecer puntos de interrupción en Javascript en línea en Google Chrome? (11)
Actualice la página que contiene la secuencia de comandos mientras las herramientas de desarrollador están abiertas en la pestaña de scripts. Esto agregará una entrada (de 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.
Cuando abro Developer Tools 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 dentro de html y código de JavaScript! Traté de usar la consola de JavaScript, que a su vez tiene errores, por ejemplo, una vez que encuentra un error JS, no puedo salir de él a menos que actualice toda la página. ¿Alguien puede ayudar?
Agregar debugger; en la parte superior de mi guión funcionó para mí.
Esta es una extensión de la respuesta anterior de Rian Schmits . En mi caso, tenía código HTML incrustado en mi código JavaScript y no pude 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 / Fuentes, se presentó la carpeta Agregar 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.
Me encontré con este problema, sin embargo, mi función en línea estaba dentro de 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 abría la vista particular con mi línea (no tenía otra opción) no era accesible.
La única forma en que pude golpearlo fue poner una función errónea o llamar dentro de la función JS en línea.
Mi solución incluye:
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, me preguntaron 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 a través de la línea y mantener el punto de ruptura allí para más adelante.
Una forma extremadamente complicada de llegar a él ... Pero funcionó y podría ser útil cuando se trata de aplicaciones de una sola página que cargan dinámicamente tus vistas.
La VM[n] no tiene un valor significativo, y la n en equivale a la ID del script. Esta información se puede encontrar aquí: Chrome "[VM]"
Mi situación y lo que hice para arreglarlo:
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, al ingresar al depurador Javascript en Chrome, hago clic en la pestaña de scripts y despliego la lista como se muestra arriba. Puedo ver 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 refrescó / recargó la página, voila, apareció en la lista desplegable, y todo estaba bien nuevamente.
Espero que esto sea útil para cualquier persona que tenga problemas para depurar JavaScript incrustado en una página html.
Otro truco simple e intuitivo para depurar, especialmente el script dentro de html devuelto por ajax, es poner temporalmente console.log ("prueba") dentro del script.
Una vez que haya activado 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 de "prueba". simplemente haga clic en la fuente (algo así como VM4xxx) y ahora puede establecer el punto de ruptura.
PD: además, puedes considerar poner la declaración "depurador" si estás usando Chrome, como lo que sugiere @Matt Ball
Si no puede ver la pestaña "Secuencias de comandos", asegúrese de que está iniciando Chrome con los argumentos correctos. Tuve este problema cuando --remote-shell-port=9222 Chrome para depurar JavaScript del lado del servidor con el argumento --remote-shell-port=9222 . No tengo ningún problema si abro Chrome sin argumentos.
También puede darle un nombre a su script:
<script> ... (your code here) //# sourceURL=somename.js </script>
por supuesto, reemplace "somename" por un nombre;) y luego lo verá en el depurador de Chrome en "Sources> top> (no domain)> somename.js" como un script normal y podrá depurarlo como otros scripts
Usando Visual Studio (2012) tuve el mismo problema y el cambio a IIS Express resolvió el problema.
El atributo de type la etiqueta del script no tuvo en cuenta.
Por algún motivo, el Visual Studio Development Server no proporciona todo lo que Chrome necesita para habilitar los puntos de interrupción.
Use la pestaña de fuentes, puede establecer puntos de interrupción en JavaScript allí. En el árbol de directorios debajo de él (con las flechas hacia arriba y hacia abajo), puede seleccionar el archivo que desea depurar. Puede salir de un error presionando currículum en el lado derecho de la misma pestaña.
¿Estás hablando de código dentro de las etiquetas <script> , o en los atributos de etiquetas HTML, como este?
<a href="#" onclick="alert(''this is inline JS'');return false;">Click</a>
De cualquier manera, la palabra clave del debugger como esta funcionará:
<a href="#" onclick="debugger; alert(''this is inline JS'');return false;">Click</a>
NB Chrome no se detendrá en el debugger si las herramientas de desarrollo no están abiertas.
También puede establecer puntos de interrupción de propiedades en archivos JS y etiquetas <script> :
- Haga clic en la pestaña Fuentes
- Haga clic en el icono Mostrar navegador y seleccione el archivo a
- Haga doble clic en el número de línea en el margen izquierdo. Se agrega una fila correspondiente al panel Puntos de interrupción (4).