在日常项目中的开发中，接触移动端开发的小伙伴们免不了要和移动端调试打交道，本文特在此总结下常用的移动端调试，欢迎小伙伴补充。
谷歌浏览器
谷歌浏览器是我们前端开发中必不可少的利器，跳样式，打断点，看网络请求，看性能等，基本上你能想到的，谷歌都能满足你，在移动端调试方面也是一样，我们可以利用谷歌浏览器的手机模式，如下图, 点击这个右侧红框手机按钮，便可以切换为手机模式，同时我们还可以在左侧红框内点击下拉箭头，选择不同的手机模式，还可选择responsive模式自定义宽高。
与此同时，我们还可以自定义设备，修改浏览器的ua，用来调试哪些只允许微信访问的页面，如下图：
通过谷歌浏览器，就可以满足我们大部分需求，但是实际开发中，由于各种机型的问题，真机调试也成为了前端的必修课。
安卓手机调试
由于安卓系统的便利性，我们可以方便的在电脑端调试真机，包括微信端页面，步骤如下：
- 手机打开开发者选项，选择允许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的特性包括：
- 页面调试＋抓包
- 操作简单，无需USB连接设备
- 支持HTTPS。
- spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
- 自动忽略原生App发起的https请求，只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。
- 可以配合其它代理工具一起使用(默认使用AnyProxy) (设置外部代理)
调试方法
- 安装spy-debugger；
sudo npm install spy-debugger -g- 手机和PC保持在同一网络下.
- 手机开启网络代理，ip为pc的ip，端口号默认为9888.
- https页面需手机安装证书
- 命令行输入
spy-debugger此时界面如下：
此时我们便可以在elements，resources，console等进行我们的调试了。同时我们还可以运用spy-debugger自带的anyproxy进行抓包，如下图：
调试抓包工具
推荐mac端 charles, window端Fiddler进行抓包，我们可以抓去各种网络请求，同时还能动态修改请求，且用本地文件替换网络文件，方便本地代码调试线上代码，具体教程可自行搜索。
原文地址：https://www.cnblogs.com/mopagunda/p/11568422.html