利用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 相关文章推荐
js 图片等比例缩放代码
May 13 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 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
服务器web工具 php环境下
2010/12/29 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
解读ES6中class关键字
2017/11/20 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
python2.7实现爬虫网页数据
2018/05/25 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
使用python模拟高斯分布例子
2019/12/09 Python
python 进程池pool使用详解
2020/10/15 Python
单位在职证明范本
2014/01/09 职场文书
四查四看剖析材料
2014/02/14 职场文书
省文明单位申报材料
2014/05/08 职场文书
预备党员转正考核材料
2014/06/03 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
自我检讨报告
2015/01/28 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
上甘岭观后感
2015/06/10 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
vue实力踩坑之push当前页无效
2022/04/10 Vue.js