远程调试工具 Weinre

Apache
JavaScript
跨平台
Apache
2014-08-08
SamZhou

如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹。Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebug、web inspector),重新设计界面的工作往往事倍功半。本文介绍的调试工具Weinre 就是解决这一问题的优秀调试工具。

Weinre是什么?

Weinre代表Web Inspector Remote,是一种远程调试工具。举个例子,在电脑上可以即时 的更改手机上对应网页的页面元素、样式表,或是查看Javascript变量,同时还可以看到手机上页面的错误和警告信息. 下图所示中的例子,通过在console中运行“document.body.style.backgroundcolor = 'green';” 即时改变了手机上网页的背景色。该项目是 Apache Cordova 的一部分。

图1: 桌面的debug客户端与手机上的对应页面

运行原理

Weinre作为一种远程调试工具,在结构上分为三层:

  • 目标页面(target):被调试的页面,页面已嵌入weinre的远程js,下文会介绍;

  • Debug客户端(client):本地的Web Inspector调试客户端;

  • Debug服务端(agent):一个HTTP Server,为目标页面与Debug客户端建立通信。

获取Weinre

在任何的支持 Node.js 环境的系统下通过包管理器(npm)即可安装Weinre

npm install -g weinre

使用Weinre进行远程调试

1 启动 WeinreDe bug 服务端

weinre --httpPort 8080 --boundHost -all-

2 通过PC浏览器(WebKit内核)打开 WeinreDe bug 客户端

Open in your pc browser http://localhost[Your IP]:8080

3 在你需要调试的页面加上通信用的脚本


4 在手机上访问你的测试页面,在电脑上进入到 WeinreDe bug 客户端 看是否通信成功,如果一切没问题,可见到如下的页面

Open in your pc browser http://localhost[Your IP]:8080/client/#anonymous

5 最后跟你平时一样实时调试你的页面吧,是不是很爽。

加载中

评论(8)

The-duke
The-duke
非常好用的工具
开源中国首席一失足成千古风流人物以稀为贵
很强大的样子。可以调试终端了。 Weinre
酱哥哥
酱哥哥
不能再牛B 了 Weinre
刚田武
刚田武
好久没更新了 Weinre
来吧
来吧
这个不错啊 Weinre
_君剑
_君剑
UC浏览器开发者版,很久以前就有的功能了,而且比这强大多了 Weinre
黑色技术
黑色技术
= =装是装成功了,但调试修改,没反应啊,不会跟着边... Weinre
crazymus
crazymus
非常好用的工具,特别适合用于移动网页开发! Weinre

暂无资讯

暂无问答

Web移动应用调试工具——Weinre

由于前面介绍的方式不太给力,于是找到了资深的学长问了问,他告诉我有个叫weinre的插件很不错,在进一步了解,发现了这篇文章。 weinre官网:http://people.apache.org/~pmuellr/weinre/do...

2013/06/14 15:57
502
1
移动端Web开发调试之Weinre调试教程

Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具,借助于网络,可以在PC上直接调试运行在移动设备上的远程页面,中文意思是远程Web检查器,有了Weinre,在PC上可...

2016/08/30 17:02
9
0
Weinre mobile debugging on Windows

Getting started with Weinre mobile debugging on Windows

2014/02/11 16:37
49
0
weinre配置详细版

 在 PC 端,我们可以使用 Firebug 或者 Chrome 开发人员工具方便的调试网站或者Web 应用。但是,当我们想在移动端调试站点或者应用的时候,这些工具就派不上用场了。因此,移动开发人员都希...

2013/08/16 15:34
23
0
Web移动端调试工具Weinre(2015-12-02 20:53:59)

Web移动端调试工具Weinre

2015/12/02 21:00
113
0
javascript和web 调试技术

在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。 Weinre移动调试 DOM 断点 debugger断点 native方法hook 远程映射本地调试 Weinre 在移动上面开发调试是很...

2014/03/02 21:35
154
0
【原创】响应式设计之移动端调试工具

2013年是网页设计响应式的一年。所谓响应式网页设计,是由Ethan Marcotte在2010年提出的名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。简单来说就是同一张网页自动适应不同大小的...

2013/07/02 16:53
1K
1
weinre配置

如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹。Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Fir...

2013/08/15 00:25
34
0
weinre 的使用

weinre 的使用

2016/10/31 13:45
10
0
五个你必须知道的javascript和web 调试技术

在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。 Weinre移动调试 DOM 断点 debugger断点 native方法hook 远程映射本地调试 Weinre 在移动上面开发调试是很...

2013/12/17 23:21
1K
5

没有更多内容

加载失败,请刷新页面

返回顶部
顶部