问题背景是这样的,我们一般来说做前端调试都是直接在浏览器的调试工具中进行。
但是如果我们是在进行移动端开发,然后没有办法在手机上面调用调试工具呢?
在 Packt: PhoneGap3 Beginner Guid 2nd Ed.
这本书里面介绍了一个很好的工具 weinre,在这里很值得记录一下:
现将 Node.js 和 npm 装好,然后安装
npm install weinre -g
然后查一下局域网里面本机的 IP,开启 weinre 服务,注意这个 IP 是别的机器要从局域网里面访问的地址,因此要注意可访问性。
weinre -boundHost XXX.XXX.XXX.XXX
绑定之后,weinre 就会在本地开启一个 http 服务,在命令行可以看到。
然后自己在浏览器访问这个地址 http://192.168.1.222:8080
。为方便区分,下面称这个页面为【管理页】。
在里面可以看到这样一行:
debug client user interface: http://192.168.1.222:8080/client/#anonymous
这个地址点开就是一个控制台,跟 Chrome 的控制台基本一样,可以用来做脚本调试。下面称这个页面为【调试页】
下一步就是在前端页面里面连接到这个调试器,可以看到【管理页】里面有一个 target script:
<script src="http://192.168.1.222:8080/target/target-script-min.js#anonymous"></script>
将这段代码嵌入到目标调试的页面,可以在本机拿一个正常的页面(下称【目标页】)先试试。
test.html:
<!DOCTYPE html>
<html>
<head>
<script src="http://192.168.1.222:8080/target/target-script-min.js#anonymous"></script>
</head>
<body>
</body>
</html>
打开【目标页】,然后在【调试页】里面就可以看到 Targets 和 Clients 里面都出现了绿色的记录,可以看得出就是我们打开的 test.html。
这个时候,我们在【调试页】里面的 console 敲进去一个 alert(1);
,就可以看到在目标页里面弹了一个弹窗,注意【目标页】是完全可以在局域网的任何其他地方来打开的,当然包括你的手机。
然后如果要用手机调试的时候,只需要发布的包里面包含了前面嵌入的那段 <script>
引用就可以这样搞了。
后记
后面遇到需要走 https 的情况,参考 https://www.undefinednull.com/2015/03/17/remote-debugging-localhost-with-weinre/
【转载请附】愿以此功德,回向 >>
原文链接:http://www.huangwenchao.com.cn/2015/05/weinre-debug.html【使用 weinre 进行远程前端调试】