移动网页版本开发、调试工具

移动网页版本开发、调试工具，chrome等自带的模拟器，个调试模拟器等...



chrome等自带的模拟器

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

css-debugger

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

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

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

adb调试

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

weinre

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

eclipse、xcode使用模拟器

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

HTTP代理服务器

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

配置hosts

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

    关注 红白蓝网页设计与制作