你的网页在安卓手机上显示异常？试试这招！
当你在电脑上调试好的网页，在安卓手机浏览器打开却出现布局错乱、功能失效，是不是瞬间想摔手机？别慌！今天教你三种手机端直接调试的”救命技能”，连新手都能在5分钟内上手操作。
一、Chrome远程调试（需数据线）
- 安卓手机开启开发者模式：连续点击「设置-关于手机-版本号」7次
- 打开USB调试：进入「开发者选项」勾选USB调试
- 用原装数据线连接电脑和手机
- 电脑打开Chrome浏览器，地址栏输入：chrome://inspect
- 在手机上访问目标网页，电脑端会自动检测到设备（首次需授权）
二、Android模拟器调试（无需真机）
- 安装Android Studio（官网免费下载）
- 创建Pixel系列虚拟设备：Tools > Device Manager > Create device
- 启动模拟器后，打开内置的Chrome浏览器
- 电脑Chrome访问chrome://inspect，点击”Open dedicated DevTools”
- 可实时修改CSS、查看Console报错（比真机调试快30%）
三、第三方调试工具（紧急救场）
- Eruda：在网页head中添加<script src=”//cdn.jsdelivr.net/npm/eruda”></script>
- VConsole：微信官方调试工具，支持网络请求监控
- 浏览器开发者模式：部分安卓浏览器自带「检查元素」功能
避坑指南
当USB连接失败时：检查数据线是否支持传输（非充电线）、安卓10以上系统需要手动授权、关闭杀毒软件防火墙。实测三星/HUAWEI手机需在USB配置中选择「文件传输」模式。
小编观点：优先使用Chrome远程调试，遇到兼容性问题再用Eruda快速定位。调试时保持手机屏幕常亮，别让系统休眠中断连接。记住，每个前端开发者都经历过手机调试的崩溃时刻——多试几次，你就能笑着解决问题了！