Ahora también hay una cosa en esa superposición de desarrollador que puede abrir que es extremadamente útil para depurar su
interfaz de usuario
y esa es la opción de alternar inspector. Para alternar esto, verá esta superposición en la parte inferior aquí y
ahora puede hacer clic en los elementos de su interfaz de usuario para obtener información sobre ellos, por
ejemplo, aquí el botón.
Ahora ve el margen alrededor del botón, el relleno, ve su posición en el árbol de componentes,
ve alguna configuración del botón y también puede echar un vistazo a los alrededores
y, por lo tanto, tener una idea de por qué
se presentan las cosas la pantalla que son. Siempre puede cerrar esto nuevamente abriendo la superposición del desarrollador
y luego haciendo clic nuevamente en alternar inspector y, por supuesto, eso también está disponible aquí en iOS, donde también puede tener
una idea de cómo se colocan las cosas y por qué se colocan de esa manera.
Sin embargo, hay una herramienta aún mejor para inspeccionar esto y, por lo tanto, cerraré esto aquí y ese
es el depurador React Native.
Puede buscar el depurador React Native y debe encontrar esta página de github aquí y
en esta página, puede descargar el depurador React Native. Aquí encontrará las instrucciones de instalación y simplemente puede ir a
la página de lanzamiento al
final aquí para descargar uno de estos binarios para su
sistema operativo, por lo que para Windows, archivo exe aquí, archivo de configuración, para macOS, un archivo dmg, etc.
Así que estas son cosas diferentes
que puede descargar, iré con el archivo dmg para descargar la última versión aquí, guarde esto y espere a que termine
esta descarga y luego déjeme simplemente ejecutar esto y terminar la instalación simplemente recorriendo el instalador o
en mi caso aquí en macOS, simplemente arrastrándolo al directorio de aplicaciones y ahora puede
abrir el depurador React Native aquí y aquí está. Ahora, no está funcionando en este momento porque para
que esto funcione, debe habilitar la depuración remota de Javascript en los
dispositivos, justo lo que hicimos antes para depurar esto en Chrome.
Ahora esto esencialmente reemplaza esta experiencia de depuración de Chrome que podría decir o la mejora.
Ahora con esto abierto, presione el comando t en Mac o el control t en Windows o Linux aquí para abrir
una nueva pestaña y abra y confirme ese puerto React Native depurador que la pestaña Chrome también usó antes y confirme esto y
ahora está tratando de conectarse allí y para que esto tenga éxito, abra sus herramientas de desarrollador, digamos ahora en Android
y depure Javascript de forma remota y ahora
esto debería conectarse aquí y verá la salida de su consola aquí ahora en las herramientas del depurador.
También verá, si amplío esto, que en las fuentes, puede volver a sumergirse en su código aquí si lo desea como antes y la gran diferencia, por
supuesto, no
es que pueda hacer esto porque eso es lo mismo que podría
hacer. en el navegador, pero que aquí, ahora tienes las herramientas bastante ordenadas aquí a la izquierda.
Así que, por supuesto, aún
puede establecer puntos de interrupción y todo, pero aquí, ahora tiene sus herramientas de depuración de Redux
y no estamos usando Redux aquí, por lo que están bastante vacías, no pasa nada aquí,
pero en la parte inferior, tiene estas herramienta de depuración de elementos y esto le permite explorar su código React Native jsx, por decirlo así, su elemento,
su árbol de componentes en esta agradable interfaz de usuario que es definitivamente mejor que el inspector que podría alternar aquí porque
ahora aquí, realmente puede tener un mira lo que está pasando. Puede sumergirse en el componente raíz para luego encontrar
nuestro componente de aplicación allí y allí, encontramos nuestra vista con ese botón, podemos hacer clic en el botón
y vemos los accesorios que estamos usando en el botón, como onPress y El
título que establecemos.
Podemos hacer clic en nuestro propio componente donde vemos los accesorios que reenviamos allí, incluso podemos
cambiar el accesorio visible para alternar este modal como este si así lo queremos, así que
eso es realmente agradable.
Vemos los ganchos que estamos usando allí, como el estado que estamos administrando actualmente
en nuestro componente y si abro ese modal aquí, verá ese estado, los accesorios aquí cambian y si empiezo a
escribir aquí, como aprender React Native , verá que esto también se actualiza aquí a la derecha, como un
ligero retraso, pero
eso no debería ser un problema, por lo que es genial.
Podemos agregar esto y ver los cambios de estado aquí,
por supuesto, podemos profundizar en nuestra entrada de objetivos para ver el modal aquí.
Puede explorar la FlatList y lo que está configurado allí y profundizar en esta vista si
lo desea, por lo que realmente puede hacer muchas cosas allí y, en general, puede explorar su árbol de
componentes allí para averiguar qué está sucediendo. En los elementos donde agregó directamente un estilo, como en la
vista circundante, por ejemplo,
donde configuré este relleno, incluso puede inspeccionar el estilo y no solo ver el estilo, sino también cambiarlo, por ejemplo,
para aumentar el relleno o reducirlo,
y esto le brinda una manera fácil de probar diferentes estilos y diseños en la pantalla para descubrir qué
es lo que se ve bien para usted y qué desea cambiar.
También puede ir a la pestaña del generador de perfiles aquí y comenzar una sesión de creación de perfiles,
luego hacer algo en la pantalla como abrir y cerrar el modal y detener esto y obtendrá la experiencia de herramientas
de desarrollo React predeterminada aquí donde verá cuáles de sus componentes estaban repintado y puede sumergirse en eso
para tener una idea de lo que fue repintado, qué accesorios tenía en ese momento y cuántos ciclos de renderizado
tuvo que, por ejemplo, averiguar si hay una nueva pintura innecesaria, obviamente un poco algo más avanzado
que hacer y algo que desee hacer cuando esté más cerca de terminar su aplicación, para asegurarse de
que está optimizando el rendimiento y evitando ciclos innecesarios de renderizado, pero estas herramientas pueden ser realmente
útiles para detectar pequeños problemas en su aplicación y para asegurarse de que todo funcione de la manera
en que debería funcionar en su aplicación.
Ahora, otra cosa genial que puede hacer con el depurador React Native, puede hacer clic derecho en
cualquier lugar aquí, digamos aquí y puede habilitar la inspección
de la red y, si lo hace, puede ir a la pestaña de red y verá saliente solicitudes de red.
Ahora, todo esto es solo depurar solicitudes relacionadas, pero más adelante en el curso, cuando agreguemos nuestras
propias solicitudes de red, donde enviamos solicitudes a nuestro propio servidor web, incluso podemos inspeccionarlas aquí y analizarlas y
ver si estamos enviando y recibir los datos correctos, algo que de otro modo es
bastante difícil de
hacer con las aplicaciones nativas, aquí es muy fácil. Por lo tanto, React Native Debugger es realmente una herramienta genial para buscar en su aplicación, para establecer puntos
de interrupción, ver la consola, ver su árbol de componentes, ver los estilos que está usando allí y mucho más. Realmente le permite sumergirse profundamente en el código de
su aplicación, en su interfaz de usuario, en su lógica y descubrir si todo funciona como debería funcionar e
incluso puede entrar aquí y cambiar ciertas cosas como el estilo
como vio, para experimente con diferentes configuraciones y descubra dónde necesita ajustar su aplicación
para que funcione correctamente.