移动网页版本开发、调试锦囊

呵呵说这个题目有点玄啊,趁闲下来的时候将我以前用过各种移动开发调试工具及办法列出来方便大家一起玩转移动网页版本开发(以下统称为m版本开发)。
以来列举各种办法各有优略,各有益处,不分先后,大概说一说

1. chrome等自带的模拟器

记不得chrome从那个版本开始包含手机模拟器了,这对于进入网页版本开发简直就是降低了一个门槛,开发带了了极大的遍历,其中新版本更新以后包含网络状态模拟、设备选择、ua,方便开发和调试(只能说很好很强大,我是一个chrome重度用户),虽然chrome带来了如此之多的开发遍历,也依旧有不足,chrome在切换手机模拟状态以后事件上做了兼容的,但是对于实际设备上的真实情况模拟指定是做不到的,因为用户手机上的浏览器五花八门,版本不一。chrome只是能快速的帮你做第一步验证和杜绝绝大部门容易产生的错误。
 

2.css-debugger

这是一个通过在所有页面元素添加outline的方式,绘制出当前页面元素的盒子容器的大小,他的益处就是够小,只需要短短108个字节(看下面的回复会有更精悍的代码)就可以将页面dom占用大小一览无余,对于页面构建的同学有帮助,但是只适合调整页面,没有图形化操作工具,入门级布局可以试着使用和跟踪调试你的布局。
 

3. chrome、safari等利用手机连接usb进行本地调试

这种方式需要开启设备上的safari、chrome的支持调试的功能,并连接到电脑,对应的开启电脑版本的浏览器调试。它的弊端很明显,就是单一浏览器只能调试自己的对应的浏览器,并且设备需要连接电脑(yy一下你有n多设备,不可能每一台都拿来自己调试吧?),以下适宜下safari的调试截图

4. adb调试

这个工具是最早的调试方式,笔者曾经废了半天的力气将调试环境搭建好了(自行寻找相关的文章太多了),但是第二次再也没碰它,问题很明显,对环境依赖,需要安装很多东西,调试依旧需要usb连接,调试是在本地启动一个server,这里就不贴图了。

5. weinre

相比于以上调试办法的设备直连、浏览器要求、环境要求,weinre还算是要求比较少的,weinre是一个远程调试工具,需要在调试的机器上安装(依赖java),然后开始端口监听,网上也有很多类似的教程. 并且对webkit的内核的浏览器全部可以调试。当然他也有自己的局限性,例如network请求和资源,性能调优等都无法使用,并且多个终端同时访问的时候会造成调试控制台切换;唯一值得清醒的是设备可以远程调试(html、console)。
 

6. eclipse、xcode使用模拟器

虽然用过这两个工具但是真心觉得不是搞移动端开发的不要用这个,调试起来很慢并且需要安装和熟悉这么大型的工具,当然可以去百度的开放服务平台(虽然这里很不稳定,但是对于需要测试的平台较多的项目可以试试)

7. HTTP代理服务器

这个也有特定要求,需要在调试的服务器(开发者的机器上)安装fiddler、Charles这类的软件然后开启代理,让需要测试的机器设置http代理,通过手机和设备连接调试,使用成本较低,需要在统一网段的设备进行开发调试,适合于抓包和分析信息。

8. 配置hosts

如果你的机器刷成开发者模式(ios越狱),那么请赤果果的将手机的host直接指向机器的ip进行本地开发,这种方式相比于上一种方式是不用安装软件设置http代理,前提是你足够任性将手机刷了哈哈哈

时间: 2024-10-29 19:07:50

移动网页版本开发、调试锦囊的相关文章

移动端Web开发调试之Chrome远程调试(Remote Debugging)

本篇主要说一下Chrome RemoteDebugging 的方法,之前也遇到一些坑,自己总结了一些经验,分享如下. Chrome DevTools调试移动设备Brower Page Tabs/WebViews 安卓远程调试目前支持所有操作系统(Windows,Mac, Linux, and Chrome OS.)中调试,支持: ● 调试站点的页面 ● 调试安卓原生App中的WebView ● 实时将安卓设备的屏幕图像同步显示到开发机器. ● 通过端口转发(port forwarding)与虚拟

PHP开发调试环境配置

