如何实用便捷的在本地真机调试WEB端HTML5网页

简介: 如何实用便捷的在本地真机调试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/

目录
打赏
0
0
0
0
8
分享
相关文章
|
10天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
29 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
网页 HTML 自动播放下一首音乐
在 HTML5 中实现自动播放下一首音乐,通过管理音乐列表、操作音频元素和监听事件完成。创建包含多个音乐链接的列表,使用 `<audio>` 元素加载音乐,监听 `ended` 事件,在当前音乐结束时自动播放下一首。示例代码展示了如何使用 JavaScript 实现这一功能,确保无缝切换音乐。
(html在线预览cad图纸插件)网页CAD绘制条形码、二维码的教程
本文介绍了如何在mxcad中绘制条形码和二维码。对于条形码,首先根据应用场景选择合适的编码标准(如CODE39、EAN13等),通过编码规则将数据转换为二进制,并利用`McDbHatch`绘制条和空的组合,同时支持自定义实体及属性管理。 对于二维码,因其能存储更多信息且具备更强纠错能力,采用开源库QRCode.js进行编码处理,再通过`McDbHatch`绘制黑白矩阵,同样封装成自定义实体以便管理和扩展。文中还给出了完整的绘制流程与效果展示,包括创建二维码对象、设置参数、调用绘制方法以及最终的效果图。整个过程体现了灵活运用API与第三方库来实现复杂图形绘制的能力。
|
2月前
HTML在线扫雷游戏网页源码
HTML在线扫雷游戏网页源码是一款基于HTML+CSS+JavaScript开发的在线扫雷小游戏单页源码,为用户提供了一个无需安装即可在浏览器中直接玩的扫雷游戏。该游戏的源码不仅包含了完整的游戏逻辑,还具备丰富的界面设计和用户交互功能,使得玩家能够轻松上手并享受扫雷带来的乐趣。
105 22
利用 html_table 函数轻松获取网页中的表格数据
本文介绍了如何使用 R 语言中的 `html_table` 函数结合代理 IP 技术,轻松提取网页表格数据并规避反爬机制。通过设置代理和请求头,示例代码展示了如何从 58 同城采集租房信息并保存为 CSV 文件。该方法适用于需要频繁采集数据的场景,确保数据采集的高效和稳定性。
114 2
利用 html_table 函数轻松获取网页中的表格数据
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
59 5
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
69 6
(H5-Web3D-ThreeJS)在网页三维CAD中绘制窗户模型
本文介绍了如何使用mxcad3d在网页中创建一个简单的三维窗户模型。通过官方教程搭建环境,编写绘制窗户模型的代码,并在点击按钮后展示模型效果。最终模型包括窗框和玻璃部分,具备丰富的三维建模功能和便捷的API支持。
Web网页端IM产品RainbowChat-Web的v7.2版已发布
RainbowChat-Web是一套Web网页端IM系统,是RainbowChat的姊妹系统(RainbowChat是一套基于开源IM聊天框架 MobileIMSDK (Github地址) 的产品级移动端IM系统)。
68 1
HTML基础知识:构建网页的基石
【10月更文挑战第11天】HTML基础知识:构建网页的基石
301 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等