先简单介绍两款常用但需要一定条件或限制的工具


1、如果你能FQ

chrome在32版本后就自带了移动端调度工具,可以在Android直接联调,但唯一遗憾的是,在我大天朝要FQ后才能行的通,我自己试了后公司好几个机器联不上…

2、如果你有苹果电脑和iphone

苹果电脑上的safari 6.0版本后就可以直接连接iphone手机调试手机版上safari正在浏览的web页面,前提是你得有个苹果电脑和iphone手机,但如果你是Android的话,就没办法了

符合前端B格的“小苹果”


自己在公司里也是开发Mobile端的HTML5页面的,也深受调试页面之苦,移动端的WEB页面坑又多,所以用node-webkit技术做了一个客户端,专门用来调试,现在每天工作之前都先打开“小苹果”

小苹果用的是node-webkit技术打包成客户端,其实内部实现都是web 页面与nodejs技术,所以特别符合前端B格。而且由于用了node-webkit技术,客户端可以跑在windows和mac电脑上,齐活儿了

小苹果官方网站

里边有下载及安装和使用的方法

有图有真像

小苹果的好处


1、自带本地服务器

无需复杂的配置,不像apache或tomcat,一大堆设置,咱要的就是简单,小苹果本地服务其实就是用nodejs来写的

2、打开就用

将weinre移动端远程调试工具集成到了里边,打开就用,可以调试iphone,android上的web页面,webview中的页面一样可以远程真机调试

再也不需要自己到官网下载nodejs,再下载weinre, 再通过配置,再运行 ..

结束语


小苹果自己在公司的几个移动端项目中一直用,觉得很简单实用,所以推荐给大家用用看,当然了,现在只是alpha版本,存在很多不足,请见谅,希望我有时间慢慢把功能与体验做的更好吧;

本人书读的不多,技术有限,做的不好请喷,欢迎技术交流..

特别感谢:盛大文学

========================================================

相关技术资源

weinre: http://people.apache.org/~pmuellr/weinre-docs/latest/

node-webkit: https://github.com/rogerwang/node-webkit

nodejs: http://www.nodejs.org/

========================================================

转载处请注明:博客园(王二狗)willian12345@126.com

如何实用便捷的在本地真机调试WEB端HTML5网页的更多相关文章

  1. Android真机调试访问本地服务器(localhost)的解决方案

    Android系统把它自己作为了localhost!当连接localhost都是他自己啊.. 囧,在这里晕了好久才发现.. 网上介绍的都是模拟器连接本地服务器的,我试着把链接改为http://10.0 ...

  2. XE7 & IOS开发之开发账号(2):发布证书、发布授权profile的申请使用,附Ad hoc真机调试、生成ipa文件演示(XCode所有版本通用,有图有真相)

    网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 注意,以下讨论都是以&q ...

  3. XE7 & IOS开发之开发账号(1):开发证书、AppID、设备、开发授权profile的申请使用,附Debug真机调试演示(XCode所有版本通用,有图有真相)

    网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 注意,以下讨论都是以&q ...

  4. iPhone 真机调试应用程序

    原文:http://blog.sina.com.cn/s/blog_68e753f70100r3w5.html 真机调试iphone应用程序 1.真机调试流程概述 1)       真机调试应用程序, ...

  5. 开源项目在真机调试(Coding iOS 客户端为例)

    一.前言 iOS 13学习系列:如何在github下载开源项目到本地(Coding iOS 客户端为例)已经把 Coding iOS 客户端源码下载到本地. 但项目进行真机调试遇到很多问题. 二.问题 ...

  6. XE7 & IOS开发之开发账号(3):证书、AppID、设备、授权profile的申请使用,附Debug真机调试、Ad hoc下iPA文件生成演示(XCode5或以上版本推荐,有图有真相)

    网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 注意,以下讨论都是以&q ...

  7. XE6 & IOS开发之免证书真机调试(1):颁发属于自己的App签名证书(有图有真相)

    网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 1.自己给自己颁发证书, ...

  8. ios申请真机调试( xcode 5)详细解析

    已经有开发证书的直接跳过第一步 第一步:申请"开发证书" 进入苹果开发者99美元账号: 选择:Certificates, Identifiers & Profiles 关于 ...

  9. 移动前端页面与Chrome的远程真机调试

    一年不见,博客园都长草啦...... 前几日刚入手新手机小米5,系统真心流畅呀.为啥要买小米5呢,因为要提高生产力呀,好好玩移动前端开发呀哈哈哈 那么问题来了,要怎么调试手机上的前端页面呢? 很久很久 ...

随机推荐

  1. javascriptDOM编程

    DOM - Document Object Model,它是W3C国际组织的一套Web标准,它定义了访问HTML文档对象的一套属性,方法和事件. <html> <head> & ...

  2. wp开发(二)--获取用户篇

    本文从个人开发者的角度来谈如何让wp应用获得尽可能多的用户.当然前提是你的app有一定的竞争性,如果不具备竞争力,那再多的用户下载也是白扯,所以最关键的还是要保证app的质量. 一. 程序图标 千万不 ...

  3. C++解析(12):初始化列表与对象构造顺序、析构顺序

    0.目录 1.类成员的初始化 2.类中的const成员 3.对象的构造顺序 3.1 局部对象的构造顺序 3.2 堆对象的构造顺序 3.3 全局对象的构造顺序 4.对象的析构顺序 5.小结 1.类成员的 ...

  4. The Toll! Revisited UVA - 10537(变形。。)

    给定图G=(V,E)G=(V,E),VV中有两类点,一类点(AA类)在进入时要缴纳1的费用,另一类点(BB类)在进入时要缴纳当前携带金额的1/20(不足20的部分按20算) 已知起点为SS,终点为TT ...

  5. 常州day5

    Task 1 小 W 和小 M 一起玩拼图游戏啦~ 小 M 给小 M 一张 N 个点的图,有 M 条可选无向边,每条边有一个甜蜜值,小 W 要选 K条边,使得任意两点间最多有一条路径,并且选择的 K条 ...

  6. 【BZOJ5418】【NOI2018】屠龙勇士(数论,exgcd)

    [NOI2018]屠龙勇士(数论,exgcd) 题面 洛谷 题解 考场上半个小时就会做了,一个小时就写完了.. 然后发现没过样例,结果大力调发现中间值爆\(longlong\)了,然后就没管了.. 然 ...

  7. KMP算法复习【+继续学习】

    离NOIP还剩12天,本蒟蒻开始准备复习了. 先来个KMP[似乎我并没有写过KMP的blog] KMP KMP算法是解决字符串匹配问题的一个算法,主要是单对单的字符串匹配加速,时间复杂度O(m + n ...

  8. 【CodeChef】ForbiddenSum

    Portal --> CC ForbiddenSum Solution 场上想到了\(O(NM)\)的做法..然而并没有什么用 首先考虑比较简单的一个问题,给定一个数组\(A\),问这些数不能凑 ...

  9. openCV实例:Canny边缘检测

    http://blog.sina.com.cn/s/blog_737adf530100z0jk.html 在第一次使用openCV程序成功对图像进行打开后,现在开始试验第二个例程试验:Canny边缘检 ...

  10. tableau学习

    一.维度 度量 1. 连接到新数据源时,Tableau 会将该数据源中的每个字段分配给“数据”窗格的“维度”区域或“度量”区域,具体情况视字段包含的数据类型而定. 例如: 2. tableau中的字段 ...