在移动端开发中，开发过程通常是先用chrome的手机浏览器模拟器模拟开发页面在手机浏览器中的显示。但是通常由于浏览器自身的实现方式页面解析方式不一样，往往在模拟器上显示正常的页面，在真是移动端浏览器中显示异常。包括一些事件触发动作也得不到很好的调试。
下边介绍几个月的h5开发总结出来的移动端调试方式：
1.log方式
通过console.log()方式，将代码执行关键过程输出出来，基本可以定位问题出现位置，但这种方式对于页面样式问题无能为力；
2.chrome模拟器调试
还是要介绍下chrome的模拟器调试（万一有人不知道呢~），其实这是最长用的开发调试方式了，对于大部分浏览器webkit内核浏览器适用，关键还可以选择各种机型；
正确的打开方式
打开chrome浏览器windows按F12、mac按option+command+i 进入开发者工具界面，于是，任性地调试啦~
3.Weinre
Weinre 是<strong>WE</strong>b <strong>IN</strong>spector <strong>RE</strong>mote.是一个web页面调试工具和检查工具，通过weinre可以PC和手机，在PC中操作页面跟手机操作一样，完成页面的调试。
weinre安装使用
（1）安装
sudo npm -g install weinre
（2）启动
weinre --httpPort 8081 --boundHost -all-
启动成功，访问地址http://localhost:8081/
如图：
（3）web页面引入脚本，项目启动
将生产的javascript 标签引入自己开发的web页面中，启动项目；
http://10.242.101.173:8081/target/target-script-min.js#anonymous
Example:
<script src="http://10.242.101.173:8081/target/target-script-min.js#anonymous"></script>
（4）调试
页面跑起来以后通过访问http://10.242.101.173:8081/client/#anonymous
就可以看到所有访问这个页面的手机啦
4.chrome移动端远程调试
使用步骤：
（1）手机、PC都有chrome浏览器；
（2）数据线连接PC和手机，手机开启调试模式；
（3）chrome浏览器地址栏输入chrome://inspect，就可以调试手机版的chrome页面啦
5、微信web开发者工具
微信今年推出了 web 开发者工具，能够帮助开发者更方便、更安全地开发和调试基于微信的网页，它是一个桌面应用，通过模拟微信客户端的表现，使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。
通过微信web开发者工具可以：
- 使用自己的微信号来调试微信网页授权
- 调试、检验页面的 JS-SDK 相关功能与权限，模拟大部分 SDK 的输入和输出
- 使用基于 weinre 的移动调试功能
- 利用集成的 Chrome DevTools 协助开发
使用步骤
(1)下载微信web开发者工具
(2)安装打开，并登录调试；
界面如下图所示，想进行页面调试首先需要登录，如果只是模拟器上调试页面内容，在地址栏直接输入网址；通过js-sdk可以看到微信微信分享之后的各个字段内容；点移动调试按钮按按步骤设置一下手机代理即可，甚是方便；
6、UC浏览器开发者版
UC浏览器总是时不时报出奇奇怪怪的问题，而其他浏览器又不会出现这种问题，所以很郁闷但又无能为力，我也是最近才知道原来UC浏览器有开发者版本哦；
主要功能
- DOM查看和修改
- JavaScript调试、CSS调试
- 网络状态查看
- 资源文件查看
- Console控制台
正确的使用方式
（1）进入UC官方网站开发者中心（网站地址），下载Android平台的UC浏览器开发者版，安装到手机中。
（2）PC机一台，并在PC上安装Chrome或Safari（推荐使用Chrome）。支持Chrome15–Chrome21，以及Safari5.1.4以上版本。下载ADB工具到PC中。
