移动端调试痛点?——送你五款前端开发利器

Posted 奇舞精选

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端调试痛点?——送你五款前端开发利器相关的知识,希望对你有一定的参考价值。

编者按:本文转载自掘金专栏,由 郑昊川 授权奇舞周刊转载。

之所以写这个总结,还要从上周的一次移动端项目的 debug 说起。那天,测试小姐姐拿着自己的 iphone6s 过来找我,说页面打不开。我想:这怎么可能,我手机里挺好的呀,Chrome调试工具也没报错呀!就把她手机拿过来看了看,发现一进去还真就是一片空白。WTF(手动黑人问号)!!!那问题就来了,开发环境下没报错,可真机又出现了意料之外的情况,而且没法像 PC端 那样祭出 F12 大法,怎么定位问题并解决呢?最后凭借着我(谷歌)的聪明才智,找到了媲美 PC端 调试体验的方式。在此总结一波,献给各位被移动端真机调试折磨,而又无从下手的前端er们,话休烦絮,直接奉上:

1. vConsole 推荐指数:★★★☆☆

腾讯出品的 Web 调试面板,相信不少前端小伙伴都用过。vConsole 会在你网页中加一个悬浮的小按钮,可以点击它来打开关闭调试面板,并查看 DOMConsoleNetwork本地存储 等信息。基本可以满足普通前端开发的需求。使用方法也很简单,通过npm安装或者直接在需要的页面引入 js文件 ,然后 new VConsole() 就可以了。不熟悉的小伙伴可以直接去官方的 GitHub 看 README。但是它并没有解决我的问题,因为我的 bug 严重到一进页面就报错,脆弱的 javascript 直接原地爆炸

以上是关于移动端调试痛点?——送你五款前端开发利器的主要内容,如果未能解决你的问题,请参考以下文章

移动WEB调试利器——Rosin

移动端真机调试大法

前端调试利器 - Charles

前端调试利器 - Charles

前端开发利器之静态服务器

Sketch插件——移动端UI开发利器Orion3