点击上方 前端瓶子君,关注公众号
回复算法,加入前端编程面试算法每日一题群
前言
这么快就年终了,回顾2021年发现没干啥事,换了个城市,换了份工作,新公司新坑,现在主做Hybrid APP,那么年终就总结下移动端的调试方案来划划水吧🐰
移动端的真机调试,总结了下就大致就2种方法,要不就是网页面注入js脚本,劫持console、网络请求等,比如: vConsole
、eruda
等调试库。要不就是使用抓包工具劫持浏览器与服务器的请求,比如:Charles
,下面分享下我使用过的方法。
1、alert
大法
这有啥好说的,(⊙﹏⊙)
推荐指数0颗星
2、抓包工具Charles
、Fiddler
平时只用抓取各种网络,需要设置手机的wifi代理
推荐指数2颗星
3、vConsole
、eruda
等调试库
这个方法需要在页面中插入一段 JS 脚本,这里以vConsole
为例,导入vconsole.min.js
,并实例化,注实例化代码最好放在头部,以便能一开始就能劫持内容:
<script src="./vconsole.min.js"></script>
<script>
// 初始化
new VConsole();
</script>
复制代码
或
npm i vconsole
复制代码
import VConsole from 'vconsole';
new VConsole();
复制代码
![09585d27fc27c4439045bc90437fa7e4.png](https://i-blog.csdnimg.cn/blog_migrate/8af6ca0793f4fd371a8bfb941262708f.png)
![d29182cd6cb84b0050761def1ad6e76a.png](https://i-blog.csdnimg.cn/blog_migrate/bbbb82b10d8eed443fa714e2c34ee5a4.png)
优点:方便,可查看console、network、elements等;
缺点:css调试不友好,console会劫持consloe的打印,不能定位到打印的代码位置,需要额外加载js脚本
推荐指数3颗星
4、Chrome
+ Android
首先在chrome安装ADB Plugin
chrome中输入 chrome://inspect
通过数据线连接你的电脑和 Android
手机,打开USB的调试模式
就可以在上面的页面中看到自己的设备:
![6f0bbed49d84f992fbdd3fb57b808845.png](https://i-blog.csdnimg.cn/blog_migrate/bc44f939df8c229e541f56a8e519e5d5.png)
点击inspect
然后就可以欢乐地调试了,和使用谷歌调试pc端一样,可惜ios不适用 推荐指数4颗星
5、Mac
+ IOS
+ Safari
打开手机点击设置 -> Safari浏览器 -> 高级
打开JavaScript和web检查器
。
![43e6c66d935f7dedf5efdbafb3420e81.png](https://i-blog.csdnimg.cn/blog_migrate/ce300046aed4e36e025a9a8b8dc047c2.png)
打开手机上的Safari,输入一个网址www.baidu.com[1]
在Mac上打开Safari,点击开发-iPhone lh-www.baidu.com,[2] 就可以看到以下页面
![ff8770703ba619199a69e58dd78d2011.png](https://i-blog.csdnimg.cn/blog_migrate/725927ad5cabef728279767e735081f0.png)
注:app的webview也可以使用这个方法,只需要让客户端同学打包个debug版本
只适用ios,而且需要mac,而且有个缺点,没有打开调试窗口时,webview的网络请求和console
都不会记录,webview关闭,调试窗口会直接关闭。推荐指数4颗星
6、whistle
安卓、ios都能调试,跨平台、代理抓包、H5调试、debugger、请求劫持、HTTPS支持、WebSocket数据捕获等,功能非常强大。weinre是用node编写的,使用npm来进行安装
安装:
npm install -g whistle
复制代码
运行:
w2 start
复制代码
![22b814dc7989340e79906449cd06c471.png](https://i-blog.csdnimg.cn/blog_migrate/be62edf014b746764a04efbb20dacf50.png)
跨平台、抓包、 DOM
、Console
、Network
等,功能非常强大。查看文档[3]
推荐指数5颗星
7、Mobile Debug
功能和whistle
非常相似,我严重有理由怀疑Mobile Debug
的开发者就是在whistle
的基础上进行开发的。
`Mobile Debug`官网下载地址[4]
下载安装后
![0199ac4da83ac5200d109766a28c421d.png](https://i-blog.csdnimg.cn/blog_migrate/de78dea9a077e25b9aa213e755304941.png)
抓包:
![5cb1710bff671c1fe612db2e4ffb5203.png](https://i-blog.csdnimg.cn/blog_migrate/92547aa0339aa51e09a895f1c536c218.png)
网页调试:
![4773002fa6588902a823a453869ae0dd.png](https://i-blog.csdnimg.cn/blog_migrate/d5b2486c95d90b7606f5a2c5c44e8c95.png)
通过配置劫持规则将线上出bug的文件(如js)劫持到本地修改并调试:
![d6e9947080842b9d3f58db17ecf4f420.png](https://i-blog.csdnimg.cn/blog_migrate/853b7e0006a8776541143a2c412dfa30.png)
需要把手机在同一个局域网wifi设置代理,便可使用,https需要增加安装证书步骤。
推荐指数5颗星
最后
3和7是我现在主要使用的方法,用这就能完全解决移动端的调试问题。
来自:咸鱼翻身翻两次
https://juejin.cn/post/7041049806562656293
最后
欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」,加入前端编程源码算法群,每日一道面试题(工作日),第二天瓶子君都会很认真的解答哟!
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「阅读」,每日刷刷高质量好文!
如果这篇文章对你有帮助,「在看」是最大的支持
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持