利用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 高效运行代码分析
Mar 18 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
深入理解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
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
jQuery 使用个人心得
2009/02/26 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
详解vue axios中文文档
2017/09/12 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
Python遍历numpy数组的实例
2018/04/04 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
Python3监控疫情的完整代码
2020/02/20 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
优秀中学生事迹材料
2014/01/31 职场文书
小学生检讨书大全
2014/02/06 职场文书
纠纷协议书
2014/04/16 职场文书
物流管理专业自荐信
2014/06/23 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
美容院员工规章制度
2015/08/05 职场文书
文艺委员竞选稿
2015/11/19 职场文书
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS