2011-11-23 14 views
63

Al usar Chrome y su depurador de JavaScript, cada vez que vuelvo a cargar mi página/scripts, pierdo mis puntos de interrupción y tengo que buscar el archivo de script en la ventana emergente, buscar la línea de código para mi punto de ruptura, hacer clic agréguela, etc.Depuración JavaScript de Chrome: cómo guardar puntos de interrupción entre la actualización de la página o el corte a través del código?

¿Hay alguna manera de guardar estos puntos de interrupción por lo que se rompe incluso después de una actualización de página (otros depuradores que he usado para hacerlo)?

Alternativamente, ¿hay alguna manera limpia en mi código de JavaScript? Puedo escribir algo para decirle a Chrome que comience a rastrear (para hacer una pausa en una línea)?

+2

Chrome Developer Tools debe mantener los puntos de corte JS entre las actualizaciones. ¿Está utilizando las etiquetas '

0

Puede usar la instrucción debugger; en su fuente para hacer que el depurador se rompa allí.

0

Chrome Developer Tools debe comportarse de la manera esperada, pero puede poner debugger; declaraciones en su código (de desarrollo) para pausar la ejecución.

34

Establezca sus puntos de interrupción, cambie a la pestaña Red y seleccione Conservar registro al navegar botón de alternar. Ahora los puntos de interrupción deberían estar allí cuando actualice.

O la forma en JavaScript es utilizar

debugger; 
+0

¿Y dónde exactamente está ese botón de alternar? No puedo verlo ... – Alvaro

18

Además, no se envía el archivo (s) de JavaScript desde el servidor al cliente con an attached query parameter to the URL with the current Epoch time? Esto se usa para evitar el almacenamiento en caché de los archivos de JavaScript.

Cuando este es el caso, parece que Chrome Developer Tools interpreta que el archivo es diferente después de la actualización, lo que eliminará (correctamente) los puntos de interrupción.

Para mí, eliminar el parámetro de consulta hizo que el CDT mantuviera los puntos de interrupción después de la actualización.

+3

¡Gracias! ExtJS 4 incluye un parámetro "_dc" para evitar que los archivos se almacenen en caché y eliminará los puntos de interrupción cada vez. Ext.Loader.setConfig ({ disableCaching: falso, e nabled: true }); '' a la configuración de la aplicación lo deshabilita. –

+0

@BrianTopping Thx para esa pista. ¿Por qué diablos hicieron una cosa tan estúpida como adjuntar parámetros dinámicos de consulta para evitar el almacenamiento en caché. Es el navegador (dev-tools)/server que debería controlarlo ... – Juri

+0

@sjogren_me, ¿cómo eliminaste el parámetro de consulta en Chrome Dev Tools? – gwg

8

Esto probablemente está sucediendo para los scripts que está cargando o evaluando dinámicamente desde otros scripts? Puedo decir por mí mismo que este escenario realmente me irritó hasta que descubrí la propiedad sourceURL. Al colocar el siguiente comentario con formato especial en la última línea de la secuencia de comandos que desea depurar lo hará 'ancla' dentro de Chrome por lo que tiene un marco de referencia para ello:

// # sourceURL = filename.js

¡Sus puntos de interrupción colocados manualmente ahora persistirán entre cargas de página!La convención en realidad se originó a partir de la especificación del mapa de origen, pero Chrome por lo menos la honra como una técnica independiente. Aquí hay un reference.

1

Para las personas que utilizan ExtJs 6.x:
en lugar de disableCaching en el Ext.Loader puede agregar un "caché" o "disableCacheBuster" parámetro consulta a la URL de la página. Esto eliminará el parámetro "_dc" del archivo y habilitará el depurador de Chrome para persistir en el punto de interrupción.

Vea bootstrap.js en su aplicación (parámetro de configuración disableCaching).

+0

parece haber otra forma formal al establecer valor en app.json para loader.cache: true, https://www.sencha.com/forum/showthread.php?303932-Setting-a-breakpoint-in-Chrome- disappears-on-refresh-is-there-a-workaround – saurabh

Cuestiones relacionadas