利用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 相关文章推荐
javascript onmouseout 解决办法
Jul 17 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
原生JS实现幻灯片
Feb 22 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
php表单提交问题的解决方法
2011/04/12 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
laravel自定义分页效果
2017/07/23 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
python实现单链表的方法示例
2019/09/03 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
Python 如何展开嵌套的序列
2020/08/01 Python
C#和SQL Server的面试题
2016/08/12 面试题
幼儿园春游活动方案
2014/01/19 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
财务工作检讨书
2014/10/29 职场文书