folddevtools-android-webview-debugger

Original：🇺🇸 English
Translated

Debug Android WebView, browsers, and Node.js using Chrome DevTools through FoldDevtools with root or remote debugging

2installs
Sourcearadotso/devtools-skills
Added on

NPX Install

npx skill4agent add aradotso/devtools-skills folddevtools-android-webview-debugger

Tags

Translated version includes tags in frontmatter
android-webview-debuggingchrome-devtoolsfolddevtoolsremote-debuggingxposed-module

SKILL.md Content

View Translation Comparison →

FoldDevtools Android WebView Debugger

Skill by ara.so — Devtools Skills collection.
FoldDevtools is an Android application that enables Chrome DevTools debugging for WebViews, browsers, Node.js, and other debug targets on Android devices. It supports both rooted and rootless devices, provides XPosed module functionality for force-enabling WebView debugging, and includes support for Stetho/StethoX debugging sockets.

Installation

  1. Download the latest APK from the GitHub releases page
  2. Install on your Android device
  3. Grant necessary permissions (root access if available, overlay permissions for floating window)

Core Features

1. Local WebView Debugging (Root Required)

FoldDevtools can automatically detect and connect to WebView debug sockets on rooted devices:
  • Automatically discovers 
    webview_devtools_remote_<pid>
    sockets
  • Lists all debuggable WebView instances
  • Opens Chrome DevTools interface in a floating window or full screen

2. Remote Debugging (Rootless Compatible)

Connect to remote debug targets by specifying host and port:
Host: 127.0.0.1
Port: 9222

3. XPosed Module

When installed as an XPosed/LSPosed module, FoldDevtools can force-enable WebView debugging in any app without code modifications.

Rootless Setup (ADB Port Forwarding)

For non-rooted devices, manually forward the debug socket using ADB:

Step 1: Find the Debug Socket

bash
# List all debug sockets
adb shell cat /proc/net/unix | grep devtools_remote

# Output examples:
# 0000000000000000: 00000002 00000000 00010000 0001 01 xxxxxxx @webview_devtools_remote_12345
# 0000000000000000: 00000002 00000000 00010000 0001 01 xxxxxxx @stetho_com.example.app_devtools_remote

Step 2: Forward the Socket to TCP Port

bash
# For WebView debugging
adb forward tcp:9222 localabstract:webview_devtools_remote_12345

# For Stetho debugging
adb forward tcp:9222 localabstract:stetho_com.example.app_devtools_remote

Step 3: Connect in FoldDevtools

Open FoldDevtools app and use remote mode:
  • Host: 
    127.0.0.1
  • Port: 
    9222

Enabling WebView Debugging in Your App

Kotlin Implementation

kotlin
import android.webkit.WebView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // Enable WebView debugging (should be done once, ideally in Application class)
        if (BuildConfig.DEBUG) {
            WebView.setWebContentsDebuggingEnabled(true)
        }
        
        val webView = WebView(this)
        webView.loadUrl("https://example.com")
        setContentView(webView)
    }
}

Application-Level Setup

kotlin
import android.app.Application
import android.webkit.WebView

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        
        // Enable for all WebViews in the app
        if (BuildConfig.DEBUG) {
            WebView.setWebContentsDebuggingEnabled(true)
        }
    }
}

Conditional Release Build Debugging

kotlin
import android.webkit.WebView

object DebugConfig {
    fun enableWebViewDebugging(enable: Boolean = true) {
        WebView.setWebContentsDebuggingEnabled(enable)
    }
}

// In your activity or application class
DebugConfig.enableWebViewDebugging(
    enable = BuildConfig.DEBUG || isInternalTester()
)

Stetho Integration

Add Stetho Dependency

gradle
dependencies {
    debugImplementation 'com.facebook.stetho:stetho:1.6.0'
    debugImplementation 'com.facebook.stetho:stetho-okhttp3:1.6.0'
}

