1
00:00:02,240 --> 00:00:09,740
Ahora también hay una cosa en esa superposición de desarrollador que puede abrir que es extremadamente útil para depurar su

2
00:00:09,740 --> 00:00:11,030
interfaz de usuario

3
00:00:11,030 --> 00:00:17,780
y esa es la opción de alternar inspector. Para alternar esto, verá esta superposición en la parte inferior aquí y

4
00:00:17,780 --> 00:00:22,710
ahora puede hacer clic en los elementos de su interfaz de usuario para obtener información sobre ellos, por

5
00:00:22,730 --> 00:00:24,260
ejemplo, aquí el botón.

6
00:00:24,260 --> 00:00:29,990
Ahora ve el margen alrededor del botón, el relleno, ve su posición en el árbol de componentes,

7
00:00:30,440 --> 00:00:35,130
ve alguna configuración del botón y también puede echar un vistazo a los alrededores

8
00:00:35,130 --> 00:00:38,780
y, por lo tanto, tener una idea de por qué

9
00:00:38,900 --> 00:00:45,200
se presentan las cosas la pantalla que son. Siempre puede cerrar esto nuevamente abriendo la superposición del desarrollador

10
00:00:45,200 --> 00:00:51,410
y luego haciendo clic nuevamente en alternar inspector y, por supuesto, eso también está disponible aquí en iOS, donde también puede tener

11
00:00:51,410 --> 00:00:56,180
una idea de cómo se colocan las cosas y por qué se colocan de esa manera.

12
00:00:56,180 --> 00:01:02,670
Sin embargo, hay una herramienta aún mejor para inspeccionar esto y, por lo tanto, cerraré esto aquí y ese

13
00:01:02,690 --> 00:01:04,800
es el depurador React Native.

14
00:01:05,060 --> 00:01:10,580
Puede buscar el depurador React Native y debe encontrar esta página de github aquí y

15
00:01:10,580 --> 00:01:18,280
en esta página, puede descargar el depurador React Native. Aquí encontrará las instrucciones de instalación y simplemente puede ir a

16
00:01:18,780 --> 00:01:21,070
la página de lanzamiento al

17
00:01:24,380 --> 00:01:27,990
final aquí para descargar uno de estos binarios para su

18
00:01:27,990 --> 00:01:35,070
sistema operativo, por lo que para Windows, archivo exe aquí, archivo de configuración, para macOS, un archivo dmg, etc.

19
00:01:35,070 --> 00:01:37,860
Así que estas son cosas diferentes

20
00:01:37,890 --> 00:01:46,460
que puede descargar, iré con el archivo dmg para descargar la última versión aquí, guarde esto y espere a que termine

21
00:01:46,460 --> 00:01:53,730
esta descarga y luego déjeme simplemente ejecutar esto y terminar la instalación simplemente recorriendo el instalador o

22
00:01:53,730 --> 00:02:00,000
en mi caso aquí en macOS, simplemente arrastrándolo al directorio de aplicaciones y ahora puede

23
00:02:00,000 --> 00:02:07,620
abrir el depurador React Native aquí y aquí está. Ahora, no está funcionando en este momento porque para

24
00:02:07,620 --> 00:02:12,410
que esto funcione, debe habilitar la depuración remota de Javascript en los

25
00:02:12,420 --> 00:02:16,820
dispositivos, justo lo que hicimos antes para depurar esto en Chrome.

26
00:02:16,820 --> 00:02:22,270
Ahora esto esencialmente reemplaza esta experiencia de depuración de Chrome que podría decir o la mejora.

27
00:02:22,280 --> 00:02:30,140
Ahora con esto abierto, presione el comando t en Mac o el control t en Windows o Linux aquí para abrir

28
00:02:30,140 --> 00:02:38,690
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

29
00:02:38,690 --> 00:02:46,730
ahora está tratando de conectarse allí y para que esto tenga éxito, abra sus herramientas de desarrollador, digamos ahora en Android

30
00:02:46,730 --> 00:02:49,920
y depure Javascript de forma remota y ahora

31
00:02:50,000 --> 00:02:57,030
esto debería conectarse aquí y verá la salida de su consola aquí ahora en las herramientas del depurador.

32
00:02:57,020 --> 00:03:05,240
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

33
00:03:05,250 --> 00:03:05,960
supuesto, no

34
00:03:06,650 --> 00:03:10,520
es que pueda hacer esto porque eso es lo mismo que podría

35
00:03:10,520 --> 00:03:15,770
hacer. en el navegador, pero que aquí, ahora tienes las herramientas bastante ordenadas aquí a la izquierda.

36
00:03:15,770 --> 00:03:17,950
Así que, por supuesto, aún

37
00:03:17,960 --> 00:03:23,480
puede establecer puntos de interrupción y todo, pero aquí, ahora tiene sus herramientas de depuración de Redux

38
00:03:23,480 --> 00:03:28,790
y no estamos usando Redux aquí, por lo que están bastante vacías, no pasa nada aquí,

39
00:03:28,790 --> 00:03:37,760
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,

40
00:03:37,790 --> 00:03:45,140
su árbol de componentes en esta agradable interfaz de usuario que es definitivamente mejor que el inspector que podría alternar aquí porque

41
00:03:45,140 --> 00:03:52,660
ahora aquí, realmente puede tener un mira lo que está pasando. Puede sumergirse en el componente raíz para luego encontrar

42
00:03:52,660 --> 00:04:00,200
nuestro componente de aplicación allí y allí, encontramos nuestra vista con ese botón, podemos hacer clic en el botón

