Ahora, a veces, el registro de la consola por sí solo no lo
lleva tan lejos, necesita más ayuda y, en tales casos, puede depurar su código de forma remota.
Ahora, para eso, debe abrir el menú de depuración en estos emuladores o en dispositivos reales
también si está trabajando con ellos. Para ello, presione el simulador
de iOS, comando d y se abrirá este menú aquí, en Android, presione comando o control my abrirá este menú.
Ahora verá algunas opciones allí y veremos las importantes a lo largo de este módulo.
La opción que elegiremos ahora es depurar js de forma remota.
Si presiona esto, se abrirá una nueva pestaña en el navegador que navegó automáticamente a localhost 1901 en mi caso aquí, barra
de interfaz de usuario del depurador, que debería abrirse automáticamente. Ahora, para que esto funcione correctamente, asegúrese de que en
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
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
Chrome ahora con el acceso directo que debería ver aquí y allá, ahora también verá el mismo
registro de consola que está obteniendo aquí, por lo que ahora también tiene otra consola en la
que puede buscar, que podría ser más conveniente para trabajar , solo para mostrar rápidamente ese ejemplo con
los objetivos del curso nuevamente.
Si la consola registra mis objetivos del curso aquí y guardo esto, esto se reconstruye y ahora vemos la matriz aquí y podemos
expandirla.
Por lo tanto, esto podría ser un
poco más conveniente para trabajar, básicamente como lo conoce del
desarrollo web en caso de que sea un desarrollador web, pero también puede hacer más.
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
depurador aquí, expanda estas carpetas y encontrará la estructura de carpetas con la que también está
trabajando, por ejemplo, aquí
en su carpeta de usuarios, encontrará la aplicación. archivo js, encuentra los componentes.
Así que ahora en la aplicación. js si abre ese archivo, verá su código tal como lo
escribió, por lo que en
la versión sin compilar es genial porque es fácil reconocer su
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
agregar un punto de interrupción haciendo clic a la izquierda del número de
línea aquí para que tenga esta marca
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í.
Ahora habilité la depuración en el emulador de Android, por lo que no se detendrá si
lo intento en iOS, se detendrá si lo intento en Android.
También podríamos haberlo habilitado en iOS, aquí con depuración remota js pero no lo hice, así que vamos con
Android.
Puede ignorar esta advertencia
aquí, simplemente puede descartarla y ahora presionar agregar nuevo objetivo y tal vez ingresar aprender React Native, hacer clic en Agregar y ahora verá,
esto se está atascando aquí porque si vuelve a las herramientas de desarrollo, esto es ahora en pausa, ves que ahora
está resaltado en azul, se está pasando y
ahora lo bueno es que puedes recorrer tu código paso a paso con estos controles aquí, simplemente juega con
ellos y también puedes desplazarte sobre las cosas para mirar en su código, por ejemplo, para ver
el valor actual en el título del objetivo.
Ahora podemos simplemente avanzar a través de estas líneas paso a paso con este botón,
puede ingresar a una llamada de función con este botón o salir de él con este botón
y siempre puede reanudar la ejecución del código con este botón de reproducción azul.
Esta puede ser una herramienta muy poderosa para sumergirse profundamente en el flujo de su código porque le
permite comprender completamente lo que
está sucediendo, analizar sus valores en tiempo de ejecución y obtener un control total sobre su código.
Ahora, si desea obtener más información sobre cómo usar las herramientas de depuración de Chrome, encontrará un enlace útil adjunto
a esta conferencia que contiene más información sobre las herramientas de depuración de Chrome.