Weinre实现远程调试页面

web前端开发 移动开发

weinre描述

weinre最初是PhoneGap的子项目，Adobe收购了PhoneGap的母公司后推出的Edge Inspect也使用了weinre的远程调试技术。

weinre是实现web端页面远程调试的工具之一，他主要针对移动端页面的调试，方便开发人员向在pc端一样开发移动端应用。

weinre 在很大程度上满足了远程调试的需求，但由于weinre技术实现上的限制，无法实现网络(Netwwork)、资源(Resources)、性能监控(Profile)、时间轴(Timeline)等调试。

并且如果需要在页面中应用该工具就必须在其中注入工具必须的script文件

• Debug Server， 使用 weinre 命令启动一个http server ， Debug Client 和 Debug Target 均会与 Debug Server 通讯

• Debug Client , 提供了 “Elements” 、 “Console” 这两个基本的调试工具， Debug Client 复用了 WebKit inspector 的界面

• Debug Target , 需要远程调试， 所以还包括运行在 WebView 中的那些页面。

(内容来自：《跨终端Web》39页)

使用方法

1.安装Weinre工具

npm install -g weinre

（国内npm访问速度较慢，可以考虑使用淘宝的cnpm）

cnpm install -g weinre

2.启动Debug Server

weinre --httpPort 8080 --boundHost -all-

关于启动命令的参数形式可以在 weinre -h 下查看

3.在对应的调试页面引入js文件

http:{ip}:{port}/target/target-script-min.js

ip: 启动Debug Server时设置的ip地址
port: 启动Debug Server时设置的端口号

4.在任意服务器容器装载页面

这里需要保证页面是在服务器容器中，并且该容器能通过上一步的地址请求获取到 target-script-min.js 文件。

5.PC端访问启动Debug Server设置的服务器地址

在这里可以通过访问 http://localhost:8080 这样自己设置好的服务器地址去进入weinre，也可以直接使用 http://localhost:8080/client/#anonymous 的形式进入调试页面

在这里，我们可以点击相应的页面进行调试工作