目前只在安卓上做了测试,IOS可能不支持
1.开启手机的USB调试功能
点设置-》开发者选项-》USB调试
如果看不到开发者选项,在关于手机中点击内部版本号7次,即出现开发者已启用的提示。
将手机通过USB连接到电脑
2.开启微信手机端调试功能
在微信中点击链接 http://debugx5.qq.com
或者直接扫码:
勾选Inspector调试功能
3.在微信中打开要调试的网页
可以将一个网址发到对话窗口,点击进入。或者打开公众号点击进入网页。
4.在chrome中调试
地址栏 输入chrome://inspect/#devices
点击inspect,出现调试窗口。可是这时候你看到的一定是一个白花花的空白窗口。为啥呢?因为第一次连入的时候chrome会去谷歌网站下载程序包,国内无法访问谷歌,所以就卡在这里了。这时候必须翻墙才可以解决。我用的布谷加速器速度不错。
成功后的界面如下
和在电脑上打开网页一模一样,也可以在电脑上点击鼠标,手机和电脑屏幕是同步的。是不是很爽啊?
另外吐槽一下微信的开发者工具
在微信公众号开发网站上下载的开发者工具竟然是2016年的0.7版本。 该版本有调试功能,其实调用的chrome内核
但是搜索微信web开发者工具最新版本,发现现在版本已经是2018年的1.02了。安装后,公众号网页的真机调试功能直接阉割掉了。chrome://inspect/#devices 输在地址栏也没用。
难道腾讯小程序出来后就不管公众号开发了吗?所幸chrome帮我们解决了一切。