小结：手机端调试（项目中常用）的痛点是在手机端开发，先用手机模拟器在PC端调试，我们只会在手机端调试之后移动端就没有问题了。用于测试的浏览器。这个时候，一旦出现问题，由于没有可视化的界面，我们很难去解决。在很多情况下，它是根据经验，或者通过排除的方法。甚至，我们不得不将其归咎于浏览器的实现。移动开发最重要的是掌握调试技巧，修复看不见的bug。1、谷歌浏览器手机模式——公开调试谷歌浏览器是我们前端开发中不可或缺的工具。调整样式，断点，查网络请求，查性能等等，基本上你能想到的，谷歌都能满足你。移动调试也是如此。我们可以使用谷歌浏览器的手机模式，如下图所示。点击右侧红框内的手机按钮，可以切换到手机模式。同时，我们还可以点击左侧红框内的下拉箭头，选择不同的手机模式，也可以选择响应式模式自定义宽高。同时我们也可以自定义设备，修改浏览器的ua，用来调试只允许微信访问的页面，如下图：谷歌浏览器可以满足我们大部分的需求，但是在实际开发中，由于各种为了解决不同机型的问题，真机调试也成为了前端的必修课。*特点：大众调试工具，但不能模拟真机问题。2.Mac+IOS+Safari-Advanceddebugging如果你有Mac电脑和苹果手机，就差解决bug了。1、浏览器设置：Safari——首选项——高级——勾选“在菜单栏中显示开发”菜单。2.iPhone设置：设置-Safari-高级-打开WebInspector。3.通过手机的Safari打开H5页面，我们通过浏览器开发选项可以看到：4.这样问题就成功解决了。*功能：无法调试webView内的页面。三、Chrome+Android-高级调试1.打开安卓手机设置>开发者选项>USB调试。2.通过数据线连接电脑和安卓手机，弹出如下界面，点击确定。3、在Chrome中输入：chrome://inspect进入调试页面。4、可以看到这是调试界面。*特点：控制台可以正常查看页面。4.spy-debugger-高级调试spy-debugger：手机端调试利器，便捷的远程调试手机页面，抓包工具。spy-debugger是一款一站式页面调试和抓包工具。远程调试任意手机浏览器页面，任意手机webview（如微信、HybridApp等）。支持HTTP/HTTPS，无需USB连接。spy-debugger的特点包括：页面调试+抓包操作简单，无需USB连接设备支持HTTPS拦截webview发起的https请求，不会对使用SSLpinning技术的原生应用造成任何影响。可以和其他代理工具一起使用（默认使用AnyProxy）（设置外部代理）调试方法（重要）1、安装spy-debuggersudonpminstallspy-debugger-g2。保持手机和PC在同一个网络下3.手机开启网络代理，ip为pc的ip，默认端口号98884，https页面需要在手机上安装证书5、命令行进入spy-debugger此时界面如下：此时我们可以在elements、resources、console等进行我们的调试。同时我们也可以使用spy-debugger自带的anyproxy来抓包，如下图：五、Charles抓包工具-高级调试1、什么是CharlesCharles在青花瓷中被称为中国人。它是一个HTTP代理服务器和HTTP监视器，用于反向代理服务器。通过成为电脑或浏览器的代理，然后拦截请求和请求结果，达到数据包分析的目的。Charles是一款基于java开发的跨平台抓包软件。它可以在Mac、Linux和Windows下使用。可以抓取电脑和手机上的http和https请求。是前端开发利器。特点：跨平台，半免费。二、CharlesCharles安装配置工作原理1、Charles安装Charles官网：https://www.charlesproxy.com页面详解2、Charles代理设置3、Charles访问控制4、Client-MacOS快捷代理设置应用场景当MacOS客户端与运行Charles软件工具的电脑为同一台电脑时，可通过快捷代理设置方式进行设置。操作步骤：打开Charles工具后，在“代理”菜单中选择“macOS代理”选项。5.客户端-IOS手机代理设置1）在IOS手机中选择“设置”-“无线局域网”2）点击连接的无线网络名称3）在HTTP代理配置代理中选择“手动”4）进入服务器IP地址和端点，点击“存储”，如图：6、调试工具——场景分析既然移动端调试的方案那么多，那么在实际操作中我们应该如何选择呢？场景分析1、Safari：iPhone调试工具，查错修改样式的首选；2、iOS模拟器：无需真机，适用于调试Webview与H5交互频繁的功能页面；3、Charles：MacOS系统首选抓包工具，适用于查看、控制网络请求、分析数据状态；4、Fiddler：适用于Windows平台，类似于Charles，查看和控制网络请求，分析数据状态；5、Spy-Debugger：强大的手机端调试工具，方便远程调试手机页面，抓包工具；6.Whistle：基于Node的跨平台Web调试代理工具；7.ChromeRemoteDevices：依赖Chrome进行远程调试，适用于Android手机静态页面的远程调试；8.localhosttoip：真机调试，适用于静态页面的远程调试；9、vConsole：项目内置，打印移动日志，查看网络请求，查看Cookies和Storage；总结：工欲善其事，必先利其器。没有好的调试工具和方法，移动端的调试是真实的。这是前端的噩梦。但是有了这些好用的方法，各位优秀的前端大佬们，修复一个小bug就是这么容易。
