移动端调试本地代码

手机通过USB线，访问电脑上的Http服务

注意这里有两个功能点：

1、手机通过USB线，让电脑可以通过Chrome Inspect调试手机上的页面

2、手机通过电脑开放的热点上网(注意，手机不是通过USB连接电脑上网的！)，以便在手机上访问电脑上的本地调试服务页面

该功能一般配合下面的chrome inspect使用，便于在电脑上调试手机页面。

操作步骤

1、用USB线连接手机和电脑

2、电脑上开放移动热点，并设置好密码

win10设置热点的步骤：

win11，可以在系统中，选择”网络和Internet”，右侧开启热点即可。

3、电脑上启动Http服务，如果是webpack项目，设置host为0.0.0.0：

config.devServer = {
  host: '0.0.0.0',
  port: 8080,
};

如果使用的是vite，则在vite.config.ts中这样设置即可：

server: {
  host: '0.0.0.0',
},

这一步一定要注意设置host为0.0.0.0，如果没设置好，手机是无法通过该IP访问电脑网页的。

4、查看电脑上分配的移动热点的IP：

5、手机连接电脑开放的移动热点

6、现在就可以在手机上，通过移动热点IP访问电脑上的Http服务了，比如 http://192.168.137.1:8080/index.html

chrome inspect

这是同事整理的，应该也是从网上摘抄的，我这里做个记录，方便自己今后使用。

chrome inspect是谷歌官方提供的用于调试安卓端网页的工具

需要准备的材料：

1.可联网的计算机一台，且装有chrome浏览器，本次采用macMini

2.USB数据线一根，用于连接手机与电脑

3.装有chrome的手机一部，本次采用MI 11 Ultra 个人机

需要注意，手机的chrome版本要比计算机上的chrome版本新，下面会描述原因

step1：启动手机的开发者模式

在较新的安卓版本中，开发者模式默认隐藏了，需要连续点击安卓系统的版本号开启【每个手机的开启方式可能有所差异】

在Mi 11 ultra中需要在【设置】-》【我的设备】-》【全部参数】页面，连续点击【MIUI】版本，会出现【再点击N次，进入开发者模式】，连续点击后会提示开发者模式已启用

开发者模式启用后，就可以在【设置】中找到【开发者模式】菜单，注意，有可能在二级菜单中

进入【开发者模式】后，找到【USB调试】的开关按钮，选择打开，还有其他调试选项，可以按照需求开关，比如在计算机上显示点击反馈

step2：启动计算机上Chrome的inspect功能

访问地址chrome://inspect/#devices，即可找到inspect相关的配置项

保证红框中是勾选状态。

启用后，手机会弹窗：

点击确认后，即可进入调试状态

step3：进入调试状态

此时在手机上打开chrome浏览器，并进入对应的网页

chrome://inspect/#devices下方，remote device会显示连接的设备名称

以及此时手机上打开的页面，点击inspect打开devtools进入调试页面

需要注意，当点击inspect的时候，可能会出现404和白屏的现象，这是因为该功能依赖谷歌的调试服务，需要翻墙。

在不翻墙的情况下，有俩种解决方案

第一种：手机的chrome版本比计算机的chrome版本新，会出现报警提示及一个新选项：inspect fallback

此时点击inspect fallback即可正常打开devtools页面

第二种：需要舍弃chrome采用UC，在手机上下载UC开发版，在电脑上下载UC，步骤同上

未试验，具体详情自行搜索。

当以上所有问题解决后，就可以看到devtools页面了，此时按照PC调试流程即可进行调试。

whistle

注意事项

保持手机Chrome为较高版本

否则开发时，一些ES高级特性会报错。

比如我的手机Chrome是78版本，类似?.这种语法就报错了。

Chrome APK 下载地址

笔记本开启热点后，笔记本自身无法上网

感觉是笔记本的问题，重启后就好了