folddevtools-android-webview-debugger

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

FoldDevtools Android WebView Debugger

FoldDevtools Android WebView调试工具

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.

由ara.so提供的Skill — 属于Devtools Skills合集。

FoldDevtools是一款Android应用，可在Android设备上为WebView、浏览器、Node.js及其他调试目标启用Chrome DevTools调试功能。它支持Root和非Root设备，提供XPosed模块功能以强制开启WebView调试，还支持Stetho/StethoX调试套接字。

Installation

安装步骤

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

从GitHub发布页面下载最新APK
在Android设备上安装
授予必要权限（若有Root权限则授予Root访问权限，授予悬浮窗权限以使用浮动窗口）

Core Features

核心功能

1. Local WebView Debugging (Root Required)

1. 本地WebView调试（需Root权限）

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

FoldDevtools可自动检测并连接Root设备上的WebView调试套接字：

自动发现
```
webview_devtools_remote_<pid>
```
套接字
列出所有可调试的WebView实例
在浮动窗口或全屏模式下打开Chrome DevTools界面

2. Remote Debugging (Rootless Compatible)

2. 远程调试（支持非Root设备）

Connect to remote debug targets by specifying host and port:

Host: 127.0.0.1
Port: 9222

通过指定主机和端口连接远程调试目标：

Host: 127.0.0.1
Port: 9222

3. XPosed Module

3. XPosed模块

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

当作为XPosed/LSPosed模块安装时，FoldDevtools可在无需修改代码的情况下，强制为任意应用开启WebView调试功能。

Rootless Setup (ADB Port Forwarding)

非Root设备设置（ADB端口转发）

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

对于非Root设备，需使用ADB手动转发调试套接字：

Step 1: Find the Debug Socket

步骤1：查找调试套接字

bash

undefined

bash

undefined

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

undefined

undefined

Step 2: Forward the Socket to TCP Port

步骤2：将套接字转发到TCP端口

bash

undefined

bash

undefined

For WebView debugging

用于WebView调试

adb forward tcp:9222 localabstract:webview_devtools_remote_12345

For Stetho debugging

用于Stetho调试

adb forward tcp:9222 localabstract:stetho_com.example.app_devtools_remote

undefined

adb forward tcp:9222 localabstract:stetho_com.example.app_devtools_remote

undefined

Step 3: Connect in FoldDevtools

步骤3：在FoldDevtools中连接

Open FoldDevtools app and use remote mode:

Host:
```
127.0.0.1
```
Port:
```
9222
```

打开FoldDevtools应用并使用远程模式：

主机：
```
127.0.0.1
```
端口：
```
9222
```

Enabling WebView Debugging in Your App

在你的应用中启用WebView调试

Kotlin Implementation

Kotlin实现

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)
    }
}

kotlin

import android.webkit.WebView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // 启用WebView调试（应仅执行一次，理想情况下在Application类中完成）
        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)
        }
    }
}

kotlin

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

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        
        // 为应用中所有WebView启用调试
        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()
)

kotlin

import android.webkit.WebView

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

// 在你的Activity或Application类中
DebugConfig.enableWebViewDebugging(
    enable = BuildConfig.DEBUG || isInternalTester()
)

Stetho Integration

Stetho集成

Add Stetho Dependency

添加Stetho依赖

gradle

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

gradle

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

Initialize Stetho

初始化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)
        }
    }
}

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

连接到Stetho套接字

bash

undefined

bash

undefined

Find Stetho socket

查找Stetho套接字

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

通过FoldDevtools远程模式连接：127.0.0.1:9222

undefined

undefined

Common Debugging Workflows

常见调试流程

Workflow 1: Debug WebView in Development

流程1：调试开发环境中的WebView

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

kotlin

// 1. 在你的应用中启用调试
class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG)
    }
}

// 2. 在Root设备上：打开FoldDevtools，从列表中选择WebView
// 3. 在非Root设备上：转发套接字并远程连接

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

流程2：调试第三方应用（Root + XPosed）

Install FoldDevtools as XPosed module
Enable module in LSPosed/XPosed
Select target app in XPosed module settings
Restart target app
Open FoldDevtools and select the app's WebView

将FoldDevtools作为XPosed模块安装
在LSPosed/XPosed中启用该模块
在XPosed模块设置中选择目标应用
重启目标应用
打开FoldDevtools并选择该应用的WebView

Workflow 3: Debug Remote Browser/Node.js

流程3：调试远程浏览器/Node.js

bash

undefined

bash

undefined

Start Chrome with remote debugging on Android

在Android上启动带远程调试功能的Chrome

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

通过FoldDevtools连接：127.0.0.1:9222

undefined

undefined

Troubleshooting

故障排查

WebView Not Appearing in List

WebView未出现在列表中

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

问题：Root设备上FoldDevtools中未显示WebView

解决方案：

确保已调用

WebView.setWebContentsDebuggingEnabled(true)

验证已向FoldDevtools授予Root访问权限
确认WebView已实际加载（并非仅初始化）
重启目标应用

Connection Refused on Remote Mode

远程模式下连接被拒绝

Issue: Cannot connect to

127.0.0.1:9222

Solutions:

bash

undefined

问题：无法连接到

127.0.0.1:9222

解决方案：

bash

undefined

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

undefined

adb shell cat /proc/net/unix | grep devtools_remote

undefined

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

问题：

grep devtools_remote

返回空结果

解决方案：

确保目标应用已启用WebView调试
在WebView中加载页面（仅当WebView处于活跃状态时才会出现套接字）
检查应用是否在运行：
```
adb shell ps | grep <package_name>
```
对于Stetho，验证应用中已初始化Stetho

XPosed Module Not Working

XPosed模块无法工作

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)

问题：强制开启调试功能无效

解决方案：

验证模块已在LSPosed/XPosed框架中启用
检查模块作用范围是否包含目标应用
强制停止并重启目标应用
查看LSPosed日志中的错误信息
确保FoldDevtools具有正确的SELinux上下文（适用于Root设备）

DevTools UI Not Responding

DevTools界面无响应

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)

问题：浮动窗口或DevTools界面冻结

解决方案：

关闭并重新打开FoldDevtools
清除应用缓存：设置 → 应用 → FoldDevtools → 清除缓存
确保已授予悬浮窗权限
尝试使用全屏模式替代浮动窗口
检查Android版本兼容性（查看GitHub issues）

Advanced Usage

高级用法

Multiple WebView Instances

多WebView实例

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
    }
}

kotlin

// 调试包含多个WebView的应用时
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")
        }
        
        // 两个WebView会在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

使用自定义实现时，套接字遵循以下模式：

WebView：
```
@webview_devtools_remote_<pid>
```
Stetho：
```
@stetho_<packageName>_devtools_remote
```
自定义：可能有所不同，使用
```
adb shell cat /proc/net/unix
```
查找