移动端调试（手机调试）

流莉呀
943 阅读2分钟

由于现在的90%的用户都来自手机，所以在做页面的时候，要在一开始进行移动端的调试，确保手机端访问无问题

手机如何访问 localhost:3000

  • 确保手机和电脑在同一个网络（同一WIFI）

  • 你需要把3000端口加入白名单（百度搜索 Windows 开放端口）

  • 在VSCode 的设置里将Local Port Host 设置为allInterfaces，设置之后重启VSCode

image.png

  • 找到电脑在当前局域网中的IP

    在Windows命令提示符输入ipconfig，找到每个 IPv4 地址逐个尝试（或者打开手机的WIFI详情，然后从所有IPv4 地址中找到跟手机所处的网段类型的IPv4 地址）

  • 使用第二步的 IP 代替 localhost 或代替 127.0.0.1 即可，比如可以在手机浏览器输入http://192.168.3.37:3000 访问我电脑上的网页。

安卓手机

具体细节操作步骤见参考文档

步骤

  • 用USB连接手机和电脑

  • 手机开启 USB 调试

  • 手机打开要调试的页面

  • 打开 edge://inspect 页面， 等待一分钟，找到对应的页面

兼容性

  • 只支持 Webkit 内核浏览器

IOS手机

搜索教程： Safari 远程调试手机页面

兼容性

iPhone 上面的浏览器都是 Webkit 内核，所以都支持

非 Webkit 浏览器

使用模拟控制台

Tencent/vConsole

vConsole 由腾讯一个轻量、可拓展、针对手机网页的前端开发者调试面板，专为手机 web 页面量身设计，帮助开发者更为便捷地进行开发调试工作。

image.png

参考文档

liriliri/eruda

  • 优点：适合所有的浏览器

  • 缺点：可能会出现一些bug

微信页面调试

步骤

手机调试一定要修改 viewport，禁止缩小放大

手机调试的基本原则

常见浏览器优先

  • 常见：微信内嵌页面、系统浏览器、UC、腾讯浏览器等

  • 不常见：Chrome、Firefox、Edge

真机优先

  • 调试器无法体现所有 bug

调试工具

  • 熟练使用 Elements、Network、Console、Sources 等面板
avatar
文章
阅读
粉丝