之所以写这个总结，还要从上周的一次手机端项目的 debug 说起。那天，测试小姐姐拿着自己的 iphone6s 过来找我，说页面打不开。我想：这怎样可能，我手机里挺好的呀，Chrome调试工具也没报错呀！就把她手机拿过来看了看，发现一进去还真就是一片空白。WTF（手动黑人问号）！！！那问题就来了，开发环境下没报错，可真机又出现了预料之外的情况，而且没法像 PC端 那样祭出 F12 大法，怎样定位问题并处理呢？最后凭借着我（谷歌）的聪明才智，找到了媲美 PC端 调试体验的方式。在此总结一波，献给各位被手机端真机调试折磨，而又无从下手的前台er们，话休烦絮，直接奉上：
1. vConsole 推荐指数：★★★☆☆
腾讯出品的 Web 调试面板，相信不少前台小伙伴都用过。vConsole 会在你网页中加一个悬浮的小按钮，可以点击它来打开关闭调试面板，并查看 DOM、Console、Network和 本地存储 等信息。基本可以满足普通前台开发的需求。使用方法也很简单，通过npm安装或者者直接在需要的页面引入 js文件 ，而后 new VConsole() 即可以了。不熟习的小伙伴可以直接去官方的 GitHub 看 README。但是它并没有处理我的问题，由于我的 bug 严重到一进页面就报错，脆弱的 javascript 直接原地爆炸，页面一片空白。
同类产品 eruda
2. Charles 推荐指数：★★☆☆☆
Charles 是一款强大的抓包工具，可以截取包括 https 在内的各种网络请求并方便的查看具体信息。有 Mac、Windows 和 Linux多版本，通过配置 WIFI 代理商，也可以阻拦手机发出的请求。毕竟前台相当一部分报错是网络错误或者数据不符合预期导致的（甩锅后台）。所以通过阻拦 http 请求,查看具体的请求信息和数据，能获取很多有用的信息，可以在肯定程度上帮助 debug。但是该软件是付费的（希望大家支持正版，要记住你也是一位开发），而且它定位不了 js 的报错，所以只能作为一个辅助工具。至于使用方法，网上很多详情—— 此处一枚。
3. weinre 推荐指数：★★★☆☆
weinre是一款很不错的网页检查工具，可以通过在本地启动一个 weinre 服务，并向手机网页嵌入一段 js 脚原本实现和电脑的通信，已达到相似浏览器开发工具那样的的调试效果，它的操作界面和 vConsole 差不多，主要包括查看 DOM、Console、Network 等，只不过这一切是在电脑上操作，而不是在手机上。微信web开发者工具的移动调试也是借助于此。附上一篇简单的使用详情。由于我的 js 早就原地爆炸，它和 vConsole 一样，并没有帮到我什么。
4. Mac + IOS + Safari 推荐指数：★★★★☆
假如你手上有一台 Mac 电脑和一部苹果手机，那么恭喜你，你离处理 bug 只差我这一篇博客了。（手动滑稽）
顺便给大家推荐一个裙，它的前面是 537，中间是631，最后就是 707。想要学习前台的小伙伴可以加入我们一起学习，互相帮助。群里每天晚上都有大神免费直播上课，假如不是想学习的小伙伴就不要加啦。（537-631-707）
第一步：打开苹果手机 设置 > Safari浏览器 > 高级 > Web检查器
第二步： 打开 Mac 上的 Safari浏览器 > 偏好设置 > 高级 > 在菜单栏中显示“开发”菜单
第三步： 用数据线连接你的 Mac 电脑和苹果手机，并选择信任设施。而后在手机的 Safari浏览器 中打开你需要调试的页面，并在电脑上点击下图红框的位置。
第四步：点击之后就会出现如下图所示的，几乎和电脑一样的调试界面，怎样操作，我想各位大佬也不用我多啰嗦了吧！我就是通过这种方式发现 js 的报错，并成功处理问题，博得小姐姐认可的。
5. Chrome浏览器 + Android 推荐指数：★★★★★
很多小伙伴可能不使用 Mac 或者者不习惯 Safari浏览器 的开发者工具，没关系，谷歌也有相似的工具，而且更符合大家的使用习惯。有梯子的小伙伴，可以直接看谷歌官方文档。
第一步：打开 Android 手机 设置 > 开发者选项 > USB调试。设置里面没有 开发者选项 的，自行百度。
第二步：通过数据线连接你的电脑和 Android 手机，会弹出如下界面，点击 确定。
第三步：给你的 Android 手机下载一个手机版的 Chrome浏览器 (各大应用商店自行搜索)，并在手机上的 Chrome浏览器 中打开你需要调试的页面。
第四步：打开你电脑上的 Chrome浏览器 ，按下图标注顺序，依次点开。我使用的是 小米5，你可以看到左侧有 MI 5 已连接的字样。划线的地方分别是手机上 Chrome浏览器 和自带浏览器 WebView 下打开的页面。
第五步： 每个页面右侧都有一个 Inspect 检查的按钮，点击就会出现你熟习的画面，后面就不用解释了吧！走你。
公司的小伙告诉我，这种方法他需要爬梯子才能用，爬不上去的小伙伴可以关注我，我后面计划出一篇详情如何自己搭梯子的博客。
总结
工欲善其事必先利其器，没有好的调试工具或者方法，手机端真机下的 debug 简直是前台的噩梦。但是有了这些好用的方法，我想各位优秀的前台大佬，帮妹子修复个小 bug 还是 so easy 的。假如各位大佬有好的意见或者者有其余的处理方案，也欢迎评论区交流。
