¿Cómo depurar webview de forma remota?

4 minutos de lectura

avatar de usuario
Atre Kundan

¿Cómo puedo depurar/inspeccionar el elemento de apk webview?
Yo he tratado este pero solo es útil para Chrome, no para apk.

por favor sugiérame

  • Depurar vista web de forma remota

    – LF00

    22 de junio de 2017 a las 6:43

  • Depurar xwalkview o webview de forma remota

    – LF00

    22 de junio de 2017 a las 7:06

avatar de usuario
Shailendra Madda

Prueba esto:

  1. Habilite las opciones de desarrollador en el dispositivo (Configuración–>Acerca del teléfono–>Toque 7 veces en el número de compilación)

  2. Active las opciones de desarrollador y habilite la depuración de USB (en Opciones de desarrollador)

  3. Agregue esta línea en su clase de aplicación personalizada o en la actividad donde se carga la vista web

    // si su compilación está en modo de depuración, habilite la inspección de vistas web

     if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) {
         WebView.setWebContentsDebuggingEnabled(true);
     }
    
  4. Abre Chrome y escribe chrome://inspect/#devices y debería ver su dispositivo en la lista de objetivos remotos

  5. Haga clic en inspeccionar para depurarlo.

Actualizar:
Puedes simplificarlo como a continuación:

WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG)

  • ¿Requiere que el teléfono esté conectado con USB? Además, ¿qué pasa si estoy probando la aplicación en un simulador?

    – Desarrollador de Vineet ‘DEVIN’

    10 de enero de 2018 a las 5:50

  • @ Vineet’DEVIN’Dev sí, necesita conectarse con USB. Si desea conectarse sin USB, vea mi respuesta aquí: stackoverflow.com/a/44442586/2462531

    – Shailendra Madda

    21 de mayo de 2018 a las 4:21

  • ¿Por qué hiciste una edición? Creo que fue correcto con un solo signo &

    – Redetección

    13 de agosto de 2019 a las 4:41

  • @ReDetection Rollbacked, pensé que me faltaba uno más y firmo

    – Shailendra Madda

    14 de agosto de 2019 a las 6:06

  • Una forma un poco actualizada: WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG)

    – Chapz

    14 mayo 2021 a las 13:44

avatar de usuario
Muthukrishnan

Esto es lo que funcionó para mí, anular el método onCreate en MainActivity.java y agregue esta línea en el método WebView.setWebContentsDebuggingEnabled(true).

Así es como se ve mi código:

package com.myapp;

import com.facebook.react.ReactActivity;
import android.webkit.WebView;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "myapp";
    }

    @Override
    protected void onCreate() {
        super.onCreate();
        //added this line with necessary imports at the top.
        WebView.setWebContentsDebuggingEnabled(true);
    }
}

Cree su código, abra su aplicación en el teléfono y vaya a chrome://inspect, verá su aplicación en la lista allí. Haga clic en inspeccionar enlace.

  • Gracias por esto. FYI en React Native v0.57.3 no hay necesidad de importar android.os.Bundle ya que ya no es necesario para onCreate() método

    – Gianfranco P.

    25 de noviembre de 2018 a las 11:26

  • Creo que ya no existe el método onCreate, me sale el error no suitable method found for onCreate(no arguments)

    – Nodeócrata

    9 de junio de 2021 a las 19:08

Si lo que está buscando es una forma de activar la depuración de WebView para una aplicación que no tiene el código fuente, esto se puede hacer, pero deberá descompilar y volver a compilar la aplicación.

Las instrucciones sobre cómo hacer esto se pueden encontrar aquí: https://blog.speedfox.co.uk/articles/1524219174-Android_WebView_Hackery

avatar de usuario
bitsabhi

Para depurar vistas web en la aplicación de Android, debe configurar WebView.setWebContentsDebuggingEnabled (verdadero) en WebviewActivity

Abra chrome://inspect/#device para depurar. Utilice el reenvío de puertos.
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews

He visto que hay un capítulo para webView. ¿Has probado? https://developers.google.com/chrome-developer-tools/docs/remote-debugging#debugging-webviews

Parece que necesita:

  • Un dispositivo Android o un emulador que ejecute Android 4.4 o posterior, con la depuración de USB habilitada como se describe en 2. Habilite la depuración de USB en su dispositivo.

  • Chrome 30 o posterior.

  • Hola Clijac, he visto esa sección. Solo permite la depuración de URL en Chrome, mientras que quiero algo con el que pueda depurar apk que tiene una vista web en eso.

    – Kundan Atre

    20 de febrero de 2014 a las 12:24


avatar de usuario
Vítor Hugo Bettani

En react-native-webview dan una explicación tanto para IOS como para Android.

https://github.com/react-native-community/react-native-webview/blob/master/docs/Debugging.md

Me ayudó en IOS.

  • Hola Clijac, he visto esa sección. Solo permite la depuración de URL en Chrome, mientras que quiero algo con el que pueda depurar apk que tiene una vista web en eso.

    – Kundan Atre

    20 de febrero de 2014 a las 12:24


¿Ha sido útil esta solución?