1 00:00:02,300 --> 00:00:06,340 Ahora, a veces, el registro de la consola por sí solo no lo 2 00:00:06,380 --> 00:00:11,270 lleva tan lejos, necesita más ayuda y, en tales casos, puede depurar su código de forma remota. 3 00:00:11,270 --> 00:00:17,750 Ahora, para eso, debe abrir el menú de depuración en estos emuladores o en dispositivos reales 4 00:00:17,750 --> 00:00:23,650 también si está trabajando con ellos. Para ello, presione el simulador 5 00:00:23,660 --> 00:00:34,030 de iOS, comando d y se abrirá este menú aquí, en Android, presione comando o control my abrirá este menú. 6 00:00:34,030 --> 00:00:38,360 Ahora verá algunas opciones allí y veremos las importantes a lo largo de este módulo. 7 00:00:38,360 --> 00:00:41,780 La opción que elegiremos ahora es depurar js de forma remota. 8 00:00:42,050 --> 00:00:48,290 Si presiona esto, se abrirá una nueva pestaña en el navegador que navegó automáticamente a localhost 1901 en mi caso aquí, barra 9 00:00:48,680 --> 00:00:54,700 de interfaz de usuario del depurador, que debería abrirse automáticamente. Ahora, para que esto funcione correctamente, asegúrese de que en 10 00:00:54,690 --> 00:01:01,160 sus herramientas de desarrollo de exposición, haya configurado la conexión para que sea de alarma o local, no de túnel, de lo 11 00:01:01,160 --> 00:01:08,490 contrario, esto será súper lento y ahora lo que este depurador le brinda, esta nueva pestaña es que puede abra las herramientas de desarrollador de 12 00:01:08,500 --> 00:01:13,650 Chrome ahora con el acceso directo que debería ver aquí y allá, ahora también verá el mismo 13 00:01:14,790 --> 00:01:19,890 registro de consola que está obteniendo aquí, por lo que ahora también tiene otra consola en la 14 00:01:19,890 --> 00:01:25,320 que puede buscar, que podría ser más conveniente para trabajar , solo para mostrar rápidamente ese ejemplo con 15 00:01:25,320 --> 00:01:26,930 los objetivos del curso nuevamente. 16 00:01:26,940 --> 00:01:36,290 Si la consola registra mis objetivos del curso aquí y guardo esto, esto se reconstruye y ahora vemos la matriz aquí y podemos 17 00:01:36,290 --> 00:01:37,040 expandirla. 18 00:01:37,040 --> 00:01:39,050 Por lo tanto, esto podría ser un 19 00:01:39,140 --> 00:01:41,420 poco más conveniente para trabajar, básicamente como lo conoce del 20 00:01:41,420 --> 00:01:44,760 desarrollo web en caso de que sea un desarrollador web, pero también puede hacer más. 21 00:01:44,780 --> 00:01:50,570 Puede sumergirse en las fuentes, por ejemplo, para sumergirse en su código fuente y establecer puntos de interrupción. Simplemente expanda esta cosa del trabajador del 22 00:01:50,570 --> 00:01:56,870 depurador aquí, expanda estas carpetas y encontrará la estructura de carpetas con la que también está 23 00:01:56,900 --> 00:01:58,750 trabajando, por ejemplo, aquí 24 00:01:58,820 --> 00:02:05,000 en su carpeta de usuarios, encontrará la aplicación. archivo js, encuentra los componentes. 25 00:02:05,450 --> 00:02:10,950 Así que ahora en la aplicación. js si abre ese archivo, verá su código tal como lo 26 00:02:10,960 --> 00:02:12,510 escribió, por lo que en 27 00:02:12,550 --> 00:02:15,560 la versión sin compilar es genial porque es fácil reconocer su 28 00:02:15,700 --> 00:02:21,880 código allí y ahora aquí, por ejemplo, digamos que desea detener el código cuando está a punto de agregar un nuevo objetivo, puede 29 00:02:21,880 --> 00:02:25,350 agregar un punto de interrupción haciendo clic a la izquierda del número de 30 00:02:25,360 --> 00:02:27,370 línea aquí para que tenga esta marca 31 00:02:27,370 --> 00:02:32,730 azul y ahora la ejecución de su código se detendrá la próxima vez que toque esta línea de código aquí. 32 00:02:32,830 --> 00:02:36,930 Ahora habilité la depuración en el emulador de Android, por lo que no se detendrá si 33 00:02:36,940 --> 00:02:39,980 lo intento en iOS, se detendrá si lo intento en Android. 34 00:02:40,000 --> 00:02:47,500 También podríamos haberlo habilitado en iOS, aquí con depuración remota js pero no lo hice, así que vamos con 35 00:02:47,500 --> 00:02:48,250 Android. 36 00:02:48,310 --> 00:02:49,800 Puede ignorar esta advertencia 37 00:02:49,840 --> 00:02:57,340 aquí, simplemente puede descartarla y ahora presionar agregar nuevo objetivo y tal vez ingresar aprender React Native, hacer clic en Agregar y ahora verá, 38 00:02:57,340 --> 00:03:04,030 esto se está atascando aquí porque si vuelve a las herramientas de desarrollo, esto es ahora en pausa, ves que ahora 39 00:03:04,060 --> 00:03:06,580 está resaltado en azul, se está pasando y 40 00:03:06,670 --> 00:03:12,610 ahora lo bueno es que puedes recorrer tu código paso a paso con estos controles aquí, simplemente juega con 41 00:03:12,760 --> 00:03:18,400 ellos y también puedes desplazarte sobre las cosas para mirar en su código, por ejemplo, para ver 42 00:03:18,400 --> 00:03:21,060 el valor actual en el título del objetivo. 43 00:03:21,070 --> 00:03:25,480 Ahora podemos simplemente avanzar a través de estas líneas paso a paso con este botón, 44 00:03:25,480 --> 00:03:30,220 puede ingresar a una llamada de función con este botón o salir de él con este botón 45 00:03:31,210 --> 00:03:35,430 y siempre puede reanudar la ejecución del código con este botón de reproducción azul. 46 00:03:38,030 --> 00:03:43,850 Esta puede ser una herramienta muy poderosa para sumergirse profundamente en el flujo de su código porque le 47 00:03:43,850 --> 00:03:45,810 permite comprender completamente lo que 48 00:03:45,890 --> 00:03:51,240 está sucediendo, analizar sus valores en tiempo de ejecución y obtener un control total sobre su código. 49 00:03:51,260 --> 00:03:56,960 Ahora, si desea obtener más información sobre cómo usar las herramientas de depuración de Chrome, encontrará un enlace útil adjunto 50 00:03:56,990 --> 00:04:01,040 a esta conferencia que contiene más información sobre las herramientas de depuración de Chrome.