手机上（ios&安卓）如何打开网页控制台

ios

一、基础设置（手机端）

‌启用Web检查器‌打开手机「设置」→ 选择「Safari浏览器」→ 进入「高级」→ 开启「Web检查器」‌

二、连接Mac电脑调试（需有线连接）

1. ‌使用USB连接设备‌将iOS设备通过数据线连接至Mac电脑，并在手机上信任连接的电脑‌。

2. ‌开启Mac端Safari开发者工具‌

   1. 在Mac上打开Safari浏览器，依次点击菜单栏「Safari」→「偏好设置」→「高级」→ 勾选「在菜单栏中显示“开发”菜单」‌。

   2. 点击菜单栏「开发」→ 选择连接的iOS设备→ 点击需调试的网页名称→ 选择「显示网页检查器」。

   3. ‌查看控制台与样式‌在Mac的开发者工具界面中，选择「元素」标签页可查看网页DOM结构及样式，右侧面板支持实时修改CSS属性‌。

安卓

一、通过手机浏览器直接操作

‌Chrome 浏览器‌

• 访问目标网页 → 点击右上角 ‌⋮‌ → 选择「更多工具」→ 点击「开发者工具」→ 切换至「Elements」标签页查看DOM结构及样式‌。

• 支持实时修改CSS属性，调试界面布局。

‌Firefox 浏览器‌

• 打开网页 → 点击右上角 ‌≡‌ → 进入「开发者」→ 选择「调试器」或「检查元素」→ 使用「Inspector」查看样式‌。

二、微信内置浏览器调试

1. 访问 ‌debugx5.qq.com‌（若失效可尝试 ‌debugmm.qq.com/?forcex5=true‌）‌。

2. 进入「信息」选项卡 → 开启「vConsole」→ 页面底部出现绿色调试按钮，点击进入控制台，支持查看日志及简单样式调试‌。

三、使用vConsole工具（无需连接电脑）

1. ‌在网页代码中嵌入vConsole‌通过动态加载以下脚本，自动生成调试入口：

   <script>
   let script = document.createElement("script");
   script.src = "https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js";
   script.onload = function() { new VConsole(); };
   document.head.appendChild(script);
   </script>

2. 页面加载后底部显示悬浮按钮，点击可查看控制台及网络请求‌。

四、通过电脑远程调试（需USB连接）

1. ‌启用安卓开发者模式‌进入手机「设置」→「关于手机」→ 连点「版本号」 → 返回设置开启「开发者选项」→ 启用「USB调试」‌。

2. ‌Chrome远程调试‌

• 手机通过USB连接电脑 → 打开Chrome访问 ‌chrome://inspect‌ → 勾选「Discover USB devices」→ 点击目标网页的「Inspect」→ 使用电脑端开发者工具调试样式‌