在手机端调试本地开发的微信页面

这里的微信页面指的是用微信浏览器打开链接，展示的页面

---

注意事项：

1、只有以前版本的微信web开发者工具才能真机调试，以下链接是 0.7.0 版本

官方下载： https://mp.weixin.qq.com/wiki...

2、手机和电脑要在同一局域网内

3、不能用 localhost 测试

---

方法一：

使用 x5 Blink 内核调试。（电脑可以连接网线上网也可以使用无线上网）

步骤：

1、手机 USB 连接电脑，打开开发者选项，打开 USB调试功能

2、如果是第一次使用 x5 Blink 调试功能，需要科学上网，确定能连上外网之后，再打开微信开发者工具。

3、选择移动调试 - ios/android 设备调试，扫码打开 TBS内核 inspector 调试功能，重启微信；

注意： 如果你 “点击验证“ 的话，可能会提示不支持 x5 Blink 调试。不必理会，这几年新出的手机基本上都支持的。

4、微信打开网页（随便一个网站）；

5、点击开发者工具的 “开始调试” 按钮，进入 “移动调试” 界面

6、点击 inspect ，弹出 developer tools 审查元素界面。第一次打开的话，要连接谷歌下载资源，所以需要第2步的科学上网操作；

7、资源下载完毕，连接成功，在微信网页上滚动一下页面，即可刷新出来。

8、可以在电脑上点击各种操作，手机会同步进行操作；

9、查看本地的 ip 地址 (windows 下命令行工具输入 ipconfig );

10、设为开发项目的 host ，vue-cli 项目是在 config -> index.js 里，将 dev 对象里的 host 属性的值换成 ipv4 地址，保存然后 npm run dev；

11、将项目地址发到手机微信，用微信浏览器打开

12、关闭 7 的调试界面，在“移动调试” 界面选择对应的页面 inspect 就行了

---

方法二：

使用普通调试。电脑必须使用 wifi ，且手机要连上同一 wifi。

缺点： 由于挂了代理，容易出现网速很慢，打不开网页的情况

步骤：

1、选择普通调试；
2、手机连接上同一 wifi ，设置代理
3、重启微信
4、发送本地项目链接到自己的微信，微信打开链接
5、点击开发者工具的 “开始调试” 按钮

---

参考文档：
https://www.jianshu.com/p/13d...
https://www.cnblogs.com/fiy-n...