移动端调试大法

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

谷歌浏览器

谷歌浏览器是我们前端开发中必不可少的利器，跳样式，打断点，看网络请求，看性能等，基本上你能想到的，谷歌都能满足你，在移动端调试方面也是一样，我们可以利用谷歌浏览器的手机模式，如下图, 点击这个右侧红框手机按钮，便可以切换为手机模式，同时我们还可以在左侧红框内点击下拉箭头，选择不同的手机模式，还可选择 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 进行抓包，我们可以抓去各种网络请求，同时还能动态修改请求，且用本地文件替换网络文件，方便本地代码调试线上代码，具体教程可自行搜索。