调试前端页面我一直使用着神器Chrome开发人员工具, 那个方便, 大家都懂的.

但当我们要调试为移动设备设计的Web页面时, 是不是觉得有点力不从心了?
平时开发时我们可以一直都是在桌面调试这个页面, 但最终的运行环境是移动设备, 最终还是要在手机上验证一下, 这个时候各种兼容性问题就有可能接踵而来.

当我们在手机上打开这个页面时, 发现有个地方样式有问题, 但桌面上展现正常, 这个时候怎么办?
我们是不是只能推理下某个地方样式有兼容性问题, 逐步将问题范围缩小, 猜想/修改/刷新手机, 无限循环下去, 直到解决问题为止.

这个时候要是有一个像Chrome开发人员工具一样的调试工具能远程实现调试手机上打开的页面该多好啊.

其实是还真有, 只是我不知道而已, 下面就有请 weinre 闪亮登场!!

weinre is WEb INspector REmote.
weinre is a debugger for web pages, like FireBug and Web Inspector, except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.
weinre reuses the user interface code from the Web Inspector project at WebKit, so if you've used Safari's Web Inspector or Chrome's Developer Tools, weinre will be very familiar.

我这里只是简单介绍下怎么使用, 详情资料大家还是去官网看吧

---------------------------------------------------------------------------------------------------------------------------

接下来我们实战一把
1. 安装
    需要Node.js平台, 先安装好后, 打开Node.js command prompt, 通过NPM来安装 weinre

npm -g install weinre

2. 启动
    安装完成后, 我们接着启动 weinre

weinre -httpPort 8081 -boundHost -all-
能打开这个地址就说明weinre启动成功

可以配置 .weinre/server.properties 让启动 weinre 变得更方便, 具体方法请参考官网, 配置好后, 以后想启动 weinre, 直接运行weinre命令即可, 无需每次都追加那些参数了.

3. Instrumenting your web page to act as a debug target
    将如下脚本追加到你将要调试的页面上
    <script src="http://你的IP地址:8081/target/target-script-min.js#anonymous"></script>

4. 
 在手机上打开要调试页面的地址

    http://192.168.31.161:7773/index2.htm
   
   对于本机的localhost 也是可以进行调试的。

在 weinre Access Points 中开始远程调试

点击anonymous Access Points

同时还有一个插件 ripple  也是比较方便的,对于调试phonegap 应用比较方便

移动web 应用开发调试的更多相关文章

  1. 转载--未看关于移动端Web远程开发调试

    移动端Web开发调试之Chrome远程调试(Remote Debugging) http://blog.csdn.net/freshlover/article/details/42528643 移动端 ...

  2. 《开发技巧》WEB APP开发调试技巧

    前言 随着html5和nodejs的兴起.web APP越来越火,一套代码可以多平台使用.减少了很大的开发成本.很多APP中也集成了很多的html5页面,增强很高的应用体验.所以移动端页面也事关重要! ...

  3. asp.net web系统开发浏览器和前端工具

    1. Firefox浏览器+firebug插件 下载安装Firefox浏览器后,在菜单-附加组件-扩展中,搜索firebug,下载长得像甲虫一样的安装. 在web调试中,直接点击右上角的虫子,即可调出 ...

  4. 二十一、【.Net开源框架】EFW框架Web前端开发之目录结构和使用FireBug调试方法

    回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan.baidu. ...

  5. WEB前端开发和调试的工具

    前端开发在线课程: http://yun.lu/student/course/list/8   1.HBuilder:WEB开发IDE工具 hbulider,内核是eclipse,Dcloud公司出品 ...

  6. java web 入门级 开发 常用页面调试方法

    这里介绍一下Java web 入门级开发中常用的代码调式方法;  (  仅供入门级童靴 参考) ; 工具: chrome  浏览器 (版本越高越好); Java web 入门级开发 主要就是两个方面: ...

  7. 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 既然前后端 ...

  8. 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

    一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调 ...

  9. C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

随机推荐

  1. 简单学习:repo入门

    一:关于repo repo是Google开发的用于管理Android版本库的一个工具,repo并不是用于取代git,而是用Python对git进行了一定的封装,简化了对多个Git版本库的管理.对于re ...

  2. iOS常用正则表达式验证(手机号、密码格式、身份证号等)

    #import @interfaceUtils : NSObject #pragma 正则匹配手机号 + (BOOL)checkTelNumber:(NSString*) telNumber; #pr ...

  3. iOS字体设置

    label.font = [UIFont fontWithName:@"Arial-BoldItalicMT" size:24]; 字体名如下: Font Family: Amer ...

  4. ESXi cron jobs

    #Edit corn jobs vi /var/spool/cron/crontabs/root # Check crond pross id cat /var/run/crond.pid # Kil ...

  5. C#判断字符串是否为数字

    string i = Console.ReadLine();            int a=0;            if (int.TryParse(i, out a) == false) / ...

  6. Js运算符优先级

    1.. [] {} 提取属性与函数调用 2. delete new typof + - ! 一元运算符 3.  * / %    乘法.除法.求余 4. + - 加法/连接.减法 5.>= &l ...

  7. url重写技术

    URL 重写是截取传入 Web 请求并自动将请求重定向到其他 URL 的过程.比如浏览器发来请求 hostname/101.aspx ,服务器自动将这个请求中定向为http://hostname/li ...

  8. 第一个Sprint冲刺事后诸葛报告

    用户反馈:软件一般般,比较传统. 用户数量:5 团队改进建议:选择题与填空题太没有新意了,需要新的创新功能. 1.每个成员第一个sprint阶段有何需要改进? 成员 需要改进 邵家文 需要更多的技术的 ...

  9. the grave of my scripts

    不定期更新.......... 1,fetch_seq.py https://github.com/freemao/AHRD/blob/master/fetch_seq.py 提取出你想要得染色体的某 ...

  10. Bash Shell字符串操作小结

    装载自:http://my.oschina.net/aiguozhe/blog/41557 1. 取长度 str="abcd" expr length $str # 4 echo ...