为什么需要移动端页面调试
做前端开发的都知道，页面在电脑上看着好好的，一到手机上就各种错位、样式丢失、交互失灵。朋友发来截图问‘你这按钮点不了啊’，自己却在电脑模拟器上看不出毛病。这时候就得上真家伙——移动端页面调试。
准备工作：先把这些工具配好
调试不是盲调，得先把环境搭起来。最基础的一套组合是：Chrome 浏览器 + 一台安卓手机（iPhone 后面单独说）+ 数据线。打开手机的‘开发者选项’和‘USB 调试’，连上电脑，Chrome 地址栏输入 chrome://inspect，看到你的设备出现在页面上，说明连接成功了。
如果你用的是 iPhone，那就得靠 Safari 来配合。先在 iPhone 设置里打开 Safari 的‘高级’-‘Web 检查器’，再在 Mac 上打开 Safari 的‘开发’菜单，连上设备后就能看到当前页面了。
实际调试：像修车一样一步步来
连接成功后，在 chrome://inspect 页面点击‘inspect’，就会弹出 DevTools 面板，左边是手机屏幕实时画面，右边是熟悉的元素审查窗口。这时候你可以像在电脑上一样点选元素，看它的 margin 是不是写错了，或者某个 flex 布局没生效。
比如有个客户反馈‘注册按钮被挡住了’，你在电脑上看明明好好的。通过真机调试发现，原来是 fixed 定位在部分安卓机上被输入法弹起后顶上去了。改个 position: absolute 或加个判断逻辑就解决了。
查看网络请求也很关键
有时候页面白屏，其实是接口没返回数据。切换到 Network 标签，刷新页面，看看哪些请求是 404 或者超时了。特别是 H5 调用后端 API 时，跨域、token 过期这些问题在移动端更容易暴露。
<script>
fetch('/api/user/info')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));
</script>模拟弱网环境测试加载状态
别只在 WiFi 环境下测试。在 DevTools 的 Network 标签下，把网速从‘Online’改成‘Slow 3G’，看看 loading 动画有没有卡住，骨架屏是不是正常显示。很多用户体验问题都是在网络差的时候冒出来的。
推荐几个实用小技巧
在手机浏览器地址栏输入 vconsole.min.js 的 CDN 链接，可以快速引入一个轻量调试面板，能看到 console 输出、网络请求甚至本地存储内容，特别适合不能连电脑的场景。
还有一个叫 Eruda 的工具，集成进页面后能在移动端弹出一个类似 DevTools 的界面，查 DOM、看性能、清缓存都方便，临时调试救急很好用。
移动端页面调试不是一次性的任务，每次上线新功能，最好都在几款主流机型上过一遍。别嫌麻烦，用户可不会因为你‘在电脑上没问题’就原谅闪退和错位。