移动端开发的万能远程调试工具Weinre的使用

大家在开发移动端应用时，使用经常会遇到一些困扰，那就是无法显示console.log的数据。很多pc端使用的调试技术，无法用于移动端应用开发。现在就教大家一种可以用于移动端调试的工具 --- Weinre，这个工具支持hybridapp开发，微信公共号开发等多个终端的开发调试。

第一步：安装Weinre

安装方法很简单，运行npm install -g weinre

第二步：启动weinre

这里我们以8888端口作为weinre的调试端口

在控制台运行weinre --boundHost -all- --httpPort 8888

假设自己本机的系统ip是192.168.88.10，在运行了weinre后，请在浏览器访问http://192.168.88.10:8888

会得到如下运行页面：

这个页面中，大家只需要注意一个位置即可，那就是最下面的

Target Script -> Example中的

第三步：将要调试的移动端页面头部添加这句话。在保证移动端与启动该功能的pc在同一个局域网后，通过移动端设备打开页面。

第四步：单击debug client user interface所指的链接，会进入如下页面。

在这个页面中，Targets可能会出现多个，同时连接着weinre的客户端越多，这下面的Targets就越多。

点击特定的targets，就能进入那个设备的调试页面。

其中：

Elements是元素页面，利用这个可以调试页面渲染后的页面。

Resources是资源页面，这里可以查看设备的localStorage与sessionStorage

Network可以看到与网络相关的请求状态与返回，比如发送一个post请求

Timeline是用于性能调试的

Console页面就是用于打印console.log值的，也是我们最常用的一个功能

下面是我写的一个html页面。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试</title>
<script src="http://192.168.88.10:8888/target/target-script-min.js#anonymous"></script>
<script>
window.onload = function () {
console.log ('hello world')
}
function clk () {
console.log ('on click event')
}
</script>
</head>
<body>
学习使用weinre移动端调试工具。<button onclick="clk ()">测试</button>
</body>
</html>

本页面功能就是，只要点击了button，就会在web端看到console出来的信息。

当我们连续点击5下后，就能看到如下效果：

大家可以看到，原本无法显示出来的console.log信息出现在了web页面中。

现在，大家可以愉快的调试移动app了。

文章作者：沃航科技