如何实用便捷的在本地真机调试WEB端HTML5网页
先简单介绍两款常用但需要一定条件或限制的工具
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网页的更多相关文章
- Android真机调试访问本地服务器(localhost)的解决方案
Android系统把它自己作为了localhost!当连接localhost都是他自己啊.. 囧,在这里晕了好久才发现.. 网上介绍的都是模拟器连接本地服务器的,我试着把链接改为http://10.0 ...
- XE7 & IOS开发之开发账号(2):发布证书、发布授权profile的申请使用,附Ad hoc真机调试、生成ipa文件演示(XCode所有版本通用,有图有真相)
网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 注意,以下讨论都是以&q ...
- XE7 & IOS开发之开发账号(1):开发证书、AppID、设备、开发授权profile的申请使用,附Debug真机调试演示(XCode所有版本通用,有图有真相)
网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 注意,以下讨论都是以&q ...
- iPhone 真机调试应用程序
原文:http://blog.sina.com.cn/s/blog_68e753f70100r3w5.html 真机调试iphone应用程序 1.真机调试流程概述 1) 真机调试应用程序, ...
- 开源项目在真机调试(Coding iOS 客户端为例)
一.前言 iOS 13学习系列:如何在github下载开源项目到本地(Coding iOS 客户端为例)已经把 Coding iOS 客户端源码下载到本地. 但项目进行真机调试遇到很多问题. 二.问题 ...
- XE7 & IOS开发之开发账号(3):证书、AppID、设备、授权profile的申请使用,附Debug真机调试、Ad hoc下iPA文件生成演示(XCode5或以上版本推荐,有图有真相)
网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 注意,以下讨论都是以&q ...
- XE6 & IOS开发之免证书真机调试(1):颁发属于自己的App签名证书(有图有真相)
网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 1.自己给自己颁发证书, ...
- ios申请真机调试( xcode 5)详细解析
已经有开发证书的直接跳过第一步 第一步:申请"开发证书" 进入苹果开发者99美元账号: 选择:Certificates, Identifiers & Profiles 关于 ...
- 移动前端页面与Chrome的远程真机调试
一年不见,博客园都长草啦...... 前几日刚入手新手机小米5,系统真心流畅呀.为啥要买小米5呢,因为要提高生产力呀,好好玩移动前端开发呀哈哈哈 那么问题来了,要怎么调试手机上的前端页面呢? 很久很久 ...
随机推荐
- windows平台下nginx+PHP环境安装
因为日常工作在windows下,为方便在window是下进行PHP开发,需要在windows平台下搭建PHP开发环境,web服务器选择nginx,不过windows版本的nginx性能要比Linux/ ...
- 分享几个IP获取地理位置的API接口(最全面的了)
转载;https://cloud.tencent.com/developer/article/1152362 全网首发,最全的IP接口,不服来辩!博主找了几个小时的资料,又手动抓取到了几个接口补充进来 ...
- PHP简单模拟登录功能实例分享
1.curl实现模拟登录的代码,(只是实现服务器与服务器建立会话,其实并没有在客户端与服务器之间建立会话) <?php $cookie_jar = tempnam('./tmp','cookie ...
- Git(未完待续)
Git的历史咱们就不多说来,我还是喜欢直白点,直接来干货吧 在Linux上安装Git 不同的系统不同的安装命令,基础的就不说来,centos直接yum就ok. 安装完成后,还需要最后一步设置,在命令行 ...
- C# 为VB6.0程序模拟串口数据
为VB6.0编写程序模拟数据测试使用. 一.VB6.0 控件MSComm,来发送接收串口数据 CommPort 属性设置并返回通讯端口号,虚拟端口为COM2. Settings 属性设置并返回端口的波 ...
- 【JavaScript】BOM
一.前言 接着前一章的内容,继续Js的学习. 二.内容 window对象 //确定窗口位置 var leftPos = (typeof window.screenLeft == &quo ...
- NYOJ--7
原题链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=7 分析:x与y分开考虑,分别排序,邮局定在最中间的两个数之间就可以了. 街区最短路径问题 ...
- php求一维数组的排列
<?php class CombinationsGenerator { public function generate(array $list) { if (count($list) > ...
- 抓包 ------ Wireshark 的使用
Wireshark的数据包详情窗口,如果是用中括号[]括起来的,表示注释,在数据包中不占字节 发了一个包,很久没有收到应答后,会重发包,在Wireshark抓包工具提示“[TCP Retransmis ...
- 「Python」人脸识别应用
人脸识别主要步骤: face_recognition 库的安装 安装此库,首先需要安装编译dlib,此处我们偷个懒,安装软件Anaconda(大牛绕过),此软件预装了dlib. 安装好后,我们直接通过 ...