悟空浏览器如何借助开发者模式调试移动端网页

必须启用开发者模式并连接真实设备或模拟器才能调试移动端网页；具体步骤包括连续点击版本号7次激活开发者模式、开启手机USB调试、访问chrome://inspect进行远程调试，并可通过DevTools模拟移动视口与UA。

要在悟空浏览器中调试移动端网页，必须启用开发者模式并连接真实设备或启动模拟器，否则无法看到移动设备的页面渲染和交互细节。

开启悟空浏览器开发者模式

打开悟空浏览器 → 点击右上角「≡」→ 进入「设置」→ 滑动到底部点击「关于浏览器」→ 连续点击「版本号」7次，直到提示「您已进入开发者模式」。

这一步必须完成，否则后续所有调试入口均不可见。未触发该提示即代表未激活，重启浏览器后仍需重做。

启用USB调试并连接安卓手机

在安卓手机「设置」→「开发者选项」中开启「USB调试」（若无此选项，先点「关于手机」→ 连续点击「版本号」激活开发者选项）。

用原装数据线将手机与电脑连接 → 电脑端悟空浏览器地址栏输入 【chrome://inspect】 → 等待设备列表自动刷新。

首次连接时，手机会弹出授权对话框，务必点「允许」，否则设备始终显示为离线状态。

远程调试目标页面

方法一：直接调试已打开页面
在手机悟空浏览器中打开目标网页 → 回到电脑端 chrome://inspect 页面 → 在「Configure…」中添加 localhost:9222（默认端口）→ 页面列表中出现对应标签页 → 点击「inspect」即可启动 DevTools。

方法二：通过URL远程加载
在 chrome://inspect 页面点击「Open dedicated DevTools for Node」下方的「Configure」→ 添加要调试的域名（如 example.com）→ 点击「Add」→ 手机端访问该域名页面后，自动出现在可检视列表中。

注意：如果页面使用了 Service Worker 或离线缓存，刷新前请先在 DevTools 的 Application 面板中勾选「Disable cache」，否则修改 CSS 或 JS 后可能不生效。

模拟移动端视口与UA

第一步：在电脑端悟空浏览器中打开任意网页 → 右键空白处 → 选择「检查」打开 DevTools。
第二步：点击 DevTools 左上角的「切换设备工具栏」图标（?）→ 选择预设设备（如 iPhone 14）或自定义尺寸。
第三步：点击设备工具栏右侧的「⋯」→ 「More options」→ 「Network conditions」→ 取消勾选「Select automatically」→ 手动下拉选择「iPhone」或「Android」UA字符串。

这一步能快速验证响应式布局是否适配，但仅模拟 UA 和视口，不涉及真机渲染引擎或触摸事件行为。