javascript - modo - ¿Cómo averiguo a qué funciones se llama cuando se presiona un botón en la consola de Chrome?

modo debug chrome

Question

Estoy tratando de enseñarme la biblioteca JavaScript de Google Closure. Estoy examinando el widget TreeControl UI.

¿Cómo puedo usar Chrome Console para analizar qué funciones se ejecutan cuando hago clic en el botón "Cortar" en la demostración a continuación? Por ejemplo, ¿puedo de alguna manera establecer un punto de ruptura para eso? Intenté ver la fuente y mirar alrededor, pero creo que Chrome Console puede ofrecer un método más sistemático.

https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html

Answer 1

Esto puede ser útil para algunas personas:

Puede hacer clic con el botón derecho en un elemento en la pestaña de elementos y usar ''break on'' para romper, por ejemplo, la modificación del elemento secundario. https://developer.chrome.com/devtools/docs/javascript-debugging

Answer 2

Lo que estás buscando se llama ''Perfilar''.

Se puede lograr por:

1. Ir a Perfiles
2. Elija la primera opción (''Recoger JavaScript CPU Profile'')
3. Comience antes de presionar el botón ''Cortar''

Answer 3

Puede estar buscando la sección "Puntos de interrupción de escucha de evento" en el lado derecho del área del depurador. Abra eso y seleccione el evento click debajo de "mouse". Ver la imagen de la pantalla. A continuación, haga clic en el botón de la aplicación e inmediatamente se lo dirigirá al código que se está ejecutando.

Answer 4

Con la ventana de Chrome Developer Tools abierta, haga clic en la pestaña "Fuentes". Si no ve nada, puede que necesite hacer clic en el botón "Mostrar navegador" en la esquina superior izquierda de esa pestaña. Con el navegador abierto, navegue hasta el archivo donde está definida la función de cut() (en su caso es demo.html ). Cuando visualice el archivo, busque la línea donde se define la función de cut() y luego establezca un punto de interrupción en la primera línea dentro de esa función. Puede establecer un punto de interrupción haciendo clic en el número de línea en el lado izquierdo.

Una vez que haya establecido su (s) punto (s) de interrupción, haga algo en la página que desencadene la función de cut() y el navegador debería interrumpir la ejecución del script tan pronto ingrese a la función de cut() (asumiendo que su punto de corte está en la primera línea dentro de la función de cut() ). A partir de este punto, puede usar los controles en la parte superior derecha de la pestaña para ingresar / salir / pasar el código y ver qué está sucediendo.

Aquí hay una captura de pantalla de mí haciéndolo: http://d.pr/i/f6BO

Además, este es un gran video que habla sobre el uso de las herramientas de Chrome Dev, incluido el establecimiento de puntos de interrupción: http://www.youtube.com/watch?v=nOEw9iiopwI