¿Hay alguna manera de ver qué funciones de Javascript (el nombre de las funciones) se ejecutan en tiempo real en el Inspector de Chrome?

Por ejemplo, imagine que hay un código JavaScript que ejecutará someFunction() cuando se hace clic en un botón y hago clic en ese botón. Me pregunto si hay alguna manera de ver que el someFunction() acaba de ejecutarse. ¿Hay alguna manera de ver qué funciones se ejecutan en Chrome en tiempo real?¿Hay alguna manera de ver qué funciones de Javascript (el nombre de las funciones) se ejecutan en tiempo real en el Inspector de Chrome?

Si es la pestaña Perfiles en el inspector la que hace el truco, ¿cómo exactamente dice qué funciones dispara en tiempo real con eso?

EDITAR 1/21/2012 12: 36p Pacífico: Desde el comentario de Brian níquel a continuación, en la ficha Línea del tiempo del inspector es la manera de ver lo que ocurre en tiempo real, pero ¿cómo ve los nombres de las funciones ejecutadas en ¿la línea de tiempo?

Fuente

2012-01-20 trusktr

El tiempo real real sería algo inútil, ya que sería demasiado rápido para seguirlo. Establezca * puntos de interrupción * en el código que desea monitorear. – deceze

He visto funciones individuales enumeradas en la línea de tiempo. –

No puedo establecer puntos de interrupción porque no es mi código y no sé dónde establecer los puntos de interrupción. jeje. ¡Eso es lo que trato de descubrir! @BrianNickel, ¿de qué calendario estás hablando? – trusktr

La herramienta de desarrollador Timeline y Scripts se puede utilizar para lograr este objetivo.

Abra el panel de herramientas del desarrollador y presione Grabar en la línea de tiempo para comenzar la actividad de seguimiento.
Dispare el evento que le interese (es decir, en su ejemplo, haga clic en el botón), luego detenga la grabación (o continúe grabando, pero tenga en cuenta la cantidad de datos que está recopilando).
Tenga en cuenta las entidades registradas en el panel Línea de tiempo. Encuentra el evento relevante y haz clic en la flecha con forma de espiral a la izquierda de la barra de tiempo para ese evento. Esto expondrá las llamadas de función asociadas con ese evento.
Haga clic en el enlace a la derecha de la función de llamadas para ver el JavaScript correspondiente. (Solicita un nombre de función, pero tenga en cuenta que el evento puede estar asociado a una función anónima, por lo que no siempre hay un nombre disponible)
Si desea pasar por el controlador de eventos, inserte un punto de interrupción en la línea después de la declaración del manejador (suponiendo que la declaración del manejador de eventos es mayor que una línea). Como alternativa, expanda los Puntos de interrupción del escuchador de eventos en el panel Scripts y marque el tipo de evento apropiado (como se enumera en el panel Línea de tiempo para el evento relevante). Tenga en cuenta que este enfoque se dividirá en cada instancia de ese evento, en lugar de la única invocación que le interese.

Si tiene problemas con JavaScript miniaturizado e inserta puntos de interrupción (porque cada línea es tan larga), He aquí un consejo: abra el archivo de script minificado en el panel de Scripts a través del menú desplegable, luego haga clic en {}. Esto habilitará Pretty Print, expandiendo el código minificado en algo más legible agregando espacios en blanco. Esto le permite insertar puntos de corte más granularidad. Tenga en cuenta que si ahora regresa al panel Línea de tiempo, las referencias de secuencia de comandos (por ejemplo, jquery.min.js:3) ahora usan los números de línea bastante impresos, no los minúsculos, sin espacios en blanco.

Fuente

2012-01-21 21:06:21 cheeken

Veo, lo lleva a las líneas de código donde se encuentra la función. ¡Bonito! Veo que esto funciona bien con código no modificado, pero si tiene un código minificado que contiene todo en una a tres líneas, entonces no tiene suerte porque puede haber múltiples funciones definidas en una línea. Supongo que esto es lo mejor que tenemos en este momento. Sería conveniente agregar un conteo de columnas, no solo el conteo de líneas. Por ejemplo, 'jquery.min.js: 3: 56' sería mejor que solo' jquery.min.js: 3'. – trusktr

En realidad, hay un truco para solucionarlo. Por favor vea mi respuesta enmendada. – cheeken

¡Ajá, genial! De hecho, esa es exactamente la manera de hacerlo! – trusktr

Hay un montón de buenas utilidades que puede utilizar: console.trace();, debugger, etc.

Fuente

2012-01-20 05:47:27

Esto no proporciona una forma de ver qué funciones se llaman en tiempo real sin modificar el código. – trusktr

adición a la respuesta Gracia, Por favor, consulte estos dos artículos también

http://blog.chromium.org/2009/06/developer-tools-for-google-chrome.html

http://www.sagarganatra.com/2011/05/javascript-debugging-with-chrome.html

Fuente

2012-01-20 05:54:24

Interesante, pero el código que tengo no es mi propio código, así que estoy tratando de descubrir qué partes del código se ejecutan con ciertas acciones (como onclick, por ejemplo). Todas esas cosas en el segundo artículo son agradables, pero debes saber DÓNDE establecer puntos de interrupción y qué expresiones controlar, de lo que no tengo ni idea. ¿Hay alguna manera de ver qué función inicial se ejecuta cuando ocurre un determinado evento (por ejemplo, un clic)? – trusktr

¿Hay alguna manera de ver qué funciones de Javascript (el nombre de las funciones) se ejecutan en tiempo real en el Inspector de Chrome?

Respuesta

Cuestiones relacionadas