悟空浏览器如何通过开发者模式调试移动端网页？

调试移动端网页时，很多人会卡在"怎么让浏览器认出自家的手机"这一步。其实操作思路很简单：开发者模式必须手动激活，而且得连上真机或模拟器，否则浏览器根本不会搭理你。至于具体步骤，其实就几段话能说清楚——先打开开发者模式，再开USB调试，接着用电脑端的调试入口去操控手机页面，最后还能顺手模拟一下手机屏幕尺寸和用户代理。

要在悟空浏览器里调试移动端网页，开发者模式是必须开启的。而且不管你是用真机还是模拟器，必须连上，否则页面渲染和交互细节一概看不到。

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

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

这一步千万别跳过。如果没有触发那个提示，后续所有调试入口都不会出现。而且重启浏览器后，这个激活状态会丢失，得重新来一遍。

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

在安卓手机上，你需要先进入「设置」→「开发者选项」，在里面把「USB调试」给打开。如果你压根没见过「开发者选项」这个菜单，那就先去「关于手机」里连续点击「版本号」7次，激活开发者选项再说。

接着用原装数据线把手机连到电脑上。在电脑端的悟空浏览器地址栏输入 【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 和视口，并不涉及真机的渲染引擎或触摸事件行为。真要验证触摸交互，还是得靠真机。