使用 weinre 进行远程前端调试

问题背景是这样的,我们一般来说做前端调试都是直接在浏览器的调试工具中进行。

但是如果我们是在进行移动端开发,然后没有办法在手机上面调用调试工具呢?

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://www.huangwenchao.com.cn/2015/05/weinre-debug.html【使用 weinre 进行远程前端调试】

发表评论

电子邮件地址不会被公开。 必填项已用*标注