H5移动端调试方案全解（iOS&Android&Chrome&vConsole）

前言

在移动端盛行的今天，大家在日常中经常会接触到H5的移动端网页，不仅仅是在浏览器中，在各种的APP中也有存在着许多的H5页面，所以我们作为前端开发者就会有在开发时候进行移动端调试、甚至是真机调试的需求，本文旨在一文带领大家了解iOS、Android等平台的调试以及模拟器和真机的调试方法。

谷歌浏览器手机模式调试

• 优点：方便，常用
• 确定：无法完全模拟真机，无法发现真机上的一些问题

  调试方法

  与我们正常的网页调试几乎一模一样，但是你需要打开调试窗口左上角的移动端模式，另外在页面的上方可以选择对应的机型，通过不同大小的机型来测试网页布局等是否合理。

  另外在移动端的设计稿中长宽经常是375、667也就是我们的iPhone6的大小，但是默认的机型选择中并没有这个机型，此时可以在编辑中添加，或者可以添加自定义机型。

  

  IOS调试

  iOS调试主要依靠Mac + Safari这对组合来实现

  Safari开发权限开启

  PC

  PC浏览器：设置 ⇒ 高级 ⇒ 在菜单中显示“开发”菜单

  

  iPhone

  iPhone 设置：设置 – Safari浏览器 – 高级 – 打开网页检查器

  

  

  模拟器调试：Xcode中的Simulator

  注意点：最新下载的Xcode默认ios版本为16.4，该版本有个bug会导致在App上的应用无法被调试(找不到调试页面)，该bug最早可追溯在四月份在外网被提出，至今(2023.8.14)未被修复，最方便的解决方案是降低IOS版本(可使用15.0版)。

  在Xcode中增加iOS版本后再Simulator选择版本打开。

  

  在应用中打开对应的H5移动端页面，在Safari中的开发中选择模拟器的对应页面打开。

  然后在Safari的开发中选择对应的页面

  

  这个时候就和我们正常的浏览器调试一样了，开始愉快的调试吧！

  

  真机调试

  用数据线把手机和电脑连接，并且选择信任电脑，剩下的方式和在模拟器上没区别。

  

  

  Android调试

  大坑

  首先我们知道需要事先安装SDK或者adb，但是我这次连接是无论是真机还是模拟器adb都会报

  bash % adb shell adb: no devices/emulators found

  排查了很久很久，各种方式都试过了，一直都是找不到设备，最后怀疑是adb的问题，就打算重装了，在重装前了灵机一动，我杀服务重开一下试试呢？

  bash % adb kill-server % adb reconnect * daemon not running; starting now at tcp:5037 * daemon started successfully reconnecting emulator-5554 [offline]

  皇天不负有心人啊！终于连上了！

  原开启的服务为什么失效我们不得而知，以后遇到这种问题可以直接考虑重启。

  模拟器调试

  1. 下载模拟器(MUMU For Android)

  

  1. 安装Debug版本的应用(就是安装你在手机上的APP)

  2. 在应用中进入对应需要调试的页面

  3. 谷歌浏览器中输入

     chrome://inspect

  4. 在终端terminal中输入adb shell

     (事先需要安装adb可见链接)

  

  1. 在浏览器页面中就可以见到被调试的页面了，点击inspect 后和在浏览器一样的调试方法

  

  1. 对了，如果这个时候的你还是发现不能用的话。那你就是被墙了，你需要一个🪜来帮助你自己(或者可以使用edge浏览器，在地址栏输入edge://inspect)。

  真机调试

  与模拟器调试基本相同但是有以下注意点

  1. 需要打开开发者模式

     设置 → 系统 → 版本号 → 点击版本号5-10次即可打开

  2. 打开开发者模式后进入开发者选项

     打开USB调试按钮

  3. 需要有一根可以数据连接数据线(有些数据线仅支持充电)

  4. 连接后会弹出授权，确定即可

  

  

  vConsole调试

  安装

  bash npm install vconsole

  使用

  JavaScript // 全局使用 // main.js import Vconsole from 'vconsole' let vConsole = new Vconsole()

  就可以看到我们的页面上出现了vConsole

  大功告成！

  

  符合工程化

  调试工具我们肯定是希望他在PC端不出现，在生产环境不出现。所以我们可以根据对应的启动环境去做一些工作

  ```javascript // 判断是否是pc设备 const isPc = () => { const userAgentInfo = navigator.userAgent; const Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; let flag = true; for (let v = 0; v 0) { flag = false; break; } } return flag; }

  //如果不是生产环境并且不是pc设备那么就显示调试 if (process.env.NODEENV != "prod" && !isPc()) { console.log(process.env.NODEENV); const vConsole = new VConsole(); } ```

  Chrome DevTools 调试工具基本原理

  了解了一下这部分，发现内容很多很复杂，接下来有时间会单独出一篇文章来写这部分。。。。。。。

  Flag