Otros métodos de depuración
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Esta página explica cómo usar métodos de depuración de JavaScript heredados. Si estás comenzando con una nueva aplicación de React Native o Expo, recomendamos usar React Native DevTools.
Herramientas de desarrollo de Safari (depuración directa de JSC)
Puedes usar Safari para depurar la versión iOS de tu aplicación cuando uses JavaScriptCore (JSC) como entorno de ejecución.
-
Solo dispositivos físicos: Abre la app de Configuración, ve a Safari > Avanzado y asegúrate de que "Inspector web" esté activado.
-
En tu Mac, abre Safari y activa el menú Desarrollador. Esto se encuentra en Safari > Configuración..., luego en la pestaña Avanzado, seleccionando "Mostrar herramientas para desarrolladores web".
-
Encuentra tu dispositivo en el menú Desarrollador y selecciona el elemento "JSContext" en el submenú. Esto abrirá el Inspector web de Safari, que incluye paneles de Consola y Fuentes similares a Chrome DevTools.
Cada vez que se recarga la aplicación, se crea un nuevo JSContext. Seleccionar "Mostrar inspectores web automáticamente para JSContexts" evita que tengas que seleccionar manualmente el JSContext más reciente.
Depuración remota de JavaScript (obsoleta)
La depuración remota de JavaScript es obsoleta en React Native 0.73 y se eliminará en una versión futura.
La depuración remota de JavaScript conecta un navegador externo (Chrome) a tu aplicación y ejecuta tu código JavaScript dentro de una página web. Esto te permite usar el depurador de Chrome como lo harías con cualquier aplicación web. Ten en cuenta que el entorno del navegador puede ser muy diferente, y no todos los módulos de React Native funcionarán al depurar de esta manera.
Configuración inicial
Desde React Native 0.73, la depuración remota de JavaScript debe habilitarse manualmente usando el módulo NativeDevSettings.
import NativeDevSettings from 'react-native/Libraries/NativeModules/specs/NativeDevSettings';
function MyApp() {
// Assign this to a dev-only button or useEffect call
const connectToRemoteDebugger = () => {
NativeDevSettings.setIsDebuggingRemotely(true);
};
}
Cuando se invoca NativeDevSettings.setIsDebuggingRemotely(true), se abrirá una nueva pestaña en http://localhost:8081/debugger-ui.
Desde esta página, abre Chrome DevTools mediante:
-
Ver > Desarrollador > Herramientas para desarrolladores
-
⌥ Option + Cmd ⌘ + I (macOS) / Ctrl + Shift + I (Windows y Linux).
Los paneles Consola y Fuentes te permitirán inspeccionar tu código de React Native.
Bajo la depuración remota de JavaScript, la versión web de React DevTools en Chrome no funcionará con React Native. Consulta la guía React Native DevTools para explorar cómo usar React DevTools en nuestro depurador integrado.
En Android, si los tiempos entre el depurador y el dispositivo se han desviado, elementos como animaciones y comportamientos de eventos podrían no funcionar correctamente. Esto se soluciona ejecutando adb shell "date `date +%m%d%H%M%Y.%S%3N`". Se requiere acceso root si se usa un dispositivo físico.
Depuración en un dispositivo físico
Si estás usando Expo CLI, esto ya está configurado para ti.
- Android
- iOS
On iOS devices, open the file RCTWebSocketExecutor.mm and change "localhost" to the IP address of your computer.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to set up port forwarding from the device to your computer:
adb reverse tcp:8081 tcp:8081
Si encuentras problemas, es posible que alguna de tus extensiones de Chrome esté interactuando de manera inesperada con el depurador. Intenta desactivar todas tus extensiones y volver a activarlas una por una hasta identificar la extensión problemática.