——基于wamp和Eclipse for PHP Developers 引言 为了搭建PHP开发调试环境,我曾经在网上查阅了无数的资料,但没有一种真正能够行的通的.因为PHP开发环境需要很多种软件相互配合,软件之间版本必须相互匹配,而具体到底怎么个匹配法也很难说,至于最新版本的软件之间相互匹配就更加缺少相应的资料了.哪怕版本之间有细微的版本不匹配情况,最后的结果都会是徒劳无功. 不过,通过不懈的坚持和努力,在失败了一次又一次之后,终于在凌晨1点半将PHP开发调试环境全部搭建完毕,看到运行网页后,

移动端前端开发调试

转自:http://yujiangshui.com/multidevice-frontend-debug/ 通过移动端使用 Web 服务的比率越来越大,例如淘宝今年双十一,移动端交易份额就达到 42.6%.由此可见,掌握移动端的前端开发和测试是非常有必要的. 由于之前做过大量有响应式需求的项目:今年(2014)年初也配合 Denis 的 微信机器人 做了一些用于微信的移动端项目:在淘宝 UED 实习的时候,也有参与过一个针对移动端的游戏的部分开发.所以算是积累了一点移动端调试的经验,在这里分享一

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

一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调试处处是alert的,这估计是最常用的办法了.以前很多时候为了预览页面在移动设备上的效果,需要先将页面上传到测试服务器,再将url输入到设备浏览器,或者使用第三方二维码扫码应用,通过移动设备访问打开浏览实际效果,每次换设备都要重复这些操作,页面多的话这些繁琐的事情就特别让人厌烦了.移动互联网的浪潮,

转载 移动端前端开发调试

以下内容转载自:http://yujiangshui.com/multidevice-frontend-debug/ 本文更新说明:第一版是在 2014-06-16 编写的,现在来看,内容不够分明,思路不够清晰,方法不够完全.故再次更新.补充.修改,力求可以作为移动端前端开发测试的基本参考文档.后续还会随着技术的进步不断调整和修改. ———————————————————— 通过移动端使用 Web 服务的比率越来越大,例如淘宝今年双十一,移动端交易份额就达到 42.6%.由此可见,掌握移动端的前

MVC下微信企业号网页应用开发调用JSSDK接口不成功问题

在MVC下进行企业微信里的网页应用开发,前台页面中为了调用图像接口,使用了JSSDK.按照官方文档进行了正确配置. 现象:WEB开发工具调试一切正常,但从手机企业微信应用进入页面后接口调用无效(这个页面是从一级页面链接过来的),开了调试模式后,显示config:ok.说明配置无误.经过反复检查,终于发现问题所在. 原因:在一级页面(http://xx.xxx.xxx/main/index)中的链接是使用htmlhelper来写的,即@Html.ActionLink("测试接口",&qu

Xcode5.1离线下载安装及使用iOS5模拟器进行开发调试的方法

Xcode5.1默认不支持iOS5版本的模拟器开发调试,在OS X Mavericks(10.9.x)下默认只能支持iOS6.1及以上版本的模拟器,在OS X Mountain Lion(10.8.x)下默认只能支持iOS6.0及以上版本的模拟器进行开发和调试,在此条件之下的版本只能使用硬件设备进行开发调试.虽然现在低版本的iOS设备越来越少了,但是有时客户的需求可能会要求我们一定要兼容iOS5(或更低版本)及以上版本,如果我们手头找不到低版本硬件设备用于调试或者完全使用硬件设备而没有对应的模拟

微信公众平台开发调试方法

在这篇微信公众平台开发教程中,我们将介绍如何进行微信公众平台上的开发调试方法. 一.方倍微信调试器 微信调试器是方倍工作室开发的用于微信公众平台接口开发调试的工具,具有Token校验.模拟关注及取消关注.发送文本/图片/语音/视频/位置/链接.模拟事件发送等功能.其原型是微擎的Emulator. 微信调试器目前不支持IE浏览器下的使用,请下载Chrome浏览器或下载Firefox浏览器. 微信调试器的地址是 http://debug.fangbei.org/ .其界面如下 使用方法 1. Tok

VS Code开发调试ASP.NET Core 1.0

VS Code开发调试ASP.NET Core 1.0 使用VS Code开发调试ASP.NET Core 1.0,微软在今天凌晨发布了.NET Core 1.0,ASP.NET Core 1.0 与 Entity Framewok 1.0. 之前跟大家讲解过VS Code开发调试.NET Core RC2应用程序.今天讲一下VS Code开发 ASP.NET Core. 环境安装 .NET Core SDK Installer: win x64: https://download.micros