vue 移动端真机调试 --weinre

2,903 阅读1分钟

解决vue移动端看不到控制台的问题

一、全局下载安装

npm install weinre -g

二、运行weinre

weinre --httpPort 8082 --boundHost 192.168.4.123

因为我的vue项目运行在192.168.4.123下


所以,将weinre运行在域名为:192.168.4.123   端口号为:8082   的环境下

调试过程中不要关闭该命令控制台


三、浏览器打开weinre

浏览器输入:http://192.168.4.123:8082  (根据自己的运行配置来输入)

然后就可以看见打开的内容如图:


点击第一个链接,就可以打开控制台了,在控制台就可以看见在192.168.4.123域名下运行的项目的调试信息了,targets里面对应的是有每一个运行的项目,有多个的时候,可以点击切换,显示绿色的表示选中(但不会一直是这个,如果你手机或电脑重新打开一次调试链接,它就会自动切换到最新打开的那一个调试链接来监听)


四、在需要监听的页面里加上这一句话


<script src="http://192.168.4.123:8082/target/target-script-min.js#anonymous"></script>

注意:

1. 域名和端口号要对应上

2. anonymous是一个标识,跟第三步第一张图点击的那个链接的标识保持一样就行

四、手机打开需要调试的链接

注意,手机此刻必须跟电脑用的是同一个网络,你手机打开后就可以在电脑之前打开的的控制台上看见调试过程了,就像电脑浏览器的F12一样