手机上的web调试

用chrome的F12调试工具，左上角可以切换成模拟手机，但是不是真机，用鼠标点击，有触屏单点的事件，但是后面还接着一个鼠标事件。 而且没有触屏的多点操控事件（据资料平板电脑可以有）。

所以要调试多点触控等，就得用真机调试。据查资料可行，方法如下：

1、手机和电脑上都要装chrome

2、电脑chrome要连接上手机chrome，并能同步手机上的页面

参照https://blog.csdn.net/baidu_27605213/article/details/89226108

有的资料说电脑要能访问 https://chrome-devtools-frontend.appspot.com(搭梯子), 参照 https://www.cnblogs.com/lmyt/p/10584679.html。但我这边实测win10上不需要。

手机开启调试模式，电脑上chrome进入chrome://inspect/#devices，看下面连接到手机。

实测Win10上随便下的chrome和小米手机上随便下的chrome，能连接成功，窗口能同步。

实测MacMini与安卓手机，也连接成功，但是inspect点了无效，窗口不同步。

3、如果调试目标在本地，那么手机要访问到电脑上的localhost。

（1）、手机和电脑要处于同一网络。方法一：连接同一wifi，或者手机连wifi，电脑网线，都是同一路由器的。如果是台式机，可入手9.9的随身wifi？

方法二：手机usb与电脑共享网络：没有wifi的情况下，电脑网线拔了或者禁用网线的网络，数据线连上，手机开启usb网络共享，电脑能访问网路就说明连上了，使用的是手机的4g流量。

（2）、获取局域网ip，并用手机访问。win的方法：ipconfig命令或者网络属性里找。mac：系统偏好->网络里找。

手机chrome访问 【ip:端口】如192.168.42.233:8888，能打开页面就说明连接成功。（当然前提是电脑启动了服务。实测webpack的能访问）

然后在电脑chrome上，点改标签页的inspectfallback

电脑上能同步手机上的页面，就成功了

实测手机上的操作都能同步到电脑上，触屏事件能触发，断点能命中。调试无障碍，特别是触屏事件的调试。

各种尝试结果：

win10台机 + 安卓手机 + 手机4g网 + 手机usb共享网络 + 最新版chrome 成功

win10台机 + 安卓手机 + 电脑连网线 + 手机连wifi + 最新版chrome 成功

win10笔记本 + 安卓手机 + 连接同一wifi + 最新版chrome 未测，应该是最优方式

macmini + 安卓手机 + 连接同一wifi 失败，电脑同步不了手机的页面，inspect点了是空白页或者404

总结：这绕了好大一圈。网页的服务器建立在电脑上==>手机访问电脑上的服务器==>电脑又同步手机上的页面进行调试。