iOS safari和android chrome开启网页调试与检查器的方法

手机开启远程调试教程(适用于 Chrome / Safari)

前端移动端调试指南|适用 iPhone 和 Android|WebDebugX 出品

本教程将详细介绍如何在 iPhone 和 Android 手机上开启网页检查器,配合 WebDebugX 实现远程调试。教程包含 Chrome、Safari 浏览器设置,USB 调试启用方法,以及 App 中启用调试支持的代码示例,帮助开发者快速定位移动端网页问题。


一、iPhone 开启 Chrome 远程调试功能(需配合 WebDebugX 使用)

  1. 打开 Chrome 浏览器,点击底部菜单栏。
  2. 进入 设置内容设置
  3. 启用 网页检查器 开关。

✅ 配合 WebDebugX 即可连接设备并进行网页调试。


二、iPhone 启用 Safari 网页检查器(Safari Web Inspector)

  1. 打开 系统设置 ,搜索"Safari"。
  2. 滑动到底部,进入【高级】选项。
  3. 打开【**网页检查器(Web Inspector)】开关。

💡 使用WebDebugX,Safari 远程调试不需要连接 Mac,查看调试设备。


三、安卓手机开启 Chrome 远程调试(适配所有主流安卓设备)

  1. 打开手机【设置 】→【关于手机 】→ 连续点击 7 次"版本号"激活开发者模式。
  2. 返回设置首页,搜索"开发者选项"。
  3. 找到并开启【**USB 调试(USB Debugging)】功能。

⚠️ 提示:不同品牌手机如华为、小米、OPPO、vivo 等,开发者选项路径可能略有差异。建议结合品牌名称进行搜索。


四、自研 App 启用网页检查器(支持 iOS 与 Android)

为确保网页内容在 WebView 中可调试,请在对应语言中启用调试配置:

iOS 开发(Objective-C):

objc 复制代码
if (@available(iOS 14.0, *)) {
    webView.inspectable = YES;
}

iOS 开发(Swift):

swift 复制代码
if #available(iOS 14.0, *) {
    webView.isInspectable = true
}

Android 开发(Java):

java 复制代码
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

Android 开发(Kotlin):

kotlin 复制代码
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true)
}

✅ 启用以上设置后,即可在 WebDebugX 中使用远程检查器查看 WebView 内嵌网页内容。


五、PC 上启用 Chrome 调试模式(Windows / macOS 通用)

通过命令行启动 Chrome 浏览器,开启远程调试端口:

bash 复制代码
chrome.exe --remote-debugging-port=9222 --user-data-dir=chromedatadir

⚠️ 注意事项:

  • 如果运行多个 Chrome 实例,请确保每个实例的 --user-data-dir 不同。
  • --remote-debugging-port 的值也不能重复,避免端口冲突。

推荐阅读

👉 官方详细图文教程 - WebDebugX

👉 WebDebugX --- 专业的移动端网页远程调试工具,支持 iOS / Android / WebView 应用调试

相关推荐
henysugar1 小时前
便捷删除Android开发中XML中重复字符串资源的一个办法
android·xml
aqi002 小时前
FFmpeg开发笔记(七十八)采用Kotlin+Compose的NextPlayer播放器
android·ffmpeg·音视频·直播·流媒体
你过来啊你2 小时前
Android开发中技术选型的落地方案
android·技术选型
消失的旧时光-19433 小时前
Android Jetpack 组件库 ->Jetpack Navigation (下)
android·android jetpack
忆江南3 小时前
NSProxy是啥,用来干嘛的
ios
忆江南3 小时前
dyld
ios
你过来啊你3 小时前
Java面向对象思想解析
android·java
愿天深海3 小时前
Flutter 提取图像主色调 ColorScheme.fromImageProvider
android·前端·flutter
Python涛哥4 小时前
go语言基础教程:【2】基础语法:基本数据类型(整形和浮点型)
android·开发语言·golang
你过来啊你4 小时前
进程线程协程深度对比分析
android·线程·进程·协程