在日常项目开发中，接触移动端开发的朋友，难免要和移动端调试打交道。本文总结了常用的手机调试。欢迎朋友补充。谷歌浏览器谷歌浏览器是我们前端开发不可或缺的工具，跳转样式，断点，看网络请求，看性能等等，基本上你能想到的，谷歌都能满足你，在移动调试方面同理，我们可以使用谷歌浏览器的手机模式，如下图，点击右侧红框内的手机按钮，可以切换到手机模式，我们也可以点击下拉-左边红框内的向下箭头选择不同的手机模式，也可以选择响应式模式自定义宽高。同时我们也可以自定义设备，修改浏览器的ua，用来调试只允许微信访问的页面，如下图：谷歌浏览器可以满足我们大部分的需求，但是在实际开发中，由于各种为了解决不同机型的问题，真机调试也成为了前端的必修课。Android手机调试由于Android系统的便利性，我们可以很方便的在电脑上调试真机，包括微信页面。步骤如下：在手机上打开开发者选项，选择允许usb调试（因为安卓机型很多，具体打开方法就不一一说明了）2、在微信中打开网址：http://debugtbs.qq.com，选择允许tbs调试，如下图：3、谷歌浏览器输入chrome://inspect/#devices，用usb连接手机，我们可以看到页面我们目前是在手机端访问，点击弹出调试页面，和PC端页面一样，我们也可以断点，查看网络请求等，第一次连接，需要确保我们的电脑可以访问chrome-devtools-frontend.appspot.com和chrometophone.appspot.com这两个URL，否则显示的页面是空白的。这里给大家一个神器，http://ping进入我们的网站.chinaz.com，点击pingdetection，稍等片刻，下面的列表中会显示多地ping的ip列表，找出哪个可以ping通，然后修改本地主机。Iphone调试针对的是苹果手机。我们可以先用safari访问iphone，打开safari的web检查开关，连接电脑就可以看到我们手机访问过的页面，但是调试没有chrome方便。spy-debuggerspy-debugger是一款一站式页面调试和抓包工具。远程调试任意手机浏览器页面，任意手机webview（如微信、HybridApp等）。支持HTTP/HTTPS，无需USB连接。spy-debugger的特点包括：页面调试+抓包操作简单，无需USB连接设备，支持HTTPS。spy-debugger集成了weinre、node-mitmproxy、AnyProxy。自动忽略原生应用发起的https请求，只拦截webview发起的https请求。它不会对使用SSL固定技术的本机应用程序产生任何影响。可以配合其他代理工具（默认使用AnyProxy）（设置外部代理）调试方式安装spy-debugger；sudonpminstallspy-debugger-g手机和PC保持在同一网络下。手机开启网络代理，ip为PC端ip和端口号默认为9888，https页面需要在手机上安装证书。在命令行输入spy-debugger，界面如下：此时我们可以在elements、resources、console等进行我们的调试，同时我们也可以使用spy自带的anyproxy-调试器抓包，如下图：教程详细地址调试抓包工具推荐mac端charles，window端Fiddler抓包，我们可以抓取各种网络请求，同时动态修改请求，并将网络文件替换为本地文件，方便本地代码调试在线代码，具体教程可自行搜索。
