专栏首页grain先森前端-移动端调试痛点?——送你五款前端开发利器

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

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

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

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

同类产品 eruda

2. Charles 推荐指数:★★☆☆☆

Charles 是一款强大的抓包工具,可以截取包括 https 在内的各种网络请求并方便的查看具体信息。有 MacWindows 和 Linux多版本,通过配置 WIFI 代理,也可以拦截手机发出的请求。毕竟前端相当一部分报错是网络错误或数据不符合预期导致的(甩锅后端?)。所以通过拦截 http请求,查看具体的请求信息和数据,能获取很多有用的信息,可以在一定程度上帮助 debug。但是该软件是付费的(希望大家支持正版,要记住你也是一位开发),而且它定位不了 js 的报错,所以只能作为一个辅助工具。至于使用方法,网上很多介绍—— 此处一枚。

3. weinre 推荐指数:★★★☆☆

weinre是一款很不错的网页检查工具,可以通过在本地启动一个 weinre 服务,并向手机网页嵌入一段 js 脚本来实现和电脑的通信,已达到类似浏览器开发工具那样的的调试效果,它的操作界面和 vConsole 差不多,主要包括查看 DOMConsoleNetwork 等,只不过这一切是在电脑上操作,而不是在手机上。微信web开发者工具的移动调试也是借助于此。附上一篇简单的使用介绍。因为我的 js 早就原地爆炸?,它和 vConsole 一样,并没有帮到我什么。

4. Mac + IOS + Safari 推荐指数:★★★★☆

如果你手上有一台 Mac 电脑和一部苹果手机,那么恭喜你,你离解决 bug只差我这一篇博客了。(手动滑稽)

第一步:打开苹果手机 设置 > 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 的。如果各位大佬有好的意见或者有其他的解决方案,也欢迎评论区交流。

作者:郑昊川 https://juejin.im/post/5b72e1f66fb9a009d018fb94

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 函数默认值

    看到这里,上面的问题你应该就彻底明白啦。。。你可以很自信的在控制台里面验证一下你的答案啦。但是,别着急,接着往下看?,你会收获更多。

    grain先森
  • 前端性能优化

    本文主要考虑客户端性能、服务器端和网络性能,内容框架来自Yahoo Developer Network,包含 7 个类别共 35 条前端性能优化最佳实践,在此基...

    grain先森
  • 移动端真机调试

    很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端的浏览器进行测试,这个时候,如果没有出现问题,皆大欢喜。但是...

    grain先森
  • 移动端调试痛点?送你五款前端开发利器!

    之所以写这个总结,还要从上周的一次移动端项目的 debug 说起。那天,测试小姐姐拿着自己的 iphone6s 过来找我,说页面打不开。我想:这怎么可能,我手机...

    用户4962466
  • 打开手机的这个功能,微信支付宝不怕盗刷!

    面对层出不穷的诈骗方式和盗刷手段 支付平台也开启了各种验证模式 手机丢了不可怕 可怕的是与之绑定的各种账号 一个短信验证码 你的支付宝、微信便全落入他人手中! ...

    企鹅号小编
  • 怎么用宝塔面板安装memcached?

    宝塔面板安装memcached后可以给服务器提速,进而加快网站访问速度,提高用户体验。很多朋友不知道如何操作,赵一八分享通过宝塔面板安装memcached及详细...

    用户7261497
  • 宝塔面板安装memcached及详细配置方法

    宝塔面板安装memcached后可以给服务器提速,进而加快网站访问速度,提高用户体验。很多朋友不知道如何操作,本文中魏艾斯博客分享通过宝塔面板安装memcach...

    魏艾斯博客www.vpsss.net
  • 当我们按下电源键,Android 究竟做了些什么?

    ? 现在,按下电源键 下面是Android启动的核心步骤流程图,看文字的时候,记得回来对照图来理解喔,希望阅读全文后,回观流程图,会有恍然大悟的感觉,那么...

    腾讯移动品质中心TMQ
  • Laravel 控制台命令行artisan

    Artisan 是 Laravel自带的命令行接口,它提供了许多实用的命令来帮助你构建Laravel 应用。要查看所有可用的 Artisan 命令的列表,可以使...

    hedeqiang
  • centos安装memcached

    Marser

扫码关注云+社区

领取腾讯云代金券