您的位置：首页 > 移动开发

Weinre 远程调试移动端手机web页面

2017-02-24 14:25 447 查看

Weinre 是一款远程调试工具，使用JS编写，可以让我们在电脑上直接调试运行在手机上的远程页面，当你的代码已经发布上线，这时候出现了问题，Weinre就可以帮你调试。

调试场景

调试页面在手机上。

调试工具在PC的chrome

手机跟pc要在同一个网络环境下，也就是都使用一个wifi

安装Weinre

Weinre是基于nodejs实现的，所以使用它必须先安装node运行环境，新版的node已经集成了npm, 所以直接在在命令行键入下面的命令即可安装，如果你是Mac/Linux用户，还需要在前面加入"sudo":

[sudo] npm -g install weinre

如上所示，表示安装成功。

在个人使用的终端Terminal上输入：

weinre

启动成功后，默认boundHost为localhost，服务器运行的端口，默认为8080，只能本地pc上用 http://localhost:8080 在浏览器上打开。

如果这个8080端口有在用，可以改为其它端口，如8082，同时我们又需要让其他设备以及本地设备用 ip 打开Weinre调试工具，则需要如下输入：

weinre --httpPort 8082 --boundHost -all-

--boundHost [hostname | ip address | -all-] : 默认是'localhost'，这个参数是为了限制可以访问Weinre Server的设备，设置为-all-或者指定ip，那么任何设备都可以访问Weinre Server。

浏览器打开Weinre调试工具

http://本地ip:8080[/code] 
本地ip地址如下获取：



这样，就可以通过 http://192.168.0.15:8082  打开页面 Weinre 工作界面了。

在Weinre 工作界面中，有两部分是我们用到的，

第一部分是Access Points，如下图：



图片中第1行的debug Client urse inferface 地址是Debug Client(Weinre调试工具)的用户访问接口，可以通过这个地址进入Debug Client。

第二个部分是Target Script，如下图：



这个Example给出的链接地址，是系统根据我们启动Weinre服务时的参数设置自动生成的target-script.js文件，我们只需要将这个js文件嵌入到待测试的页面中，下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>test</title>
<script src="http://192.168.0.15:8082/target/target-script-min.js#anonymous"></script>
</head>
<body>
</body>
</html>


接下来，单击http://192.168.0.15:8082/client/#anonymous  打开Debug Client 工作界面，如下图：



页面RemoteTab由三部分组成，

Targets是注册的远程设备列表， 当前我们还没有访问测试页面， 所以Targets列表为none，

Clients是Weinre客户端， 也即打开这个Weinre页面的设备列表。

ServerProperties就是我们启动Weinre时的一些配置项。在手机上打开测试页就可以开始调试了。

可以在Target列表中点击那个设备的对应的列表项， 可以看到当点击后， 该项变为绿色表示选中， 此时测试的就是选中设备的页面。



单击 Elements 按钮，就会看到远程页面的DOM 文档。



与chrome,webkit调试工具类似，各个Tab对应各自不同的功能，可以在主机上随意修改远程网页上的dom、查看资源请求等， 同时在手机对应的调试页面里，查看效果。注意，手机跟Weinre调试工具要在同一个wifi网段下。

weinre缺点：

没有提供JS调试功能。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航