移动端调试方式简记

在移动端开发中，开发过程通常是先用chrome的手机浏览器模拟器模拟开发页面在手机浏览器中的显示。但是通常由于浏览器自身的实现方式页面解析方式不一样，往往在模拟器上显示正常的页面，在真是移动端浏览器中显示异常。包括一些事件触发动作也得不到很好的调试。
下边介绍几个月的h5开发总结出来的移动端调试方式：

1.log方式

通过console.log()方式，将代码执行关键过程输出出来，基本可以定位问题出现位置，但这种方式对于页面样式问题无能为力；

2.chrome模拟器调试

还是要介绍下chrome的模拟器调试（万一有人不知道呢~），其实这是最长用的开发调试方式了，对于大部分浏览器webkit内核浏览器适用，关键还可以选择各种机型；

正确的打开方式

打开chrome浏览器windows按F12、mac按option+command+i 进入开发者工具界面，于是，任性地调试啦~

chrome开发者工具

3.Weinre

Weinre 是WEb INspector REmote.是一个web页面调试工具和检查工具，通过weinre可以PC和手机，在PC中操作页面跟手机操作一样，完成页面的调试。

weinre安装使用

（1）安装

sudo npm -g install weinre

（2）启动

weinre --httpPort 8081 --boundHost -all-
启动成功，访问地址http://localhost:8081/
如图：

weinre启动成功

（3）web页面引入脚本，项目启动

将生产的javascript 标签引入自己开发的web页面中，启动项目；
http://10.242.101.173:8081/target/target-script-min.js#anonymous

Example:

（4）调试

页面跑起来以后通过访问http://10.242.101.173:8081/client/#anonymous
就可以看到所有访问这个页面的手机啦

查看weinre中页面访问情况

通过pc可以控制移动端浏览器看到的页面，修改吧~

4.chrome移动端远程调试

使用步骤：

（1）手机、PC都有chrome浏览器；
（2）数据线连接PC和手机，手机开启调试模式；
（3）chrome浏览器地址栏输入chrome://inspect，就可以调试手机版的chrome页面啦

chrome远程调试

5、微信web开发者工具

微信今年推出了 web 开发者工具，能够帮助开发者更方便、更安全地开发和调试基于微信的网页，它是一个桌面应用，通过模拟微信客户端的表现，使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。
通过微信web开发者工具可以：

• 使用自己的微信号来调试微信网页授权
• 调试、检验页面的 JS-SDK 相关功能与权限，模拟大部分 SDK 的输入和输出
• 使用基于 weinre 的移动调试功能
• 利用集成的 Chrome DevTools 协助开发

使用步骤

(1)下载微信web开发者工具

(2)安装打开，并登录调试；

界面如下图所示，想进行页面调试首先需要登录，如果只是模拟器上调试页面内容，在地址栏直接输入网址；通过js-sdk可以看到微信微信分享之后的各个字段内容；点移动调试按钮按按步骤设置一下手机代理即可，甚是方便；

微信web开发工具

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中。

参考

Weinre Home
chrome手机端调试
微信web开发者工具开发文档
UC浏览器开发者版本文档