之所以写这个总结,还要从上周的一次移动端项目的 debug
说起。那天,测试小姐姐拿着自己的 iphone6s
过来找我,说页面打不开。我想:这怎么可能,我手机里挺好的呀,Chrome
调试工具也没报错呀!就把她手机拿过来看了看,发现一进去还真就是一片空白。WTF(手动黑人问号)!!!那问题就来了,开发环境下没报错,可真机又出现了意料之外的情况,而且没法像 PC端
那样祭出 F12
大法,怎么定位问题并解决呢?最后凭借着我(谷歌)的聪明才智,找到了媲美 PC端
调试体验的方式。在此总结一波,献给各位被移动端真机调试折磨,而又无从下手的前端er们,话休烦絮,直接奉上:
1. vConsole 推荐指数:★★★☆☆
腾讯出品的 Web 调试面板,相信不少前端小伙伴都用过。vConsole
会在你网页中加一个悬浮的小按钮,可以点击它来打开关闭调试面板,并查看 DOM
、Console
、Network
和 本地存储
等信息。基本可以满足普通前端开发的需求。使用方法也很简单,通过npm
安装或者直接在需要的页面引入 js文件
,然后 new VConsole()
就可以了。不熟悉的小伙伴可以直接去官方的 GitHub 看 README。但是它并没有解决我的问题,因为我的 bug
严重到一进页面就报错,脆弱的 javascript
直接原地爆炸