web前端开发远程调试工具Weinre
如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹。Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebug、web inspector),重新设计界面的工作往往事半功倍。本文介绍的调试工具Weinre 就是解决这一问题的优秀调试工具。
Weinre是什么?
Weinre代表We b In spector Re mote,是一种远程调试工具。举个例子,在电脑上可以即时 的更改手机上对应网页的页面元素、样式表,或是查看Javascript变量,同时还可以看到手机上页面的错误和警告信息. 下图所示中的例子,通过在console中运行“document.body.style.backgroundcolor = 'green';” 即时改变了手机上网页的背景色。
图1: 桌面的debug客户端与手机上的对应页面
使用一种工具之前,了解它的原理和结构是很有帮助的。Weinre作为一种远程调试工具,在结构上分为三层:
- 目标页面(target):被调试的页面,页面已嵌入weinre的远程js,下文会介绍;
- Debug客户端(client):本地的Web Inspector调试客户端;
- Debug服务端(agent):一个HTTP Server,为目标页面与Debug客户端建立通信。
三层结构如下图所示:
图2:Weinre组成结构
Weinre的debug客户端是基于Web Inspector开发,而Web Inspector只与以WebKit为核心的浏览器兼容,所以Weinre的客户端只能用Chrome或者Safari打开。
运行Weinre
首先需要下载 weinre, weinre目前支持Windows与MacOS, 本文中以Windows版为例。 下载完成之后,启动weinre的Debug服务端。在下载的weinre.jar所在文件夹中运行以下命令:
java -jar weinre.jar --httpPort 8081 --boundHost -all-
这行命令在本机启动了weinre的Debug服务端,端口为8081。打开Chrome或Safari,访问localhost:8081,就可以看到weinre的基本信息。(设置boundHost为-all-,就可以通过IP访问Debug服务端,这点很重要)
上图中的"debug client user interface"是weinre的Debug客户端,点击进入后可以看到目前还没有被测试的目标网页。
如何让网页可以被localhost:8081上的weinre检测到呢?很简单,只要往网页面上添加一个js文件就可以了。如果本机的IP为192.168.0.5,那么就添加如下的js文件。target-script.js可以获得从Debug服务端传来的信息,更改当前页面的样式;也可以运行传来的js,并返回结果。
<script src="http://192.168.0.5:8081/target/target-script.js"></script>
注意,对于dojo这样的异步加载模块,上面的静态嵌入的js就会不兼容,在有dojo等异步加载模块的环境下,请在异步加载全部完成后加载target-script.js
dojo.addOnLoad(function(){
...
dojo.create("script",{
src: "http://192.168.0.5:8081/target/target-script.js"
}, dojo.body());
})
打开添加了这个脚本的网页后,可以看见在Debug 的客户端的里检测到了新的目标页面。
之后我们就能在Elements与Console中调试远程的页面了。
Debug客户端中对应的HTML元素:
同时也可以查看js对象:
web前端开发远程调试工具Weinre相关推荐
- 前端基础入门第一阶段-Web前端开发基础环境配置
Web前端和全栈的定义: A.什么是传统传统web前端:需要把设计师的设计稿,切完图,写标签和样式,实现JS的效果,简而言之即只需要掌握HTML的页面结构,CSS的页面样式,javaScript页面的 ...
- 【分享】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
- 《Web前端开发最佳实践》学习笔记
一.Web前端开发概述 Web前端:前端UI+后端数据交互 具体技能:页面标记 + 页面样式 + 前端编程 + 跨平台.跨浏览器 + 前端框架 + 调试工具 二.高效Web前端开发 文件结构: js: ...
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】
<Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- Web前端开发要掌握的技能有哪些?
Web前端开发由网页制作演变而来,随着Web2.0的发展,网页不再只是承载单一的文字和图片,各种丰富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现 ...
- Web前端开发需要掌握的技术有哪些?
一般来说从事Web前端开发需要掌握的技术包括:编程语言.前端框架.开发工具以及调试工具等方面的技术. 如何学习才能成为优秀的Web前端开发工程师? 编程语言: HTML.CSS.JavaScript. ...
- Web前端开发常用的开发工具
Web的发展日新月异,这也使得Web开发者不得不加快脚步,学习新的技术和编程语言.尤其是对于那些大量流量入口的网站来说,跟上技术发展趋势更是尤为重要.为了使得Web开发人员能够更加专注于业务层面的开发 ...
- 2012年度最佳Web前端开发工具和框架总结
2012年度最佳Web前端开发工具和框架总结 2013/01/18 | 分类: 工具与资源 | 1 条评论 | 标签: 前端, 开发工具, 开发框架 分享到:0 来源:梦想天空 技术的快速发展让很多人 ...
- 《Web前端开发最佳实践》读书笔记
总的来说,这本书给我感觉帮助不大,比较适合新手,对新手养成好的习惯有些帮助.更深层次的东西比较少,而且由于书的发行周期,对于前端这种日新月异的技术来说,过时.与新技术新理念脱节,是没法避免的事情(20 ...
最新文章
- 模拟窗口效果 Jquery
- Linux中的大于号 双大于号 大于号:覆盖 追加 正确与错误都输出至指定文件
- 【linux】查看ip
- hystrix之熔断
- python中分割字符串两种方法正则分组别名,如何在python中使用正则表达式模块将文本字符串分割成单词?...
- springboot接收json参数_Springboot + Vue + shiro 实现前后端分离、权限控制
- Windows下Zookeeper启动zkServer.cmd闪退问题的解决方案
- 坚果云开发团队分享高效代码审查经验
- android p wifi一直在扫描_Android Wifi 扫描及自动连接
- avd已创建模拟手机 点击开始没反应_佳能微单开始降价,索尼、 尼康、 富士稳中有升……...
- [转]微信小程序 c#后台支付结果回调
- 从0开始写一个基于Flutter的开源中国客户端(7)——App网络请求和数据存储
- 局域网监控软件:让员工上网行为规范形成自觉
- LINUX下信号量的使用
- 《植物大战僵尸》游戏数据修改
- HealthKit框架参考
- MongoDB(shel)-表增删改
- 笔记存储仓库神器->印象笔记的使用方法
- 文本工具来查看、分析、统计,比较
- shell脚本保姆级教程,附赠100个shell脚本案例!