之所以写这个总结, 还要从上周的一次移动端项目的 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 多版本, 通过配置 Wi-Fi 代理, 也可以拦截手机发出的请求. 毕竟前端相当一部分报错是网络错误或数据不符合预期导致的(甩锅后端). 所以通过拦截 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 的. 如果各位大佬有好的意见或者有其他的解决方案, 也欢迎评论区交流.
来源: http://www.jianshu.com/p/1a282910ddf4