paquete. Seguramente, tiene que haber una mejor manera de hacer esto. Entonces, la idea era, ¿qué pasaría si usáramos nuestra API de viaje en el tiempo para extraer toda la información de
React de una grabación de la aplicación y guardarla para su uso en nuestro cliente de depuración. Así, no hay ninguna extensión instalada en Chrome. Vamos a tener que encontrar una manera de procesar la grabación y extraer estos datos. No sabemos cuándo
React realmente se renderizó, ¿y cómo obtenemos esos valores de operaciones de todos modos? Así que, nuestra idea era que en nuestro servidor
backend cada vez que alguien abre una grabación para depurarla, vamos a iniciar un pequeño proceso adicional en segundo plano que utiliza nuestras APIs para extraer los datos. Y entonces, para hacer eso posible, vamos a tener que poner código en nuestra bifurcación de Chrome para capturar marcas de tiempo para que incluso sepamos en qué puntos en el tiempo
React se comprometió durante la grabación. Así que, la mayoría de nuestras modificaciones a Chrome están en un archivo de 6,000 líneas que es una mezcla de C++ y
JavaScript dentro de cadenas de C++, lo cual es horrible. Pero, entramos, principalmente yo, y creé, como, una pequeña versión falsa del objeto de gancho de
React DevTools. Y eso se carga en cada página, de modo que
React, durante la grabación, piensa que está hablando con la extensión. Pero, durante el proceso de grabación, sólo está guardando marcas de tiempo,
React renderizó,
React renderizó,
React renderizó. De esa manera, sabemos, más tarde, en qué puntos en el tiempo realmente importan. Hay un montón de piezas adicionales de contabilidad complicadas. Tengo que hacer algunos ahorros de variables de fibra de
React y variables de renderizado para guardar para más tarde, pero son quizás 100 líneas de código. No está tan mal. Así que, en el
backend, configuramos un andamiaje para que cada vez que un usuario abre una grabación por primera vez y no tenemos ningún dato guardado, iniciamos un proceso en segundo plano que tiene acceso a nuestro protocolo y ahora puede empezar a llamar a estas APIs de análisis para extraer datos. Ahora, podrías escribir cualquier script de Node independiente que use nuestro protocolo. De hecho, tenemos algunos ejemplos en un repositorio que hemos reunido. Pero conceptualmente, una rutina es sólo como un proceso en segundo plano que puede llamar a métodos de protocolo. Así que, la idea básica es que primero obtenemos todas estas anotaciones con las marcas de tiempo. Luego vamos a tener que realmente enviar una copia del código de
React DevTools JavaScript a este navegador en pausa en la grabación. Y luego para cada commit, vamos a pedir a ese paquete, dame todas las operaciones para ese commit. Tenemos que hacer un poco más de reformateo en los datos. Y luego finalmente, podemos guardar esta información para que pueda ser utilizada por nuestra interfaz de usuario del cliente. Entonces, ¿cómo se ejecuta el código a través del viaje en el tiempo? Y es la herramienta favorita de todos, eval. Ahora, por supuesto, nos han dicho durante años que usar eval es malo, y malvado, y peligroso, y un riesgo de seguridad. Y probablemente sea cierto. Pero en este caso, es el martillo que resuelve todo. Así que, puedes enviar, como un eval es sólo, aquí tienes una cadena de código, hey
JavaScript intérprete, por favor ejecuta esto como si fuera código real. Podemos enviar una cadena de código a través de la red y ejecutarla dentro de un navegador en pausa en la grabación en la nube y realmente funciona. Así que, en este ejemplo, sólo estoy evaluando como una pequeña cadena y son unas pocas líneas.