Initialize Stetho

kotlin
import android.app.Application
import com.facebook.stetho.Stetho

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        
        if (BuildConfig.DEBUG) {
            Stetho.initializeWithDefaults(this)
        }
    }
}

Connect to Stetho Socket

bash
# Find Stetho socket
adb shell cat /proc/net/unix | grep stetho

# Forward to local port
adb forward tcp:9222 localabstract:stetho_com.yourpackage.name_devtools_remote

# Connect via FoldDevtools remote mode: 127.0.0.1:9222

Common Debugging Workflows

Workflow 1: Debug WebView in Development

kotlin
// 1. Enable debugging in your app
class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG)
    }
}

// 2. On rooted device: Open FoldDevtools, select WebView from list
// 3. On rootless device: Forward socket and connect remotely

Workflow 2: Debug Third-Party App (Root + XPosed)

  1. Install FoldDevtools as XPosed module
  2. Enable module in LSPosed/XPosed
  3. Select target app in XPosed module settings
  4. Restart target app
  5. Open FoldDevtools and select the app's WebView

Workflow 3: Debug Remote Browser/Node.js

bash
# Start Chrome with remote debugging on Android
adb shell am start -n com.android.chrome/com.google.android.apps.chrome.Main \
  --remote-debugging-port=9222

# Forward port
adb forward tcp:9222 tcp:9222

# Connect via FoldDevtools: 127.0.0.1:9222

Troubleshooting

WebView Not Appearing in List

Issue: WebView not visible in FoldDevtools on rooted device
Solutions:
  • Ensure 
    WebView.setWebContentsDebuggingEnabled(true)
    is called
  • Verify root access is granted to FoldDevtools
  • Check that WebView is actually loaded (not just initialized)
  • Restart the target app

Connection Refused on Remote Mode

Issue: Cannot connect to 
127.0.0.1:9222
Solutions:
bash
# Verify port forwarding is active
adb forward --list

# Re-establish forwarding
adb forward --remove-all
adb forward tcp:9222 localabstract:webview_devtools_remote_<pid>

# Check if socket exists
adb shell cat /proc/net/unix | grep devtools_remote

Socket Not Found

Issue: 
grep devtools_remote
returns empty
Solutions:
  • Ensure target app has WebView debugging enabled
  • Load a page in the WebView (socket appears only when WebView is active)
  • Check if app is running: 
    adb shell ps | grep <package_name>
  • For Stetho, verify Stetho is initialized in the app

XPosed Module Not Working

Issue: Force-enable debugging doesn't work
Solutions:
  • Verify module is enabled in LSPosed/XPosed framework
  • Check module scope includes target app
  • Force stop and restart target app
  • Check LSPosed logs for errors
  • Ensure FoldDevtools has correct SELinux context (for rooted devices)

DevTools UI Not Responding

Issue: Floating window or DevTools interface freezes
Solutions:
  • Close and reopen FoldDevtools
  • Clear app cache: Settings → Apps → FoldDevtools → Clear Cache
  • Ensure overlay permissions are granted
  • Try full-screen mode instead of floating window
  • Check Android version compatibility (see GitHub issues)

Advanced Usage

Multiple WebView Instances

kotlin
// When debugging apps with multiple WebViews
class MultiWebViewActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        val webView1 = WebView(this).apply {
            settings.javaScriptEnabled = true
            loadUrl("https://example.com")
        }
        
        val webView2 = WebView(this).apply {
            settings.javaScriptEnabled = true
            loadUrl("https://another-site.com")
        }
        
        // Both WebViews will appear as separate targets in FoldDevtools
    }
}

Custom Debug Socket Names

When using custom implementations, sockets follow patterns:
  • WebView: 
    @webview_devtools_remote_<pid>
  • Stetho: 
    @stetho_<packageName>_devtools_remote
  • Custom: May vary, use 
    adb shell cat /proc/net/unix
    to find

Resources