移动端调试大法

在平常项目中的开发中，接触移动端开发的小伙伴们免不了要和移动端调试打交道，本文特在此总结下经常使用的移动端调试，欢迎小伙伴补充。

谷歌浏览器

谷歌浏览器是咱们前端开发中必不可少的利器，跳样式，打断点，看网络请求，看性能等，基本上你能想到的，谷歌都能知足你，在移动端调试方面也是同样，咱们能够利用谷歌浏览器的手机模式，以下图, 点击这个右侧红框手机按钮，即可以切换为手机模式，同时咱们还能够在左侧红框内点击下拉箭头，选择不一样的手机模式，还可选择responsive模式自定义宽高。

与此同时咱们还能够自定义设备，修改浏览器的ua，用来调试哪些只容许微信访问的页面，以下图：

经过谷歌浏览器，就能够知足咱们大部分需求，可是实际开发中，因为各类机型的问题，真机调试也成为了前端的必修课。

安卓手机调试

因为安卓系统的便利性，咱们能够方便的在电脑端调试真机，包括微信端页面，步骤以下：

1. 手机打开开发者选项，选择容许usb调试（因为安卓机型较多，具体开启方法就不一一阐述）

2.微信中打开网址： http://debugtbs.qq.com，选择容许tbs调试，以下图：

3.在谷歌浏览器中输入chrome://inspect/#devices, 用usb链接手机，即可以看到咱们当前手机中访问的页面，点击便可弹出调试页面,与pc端页面同样，咱们一样能够打断点，查看网络请求等。

初次链接，须要保证咱们的电脑能够访问 chrome-devtools-frontend.appspot.com，chrometophone.appspot.com两个网址，不然显示的页面会为空白，在此给你们安利一个神器， http://ping.chinaz.com

输入咱们的网站，点击ping检测，等待一段时间，便可在下面列表中展现多地ip ping咱们网址的列表，找出哪些能够ping的通的，而后修改本地host便可。

iphone 调试

针对苹果手机，咱们能够优先在iphone用safari访问，打开safari的web检查开关，链接电脑便可看到咱们手机上访问的页面，不过调试没有chrome方便。

spy-debugger

spy-debugger是一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB链接设备。spy-debugger的特性包括：

1. 页面调试＋抓包
2. 操做简单，无需USB链接设备
3. 支持HTTPS。
4. spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
5. 自动忽略原生App发起的https请求，只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不形成任何影响。
6. 能够配合其它代理工具一块儿使用(默认使用AnyProxy) (设置外部代理)

调试方法

1. 安装spy-debugger；

sudo npm install spy-debugger -g

1. 手机和PC保持在同一网络下.
2. 手机开启网络代理，ip为pc的ip，端口号默认为9888.
3. https页面需手机安装证书
4. 命令行输入

spy-debugger

此时界面以下：

此时咱们即可以在elements，resources，console等进行咱们的调试了。同时咱们还能够运用spy-debugger自带的anyproxy进行抓包，以下图：

教程详细地址

调试抓包工具

推荐mac端 charles, window端Fiddler进行抓包，咱们能够抓去各类网络请求，同时还能动态修改请求，且用本地文件替换网络文件，方便本地代码调试线上代码，具体教程可自行搜索。