Entonces, si quieres obtener este error en tus DevTools, lo que necesitas hacer es ir a la configuración de DevTool, experimentos, desplázate hasta, oh sí, en realidad no te desplaces, pero encuentra la casilla que dice iniciadores de eventos de línea de tiempo y márcala. Necesitas tenerla marcada. Y luego, si la tienes marcada, lo que verías es que para cada temporizador, para cada solicitud de animation frame, llamada para cosas así, verías estos errores muy convenientes que te señalan el lugar donde estaba el code, cuando se programó el temporizador.
Pero bueno, en este caso tengo un temporizador y este temporizador toma, el manejador del temporizador toma 90 milisegundos. Y la mayoría de los códigos aquí también parecen ser redux, algunas cosas de redux, alguna llamada a función, redux, redux, redux, redux, parche de redux, rect redux, rect redux, sigue bajando realmente bajo, rect redux, alguna función anónima, nombre, desarrollo de rect DOM, nombre TSX. Ooh, ¿hay algún selector costoso? Confuso.
Entonces, por cierto, aquí podrías observar otro error de DevTools que probablemente experimentarías cuando estás perfilando cosas. Así que cada vez que obtienes, como cada vez que veo esta extraña llamada a función sin etiquetar en medio de un gráfico principal, es como una cosa, ¿verdad? En medio de un frame con un montón de espacio vacío debajo de él, lo que realmente parece estar sucediendo aquí es que DevTools no logró capturar las llamadas a funciones reales que están sucediendo durante todo este tiempo. Elevé el error sobre esto, y afortunadamente nadie lo arregló aún, pero eso sucede con el perfilado de Rheq de vez en cuando, esto es muy desafortunado, yo, esto es con lo que voy a lidiar porque esconde lo que está sucediendo en el rastro. Y la única forma de lidiar con esto que tengo es cambiando a una versión más antigua de Chrome, que mi referencia es simplemente Chrome 90, normalmente uso Chrome 90, e intento grabar el rastro allí porque las versiones más antiguas no son, como supongo que funcionan de manera diferente, por lo que no siempre se ven afectadas por el cambio.
Entonces, intentemos hacer eso porque mira, hay una llamada a función amarilla, sin etiquetar, como cualquier nombre de función aquí, y hay otra llamada a función amarilla sin etiquetar sin ninguna asociación aquí con un montón de espacio vacío debajo y algunas referencias aleatorias. Y esto es simplemente super, super raro. Como, o no super, super raro, es como lo vi un montón de veces, así que sé que esto es solo un error de DevTools. Entonces, intentemos perfilar esa parte correctamente. Y para hacer eso, voy a buscar versiones antiguas de Chromium, y voy a encontrar cualquier enlace que me permita descargar versiones antiguas de Chromium, que yo estaba, oh sí, normalmente uso este enlace. Parece muy sospechoso, pero en realidad enlaza con el oficial almacenamiento común de data, googleapps.com, así que está bien. Frederick sugiere probablemente usar el Firefox Profiler, que en realidad es una buena idea. Nunca lo he probado. Probablemente debería funcionar, pero no voy a arriesgarme ahora. Así que solo voy a buscar un juego mac irm90 algo. No, dame el 90, por favor, dame el 90. ¿Por qué no puedo ver el 90? Bueno, lo que sea, tomaré el 90. 92, 92, 92. Sí, este. Tomemos ese. Voy a descargar. Debería descargar Chromium. Abre el archivo. Oh, espera, no, no, no, oh no. Espera. Correcto, porque es el. Necesitas hacer clic derecho y, necesitas eliminar los, algunos atributos. Espera, ¿cuáles son los X-utters? Sé que puedes ver mi historial de línea de comandos. Luts Chrome. Chrome Mac. Oh, Chrome Mac cinco. Puedes ver que he hecho, esta no es mi primera vez haciendo esto. Desde tu mapa. Y ahora debería supuestamente abrir, sí. Así que esto es una cosa de Mac OS, simplemente sucede si tienes muchas pestañas que están como sin firmar o algo así, como no el canal oficial de publicación o lo que sea. De todos modos.
Mm. Ahora, si yo tomo mi URL y voy a mi antiguo Chromium y abro la aplicación aquí y luego intento grabar esta misma interacción usando el antiguo Chromium. Así que abre. Abre el desplegable, haz clic en grabar, haz clic en texto, oh no, no habilité el estrangulamiento de CPU. Detén la grabación. Espera, déjame hacerlo con estrangulamiento de CPU para que obtengamos la misma imagen. Correcto, abre, graba. Detén la grabación y detén. Entonces lo que veré es que obtendré, de nuevo, las mismas tres. Espera, oh. Espera. Siguiente pantalla. Ah. Eso es lo que puedo obtener por tener una pantalla extra. Vería las mismas tres cosas que vi en la grabación anterior, ¿verdad? Y aquí está mi temporizador de fuego que estaba buscando. Oh no, tiene el mismo error. Maldita sea, realmente necesito Chrome 90. Pero como sea, no voy a gastar más tiempo en esto. Esto es algo con lo que normalmente trabajo obteniendo Chrome 90, tal vez es demasiado antiguo, no puedo cargarlo desde allí. Pero realmente podrías ver que es, como una vez que empiezas a verlo más a menudo, claramente verías que este es un error de Chrome. Porque si comparas las dos grabaciones, compara sobre estas llamadas a funciones, estas extrañas llamadas a funciones sin etiquetar están sucediendo. Verías que están sucediendo en lugares muy diferentes. Dirías que la mayoría del code se ve igual. Correcto, tenemos el CarseB, se divide en dos funciones aquí. Pero este es otro error de DevTools, en realidad se solucionó. A veces DevTools en el pasado solía, todavía lo están, ¿todavía lo están haciendo? No lo sé. Pero a veces cuando tendrías una función larga, una única función larga, DevTools dividiría esa función en dos patas separadas, lo cual también es confuso. Pero si miras el code, verías que es prácticamente el mismo code, CarseB, yada, yada, yada, como todo lo mismo, la misma pila de ejecución, ¿verdad? Excepto que aquí, estas extrañas llamadas a funciones sin etiquetar suceden justo después de la siguiente función. Y aquí, las funciones simplemente continúan.
Comments