Debug Expo/React Native WebView
La lógica “central” de mi aplicación con React Native implica el uso de WebViews porque necesito acceder al DOM de la aplicación. Al desarrollar el código de nuestra APP, es probable que haya errores y problemas con el código. Descubrir cómo depurar código dentro de WebView, y no es tan obvio de encontrar como puede ser en Ionic.
Opción 1: Chrome Inspect
- Inicia la aplicación Expo / React Native *
- Abrir y Google Chrome y luego ir a la siguiente URL, chrome://inspect
- Luego haz clic en el botón “inspeccionar”, haz clic en el enlace superior para abrir el último WebView, deberías ver algo similar a la imagen de abajo.
Opción 2: React Native Debugger
Alternativa, puedes acceder a esta página utilizando la página React Native Debugger en Chrome.
- Inicie su aplicación Expo / React Native *
- Vas a tu depurador React Native en Chrome, en mi caso, ya que estoy usando Expo, mi URL es http://localhost:19001/debugger-ui/
- Ves al botón de tres puntos (junto al botón de cierre)> Más herramientas> Dispositivos remotos
- En la parte inferior verás otro panel abierto
- Deberías de poder ver en su dispositivo Android en la lista
- Presione el botón Inspeccionar el primer elemento (este será el último)
- Ahora explora WebView como una página web normal
Debugging
Entonces, la forma más cercana de depurar el WebView que he encontrado es usar las instrucciones console.log que aparecerán en la consola DevTools. En la consola de depuración React Native normal, no podrá ver ninguna instrucción console.log desde WebView. Solo puede verlos explorando DevTools para dispositivos remotos. Por lo que puedo decir, no puedes usar puntos de interrupción en WebViews, pero aun así es mejor que nada.
Appendix
*Asegúrate de hacer esto en la misma máquina / host que ejecuta el emulador. Por ejemplo, una máquina virtual Genymotion se está ejecutando en mi máquina Windows, pero aún puedo ver sus WebViews en la URL de inspección de Chrome.
