随着移动端的不断推进，移动调试也成为了前端同学们面临的一个新的课题，在PC时代，我们直接打开chrome的检查元素面板。就可以解决大部分事情了。但是到了移动端，明明在电脑上模拟好的元素，在手机上就会乱掉。今天我们就来一起聊一聊移动前端调试的那些事儿。一起扩展我们的移动端调试手段~
1模拟手机调试
1.1如何使用？
chrome作为一款浏览器，给开发者带来的便捷也是为人所称道的。在PC端，只需要F12，打开开发者工具，就可以开始调试了，这点就不用我多说了。而其开发者工具中加入的模拟手机调试选项更是强大。只需要点击切换设备工具，如图1.1.1所示。
图1.1.1
可以看到，我们的浏览界面已经变为模拟手机的模式了。可以切换各个UA来观察并调试布局。如图1.1.2所示：
图1.1.2
1.2何时使用？
笔者建议在日常开发过程中，尽量使用chrome模拟进行开发，因为其容易使用与速度快（电脑的性能与网速还是比手机强不少的）。使用模拟功能，我们能快速先把功能与布局调试出来。据笔者经验，使用chrome模拟开发出来的网页，一般在真机上都没什么问题。
1.3特别关怀之Tips
使用chrome模拟调试的同学可能有时候会碰到touchstart，touchend等事件无法触发的情况。先不要着急担心是自己代码的问题，因为chrome模拟调试。目前还有一点问题，我们在进行过一些操作后，模拟状态会丢失。chrome虽然窗口大小还在模拟移动端，鼠标事件已经变成PC端的模拟了。所以需要再触发两次模拟，就会恢复模拟移动端。如图1.3.1
图1.3.1
2真机调试之android手机+Chrome
2.1干什么用？
虽然模拟开发很强大，但是我们在chrome上模拟的移动版网页，在真机运行的时候，总会遇到一些边边角角的问题，这时，我们就要使用真机调试了。笔者建议，使用模拟开发完毕之后，如果在android手机上测试遇到了问题(无论使用什么浏览器)，首先拿chrome来看一下，如果在手机chrome上也遇到了同样的问题，那么使用chrome的调试是非常便捷的，应当首选其调试。
2.2如何使用？
你需要有：一台android手机，一台电脑(PC与mac均可)，一根androidusb线。
1首先我们需要在自己的android手机上安装chrome浏览器。
2我们需要打开手机的开发者模式，一般android手机都是以下路径打开开发者模式，设置-关于手机-版本号连按5次，之后设置菜单中会多出一个开发人员选项，进入将其中的USB调试打开即可如图2.2.2.
图2.2.2
3将手机与电脑通过USB线连接，弹出对话框是否允许USB调试，选择确定，如图2.2.3
图2.2.3
4打开手机上的chrome，并进入需要调试的页面，如图2.2.4
图2.2.4
5新开chrome的tab，输入chrome://inspect/，进入调试页面。此时，我们发现，chrome检测到了我们的手机，与我们手机chrome上运行的网页，如图2.2.5。
图2.2.5
6点击inspect弹出chrome调试工具，如图2.2.6。
图2.2.6
7开心的进行与PC模拟器一样的调试吧。
2.3特别关怀之TIPS
相信很多同学在上述2.2.6步骤中，点击inspect后，弹出来的面板是一片空白(如图2.3.1)。这是因为，首次使用改功能时，必须是可以连接外网的(可以翻墙)。初始化后，成功显示了调试工具面板的话，以后就不用翻墙了。
图2.3.1
3真机调试之iphone+safari
3.1干什么用？
如果模拟器没有问题，iphone手机上运行时却出现了问题的话，首先使用iphone自带的safari查看一下网页，是否会出现同样的问题，如果也出现了同样的问题，则建议优先使用iphone自带的safari进行debug，查看问题。
3.2如何使用？
你需要有一个iphone，与一台mac，一根iphoneusb线。
1打开safari调试。具体步骤为设置-safari-高级-web检查器(打开)，如图3.2.1
图3.2.1
2打开safari，并打开要调试的网页，如图3.2.2
图3.2.2
3打开mac上的safari，如图3.2.3，上方如果有开发选项，那么可以调到步骤5，如果没有，请接着执行步骤4.
图3.2.3
4如果mac上的safari没有开发选项，则点击safari-偏好设置-高级-在菜单栏中显示『开发』菜单，如图3.2.4.1与图3.2.4.2，之后，safari的菜单栏中就会出现『开发』选项。
图3.2.4.2
图3.2.4.1
5点击菜单栏上的开发选项，在其中，找到自己的iphone，并点击自己打开的tab，如图3.2.5。
图3.2.5
6利用检查器进行调试，如图3.2.6
图3.2.6
4UC浏览器
4.1干什么用？
如果上面的提及的浏览器均已调试无误，可偏偏只在UC浏览器上调试出现了问题，我们该怎么办呢？别着急，我们的UC也有调试方法。可以使用单独的UC开发者工具进行调试。但是根据本人实际使用，并不是特别好用，但UC开发者工具也算良心，我们只在UC上遇到问题时，建议使用。
4.2如何使用?
你需要有：一台android手机，一台windows电脑。
1首先，你需要下载一个UC开发者版，uc开发者android版下载，并且安装至手机。
2你需要下载ADB工具
3将ADB工具解压至任意文件夹下(虽然官方上说要解压到C:WINDOWSsystem32目录下，但是根据实际测试，解压到这个文件夹下可能会有问题，当读者遇到问题时，不放试一下，不要放在C:WINDOWSsystem32文件夹下，换个文件夹)。
4下载豌豆荚，打开。并将手机通过USB线，连接至PC，豌豆荚可识别即为此步成功，如图4.2.4
图4.2.4
5在安装好的UC开发者版中，打开将要调试的页面。如图4.2.5：
图4.2.5
6通过windows的CMD切换到adb工具解压的目录。并执行命令
adbforwardtcp:tcp:
开启监听，如图4.2.6
图4.2.6
7在浏览器中输入localhost:，可以看到我们在手机上的UC开发者版打开的页面，如图4.2.7.1，点击进入此页面的调试，如图4.2.7.2
图4.2.7.1
图4.2.7.2
4.3特别关怀之Tips
其实如果读者们动手去实践，并且已经用上了UC开发者版调试的话，那么就会感受到一些别扭，uc调试的network无法捕获刷新页面的网络请求。搭建时，要记得看手机上面有没有弹出是否允许USB调试。
具体搭建环境方法，请参见白癜风身上复发该要怎么办怎么治疗北京中科医院坑