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 应用调试

相关推荐
来来走走3 小时前
Flutter开发 网络请求
android·flutter
独行soc10 小时前
2025年渗透测试面试题总结-18(题目+回答)
android·python·科技·面试·职场和发展·渗透测试
雨白11 小时前
登录和授权:Cookie与Authorization Header机制详解
android
Frank_HarmonyOS11 小时前
【Android -- 多线程】Handler 消息机制
android
一条上岸小咸鱼12 小时前
Kotlin 基本数据类型(一):概述及分类
android·kotlin
没盐水菠萝13 小时前
Android - 动态切换桌面图标
android
AI 嗯啦13 小时前
SQL详细语法教程(三)mysql的函数知识
android·开发语言·数据库·python·sql·mysql
麦兜*13 小时前
【swift】SwiftUI动画卡顿全解:GeometryReader滥用检测与Canvas绘制替代方案
服务器·ios·swiftui·android studio·objective-c·ai编程·swift
跨界混迹车辆网的Android工程师14 小时前
adb 发送广播
android
超勇的阿杰16 小时前
gulimall项目笔记:P54三级分类拖拽功能实现
android·笔记