Loading...
Loading...
Debug Android WebView, browsers, and Node.js using Chrome DevTools through FoldDevtools with root or remote debugging
npx skill4agent add aradotso/devtools-skills folddevtools-android-webview-debuggerSkill by ara.so — Devtools Skills collection.
webview_devtools_remote_<pid>Host: 127.0.0.1
Port: 9222# 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# 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_remote127.0.0.19222import 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)
}
}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)
}
}
}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()
)dependencies {
debugImplementation 'com.facebook.stetho:stetho:1.6.0'
debugImplementation 'com.facebook.stetho:stetho-okhttp3:1.6.0'
}import android.app.Application
import com.facebook.stetho.Stetho
class MyApplication : Application() {
override fun onCreate() {
super.onCreate()
if (BuildConfig.DEBUG) {
Stetho.initializeWithDefaults(this)
}
}
}# 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// 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# 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:9222WebView.setWebContentsDebuggingEnabled(true)127.0.0.1:9222# 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_remotegrep devtools_remoteadb shell ps | grep <package_name>// 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
}
}@webview_devtools_remote_<pid>@stetho_<packageName>_devtools_remoteadb shell cat /proc/net/unix