¿Cómo puedo saber a qué funciones se llama cuando se presiona un botón en la consola de Chrome?

Question

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

¿Cómo puedo usar la Consola de Chrome 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

Con la ventana de herramientas para desarrolladores de Chrome abierto, 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 cut() (en su caso es demo.html). Cuando visualice el archivo, busque la línea donde se define la función 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 definido su punto de interrupción (s), hacer algo en la página que activaría la función cut() y el navegador debe romper la ejecución del script tan pronto como entra en la función cut() (asumiendo que su punto de ruptura está en la primera línea dentro de la función 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í hacerlo: http://d.pr/i/f6BO

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

Answer 2

Lo que usted está buscando se llama 'Perfilando'.

Se puede lograr por:

1. Ir a los perfiles
2. Elija primera opción ('recoger JavaScript Perfil CPU')
3. iniciarlo antes de botón de 'corte'

Answer 3

presionando 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

Esto puede ser útil para algunas personas:

puede hacer clic en un elemento de la ficha elementos y utilizar 'descanso en' romper el ejemplo modificación de sub elemento. https://developer.chrome.com/devtools/docs/javascript-debugging