By King

更新日期:

文章目录

##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工具

1
npm install -g weinre

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

1
cnpm install -g weinre

###2.启动Debug Server

1
weinre --httpPort 8080 --boundHost -all-

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

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

1
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 的形式进入调试页面

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

文章目录