关闭

移动端调试工具推荐

时间: 2019-07-14阅读: 969标签: 调试

之所以写这个总结,还要从上周的一次移动端项目的 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 只差我这一篇博客了。(手动滑稽)

第一步:打开苹果手机 设置 > 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 的。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/4191

关闭

九大Java性能调试工具

NetBeans分析器是NetBeans的扩展,用于为NetBeans IDE提供分析功能。NetBeans IDE是一个开源的集成开发环境。NetBeans IDE支持开发所有Java应用程序类型(Java SE(包括JavaFX),Java ME,Web,EJB和移动应用程序)

10个用Console来Debug的高级技巧

在过去的十年中,我最热衷的事情之一就是前端开发(特别是JavaScript)。作为一个匠人,我喜欢专研各种工具。在本文,我会为你介绍一些用老式console来debug的技巧。

使用 tap 来快速 debug

在这里 tap 是一个可以用来快速调试、链式调用、匿名函数,还可以打印任何你想打印的东西的函数。为什么我们不用 console.log 这个老方式了?

Js调试:console对象

console.log方法用于在控制台输出信息。它可以接受一个或多个参数,将它们连接起来输出。warn方法和error方法也是在控制台输出信息,它们与log方法的不同之处在于,warn方法输出信息时,在最前面加一个黄色三角

JS断点调试,必备的javaScript的debug调试技巧

断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了。本文主要介绍了“逐语句执行”按钮、“逐过程执行”按钮、console控制台这三个工具,以及调试bug时的一些思路。

无限debugger问题的实现_解决阻止页面不断debugger

一次扒某网站的前端代码,打开控制台要看Network,结果发现他们页面一打开控制台就不断的debugger,100ms一次,很影响看页面内容。每次在断点处停下来的时候页面都会跳到source这个tab页面,也能够看到他的debugger的代码,其实他的实现很简单

JS反调试技术

本文简单整理一下日常使用到的JS反调试技术,主要目的防止非法用户查看网页运行流程,分析代码。虽然不是绝对安全的,但也在一定程度上提高了调试破解的难度。在Chrome浏览器中,最常用到的就是DevTools工具进行调试JS

使用vconsole进行移动端调试

可使用npm进行安装:在项目的根html文件的<head>标签中引入dist/vconsole.min.js,也可使用CDN免安装:同样需要放在项目根html文件的<head>标签中

前端常用的几个Js调试技巧

除了console.log, debugger是我们最喜欢、快速且肮脏的调试工具;可以通过console.log查看并滚动浏览,亦或者使用console.table展开,更容易看到正在处理的内容!

vConsole_vue移动端调试

当我们在浏览器开发vue页面时,由于浏览器对于调试有天然的支持,我们开发起来很方便。但是现在已经进入了移动端时代,移动端页面的需求越来越大。在开发移动端页面的时候我们通常是在浏览器完成开发完成

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!