利用Vconsole和Fillder进行移动端抓包调试方法


Posted in Javascript onMarch 05, 2019
在开发中,有时候我们需要在手机上进行测试,可是如果遇到bug,我们怎么进行抓包调试呢?这里介绍两种方式:
  • Vconsole
  • Fillder

利用Vconsole进行调试

一个轻量、可拓展、针对手机网页的前端开发者调试面板

Vconsole特性:

  • 查看 console 日志
  • 查看网络请求
  • 手动执行 JS 命令行
  • 自定义插件

入门

①首先需要下载Vconsole,地址https://www.npmjs.com/package/vconsole

npm install vconsole

③ Import dist/vconsole.min.js to your project:

<script src="path/to/vconsole.min.js"></script>
<script>
 // init vConsole
 var vConsole = new VConsole();
 console.log('Hello Vconsole');
</script>

利用Vconsole和Fillder进行移动端抓包调试方法

利用Fillder进行调试

打开Fiddler,然后点击菜单栏的Tools > Options,打开“Options”对话框

利用Vconsole和Fillder进行移动端抓包调试方法

在打开的对话框中切换到“HTTPS”选项卡。

利用Vconsole和Fillder进行移动端抓包调试方法

在打开的“HTTPS”选项卡中,勾选“Capture HTTPS CONNECTs”和“Decrypt HTTPS traffic”前面的复选框,然后点击“OK”。

利用Vconsole和Fillder进行移动端抓包调试方法

Connection勾选允许远程连接

利用Vconsole和Fillder进行移动端抓包调试方法

配置host文件:C:\Windows\System32\drivers\etc(该操作视情况而定)
重启fiddler
用一个wifi设置手机代理,服务器地址为自己电脑的IP,端口跟fiddler一致(默认8888)
用手机浏览器 打开IP:端口号,下载证书
安装完证书后,连接设置了代理的wifi

--------------可以happy的进行调试了-----------------------------

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
原生js轮播特效
May 18 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 #Javascript
[jQuery] 事件和动画详解
Mar 05 #jQuery
Vue 事件处理操作实例详解
Mar 05 #Javascript
Vue插槽原理与用法详解
Mar 05 #Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 #Javascript
JavaScript函数定义方法实例详解
Mar 05 #Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 #Javascript
You might like
php中定义网站根目录的常用方法
2010/08/08 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
Python中装饰器的一个妙用
2015/02/08 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
Python多层装饰器用法实例分析
2018/02/09 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
python实现维吉尼亚加密法
2019/03/20 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
Tensorflow累加的实现案例
2020/02/05 Python
查看keras的默认backend实现方式
2020/06/19 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
用Python写一个for循环的例子
2016/07/19 面试题
大学生应聘导游自荐信
2014/06/02 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
环卫工人慰问信
2015/02/15 职场文书
离婚案件上诉状
2015/05/23 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
Java 数组的使用
2022/05/11 Java/Android