手机端 H5 浏览器网页调试

如果不想看步骤的,请直接看最后的解决方案。

1. 环境

  • 系统:windows
  • HBuilder: uniapp 的 H5 开发
  • Browser:chrome, Microsoft Edge, QQBrowser
  • 手机:红米 note7
  • 手机浏览器:自带浏览器,Microsoft Edge for Android

2. 问题描述

经过 PC 网页调试,手机 APP 调试没问题后,上传服务器做进一步测试。发现在发送 post 请求时有弹窗报错 undefined,这种报错简直反人类,搞毛吗!原因看不到,怎么去解决问题?
PC 端正常,手机 APP 端正常,微信小程序开发工具也正常,只有手机浏览器报错

3. 解决过程

  1. 只有报错内容,不知道哪个问件,哪一行报错,这样就连最基本的,什么问题导致报错也看不见,抓狂中... 去上个洗手间,换下心情

  2. 后来想了下,都21世纪了,安卓 12 也快发布了,手机端 H5 调试应该不是问题了,然鹅我年轻了。

  3. 打开手机开发者模式,app 应用调试功能(这个不会的自行百度)

  4. 安装小米手机助手(或者其他的手机助手)给电脑打上 Android 驱动

  5. 我常用是是 chrome 浏览器,那就子啊这里调试把,百度搜到在浏览器打开 chrome://inspect, 显示如下界面
    手机端 H5 浏览器网页调试

  6. 按 inspect, 我去,竟然是 404 not found,天哪,然后又是各种搜索,尝试去下载 chrome 手机版,找到5-6个版本,不同网站下载的,结果,他闪退,全部都是闪退,好吧,我换个方向

  7. 听说微软家的 Edge不错,之前也有尝试过,还给他改成了英文界面,主要是想学习下英文

  8. 既然想到了,那就马上去做,手机,pc 都要打开 edge,然后奇迹发生了,如下图
    手机端 H5 浏览器网页调试

  9. 按钮竟还多出来几个,还可以在pc 给手机端打开新网页,尝试一下,之后再点 inspect, 出现了久违的界面,里面的报错也可以查看,很是方便。如下图
    手机端 H5 浏览器网页调试

PS:我就不信,你们可以还原马赛克,我把马赛克像素跳到了最大(qq截图),我不信你还能还原,信不信下次我用PS,整张图打上马赛克

上一篇:运算符 - PHP手册笔记


下一篇:MongoDB Sharding 请勿复用已删除的 namespace