43
00:04:00,200 --> 00:04:06,080
y vemos los accesorios que estamos usando en el botón, como onPress y El

44
00:04:07,720 --> 00:04:09,170
título que establecemos.

45
00:04:09,250 --> 00:04:14,020
Podemos hacer clic en nuestro propio componente donde vemos los accesorios que reenviamos allí, incluso podemos

46
00:04:14,140 --> 00:04:18,720
cambiar el accesorio visible para alternar este modal como este si así lo queremos, así que

47
00:04:18,790 --> 00:04:20,220
eso es realmente agradable.

48
00:04:20,290 --> 00:04:25,070
Vemos los ganchos que estamos usando allí, como el estado que estamos administrando actualmente

49
00:04:25,150 --> 00:04:31,540
en nuestro componente y si abro ese modal aquí, verá ese estado, los accesorios aquí cambian y si empiezo a

50
00:04:31,540 --> 00:04:37,870
escribir aquí, como aprender React Native , verá que esto también se actualiza aquí a la derecha, como un

51
00:04:37,870 --> 00:04:39,220
ligero retraso, pero

52
00:04:39,280 --> 00:04:42,730
eso no debería ser un problema, por lo que es genial.

53
00:04:42,820 --> 00:04:46,600
Podemos agregar esto y ver los cambios de estado aquí,

54
00:04:46,600 --> 00:04:51,340
por supuesto, podemos profundizar en nuestra entrada de objetivos para ver el modal aquí.

55
00:04:51,400 --> 00:04:57,490
Puede explorar la FlatList y lo que está configurado allí y profundizar en esta vista si

56
00:04:57,490 --> 00:05:04,600
lo desea, por lo que realmente puede hacer muchas cosas allí y, en general, puede explorar su árbol de

57
00:05:04,660 --> 00:05:10,780
componentes allí para averiguar qué está sucediendo. En los elementos donde agregó directamente un estilo, como en la

58
00:05:10,780 --> 00:05:11,970
vista circundante, por ejemplo,

59
00:05:11,980 --> 00:05:17,320
donde configuré este relleno, incluso puede inspeccionar el estilo y no solo ver el estilo, sino también cambiarlo, por ejemplo,

60
00:05:17,320 --> 00:05:18,960
para aumentar el relleno o reducirlo,

61
00:05:19,030 --> 00:05:24,010
y esto le brinda una manera fácil de probar diferentes estilos y diseños en la pantalla para descubrir qué

62
00:05:24,010 --> 00:05:27,190
es lo que se ve bien para usted y qué desea cambiar.

63
00:05:27,250 --> 00:05:33,310
También puede ir a la pestaña del generador de perfiles aquí y comenzar una sesión de creación de perfiles,

64
00:05:33,310 --> 00:05:39,760
luego hacer algo en la pantalla como abrir y cerrar el modal y detener esto y obtendrá la experiencia de herramientas

65
00:05:39,760 --> 00:05:45,400
de desarrollo React predeterminada aquí donde verá cuáles de sus componentes estaban repintado y puede sumergirse en eso

66
00:05:45,400 --> 00:05:51,640
para tener una idea de lo que fue repintado, qué accesorios tenía en ese momento y cuántos ciclos de renderizado

67
00:05:51,640 --> 00:05:57,070
tuvo que, por ejemplo, averiguar si hay una nueva pintura innecesaria, obviamente un poco algo más avanzado

68
00:05:57,070 --> 00:06:02,800
que hacer y algo que desee hacer cuando esté más cerca de terminar su aplicación, para asegurarse de

69
00:06:02,800 --> 00:06:08,230
que está optimizando el rendimiento y evitando ciclos innecesarios de renderizado, pero estas herramientas pueden ser realmente

70
00:06:08,230 --> 00:06:13,870
útiles para detectar pequeños problemas en su aplicación y para asegurarse de que todo funcione de la manera

71
00:06:13,870 --> 00:06:16,360
en que debería funcionar en su aplicación.

72
00:06:16,360 --> 00:06:20,890
Ahora, otra cosa genial que puede hacer con el depurador React Native, puede hacer clic derecho en

73
00:06:21,130 --> 00:06:24,110
cualquier lugar aquí, digamos aquí y puede habilitar la inspección

74
00:06:24,250 --> 00:06:29,800
de la red y, si lo hace, puede ir a la pestaña de red y verá saliente solicitudes de red.

75
00:06:29,800 --> 00:06:35,770
Ahora, todo esto es solo depurar solicitudes relacionadas, pero más adelante en el curso, cuando agreguemos nuestras

76
00:06:35,770 --> 00:06:42,070
propias solicitudes de red, donde enviamos solicitudes a nuestro propio servidor web, incluso podemos inspeccionarlas aquí y analizarlas y

77
00:06:42,070 --> 00:06:47,140
ver si estamos enviando y recibir los datos correctos, algo que de otro modo es

78
00:06:47,380 --> 00:06:48,560
bastante difícil de

79
00:06:48,580 --> 00:06:55,480
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

80
00:06:55,720 --> 00:07:02,860
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

81
00:07:02,860 --> 00:07:10,570
su aplicación, en su interfaz de usuario, en su lógica y descubrir si todo funciona como debería funcionar e

82
00:07:10,660 --> 00:07:15,490
incluso puede entrar aquí y cambiar ciertas cosas como el estilo

83
00:07:15,490 --> 00:07:21,220
como vio, para experimente con diferentes configuraciones y descubra dónde necesita ajustar su aplicación

84
00:07:21,220 --> 00:07:23,380
para que funcione correctamente.