利用Vconsole和Fillder进行移动端抓包调试方法
在开发中,有时候我们需要在手机上进行测试,可是如果遇到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>
利用Fillder进行调试
打开Fiddler,然后点击菜单栏的Tools > Options,打开“Options”对话框
在打开的对话框中切换到“HTTPS”选项卡。
在打开的“HTTPS”选项卡中,勾选“Capture HTTPS CONNECTs”和“Decrypt HTTPS traffic”前面的复选框,然后点击“OK”。
Connection勾选允许远程连接
配置host文件:C:\Windows\System32\drivers\etc(该操作视情况而定)
重启fiddler
用一个wifi设置手机代理,服务器地址为自己电脑的IP,端口跟fiddler一致(默认8888)
用手机浏览器 打开IP:端口号,下载证书
安装完证书后,连接设置了代理的wifi
--------------可以happy的进行调试了-----------------------------
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
vue插件mescroll.js实现移动端上拉加载和下拉刷新
做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点 1.npm安装 npm install --save mescroll.js //不要使用cnpm安装 导入(在哪个页面使用,则在哪个页面导入(这里的话,我使用全局导入会出现问题,若有错,还请大家指出,暂时想到的就是局部引入)): import MescrollVue from 'mescroll.js/mescroll.vue' 注册组件: components: { Mes
-
原生js实现移动端Touch轮播图的方法步骤
Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构 结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. /* 清除标签默认边距 */ body,ul,li,ol,img { margin: 0; padding: 0; } /* 清除 ul 等标签前面的"小圆点"
-
如何封装了一个vue移动端下拉加载下一页数据的组件
前言 简单封装了一个vue下拉加载组件,分享一下,已放到github和前端资源库,欢迎下载! 组件代码 <template> <div class="my-scroll" :class="[scrollState?'prohibit':'allow']" ref="myScroll" @scroll.passive="onScroll($event)" @touchmove="onScroll($e
-
js实现移动端轮播图
本文实例为大家分享了js实现移动端轮播图的具体代码,供大家参考,具体内容如下 这是结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0&
-
移动端(微信等使用vConsole调试console的方法
前言 因为最近一直在弄移动端项目,由于在移动端无法打开控制台,所以想办法打印调试console的数据一直苦恼.之前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼容不好,所以最近使用了vConsole 进行调试 使用 废话不多说,说说怎么使用的吧. 首先去下载相关的代码,由于只需要在页面引入一个js文件,直接去下载就可以,地址: 请戳我 或者使用 npm 安装: npm install vconsole 使用webpack,然后js代码中 import VCo
-
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
本文实例讲述了jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法.分享给大家供大家参考,具体如下: 项目描述:九宫格的跑马灯抽奖特效,抽中奖品1-9的概率分别是2%,2%,4%,1%,12%,1%,8%,70%,概率总计100%,并且每天抽奖次数最多为3次. html部分的代码和css部分的代码和上一节<jQuery移动端跑马灯抽奖特效>一样,没有修改,js部分有修改,增加了概率. 原理很简单,同样是取随机数,判断这个随机数的大小在100的0-2,2-4,4-8,8-9,9-21,
-
使用vue开发移动端管理后台的注意事项
独立完成一个移动端项目(不是很明白为何会有这样的商品管理后台),还是有些经验不足,包括对产品的全局思考,对插件的选择等,都有考虑不周的缺点,导致自己中途想换图形界面插件,浪费了点时间,这里记录下,总结下经验,理一下思路. 1.对于项目的一些心得与体会 首先的一点,就是,对于图形界面框架的选型,这个很重要,对于一项目来说,开始动手前就要对项目的设计图有个完整的了解,以便于自己选择插件或者框架: 然后就是,对于交互性操作,比如:上传图片,预览图片啥的,应该选择是否是用图形界面框架来实现还是另选专门的
-
详解vue移动端项目代码拆分记录
撸一套vue多端共用,非常适合需要快速且全面上线的项目.但是多端共用一套vue代码,由于平台间的互相限制,每端在某些业务例如支付分享等是完全独立的代码,每个平台的支付方式也会有所差异,造成在这些业务的实现过程中会有太冗余的"if else"判断.所以为了提高代码的复用性.扩展性,可以将代码拆分,以-小程序和App两端举例,一份部署到小程序,一份部署到App(Android&Ios). 首先代码拆分应该保证本地开发的时候只有一套代码,提取所有公共页面,并且分别提取小程序和app的
-
jQuery实现适用于移动端的跑马灯抽奖特效示例
本文实例讲述了jQuery实现适用于移动端的跑马灯抽奖特效.分享给大家供大家参考,具体如下: 图片全部隐私处理 跑马灯抽奖特效难点一:奖品位置排放,如下图 <div class="gift_div"> <div class="gift gift1">奖品1</div> <div class="gift gift2">奖品2</div> <div class="gift g
-
移动端使用CSS或JS判断横屏和竖屏的讲解
在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 首先在head中加入如下代码: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 针对上述viewport标签有如下说明 1).content中的width
随机推荐
- 探索Python3.4中新引入的asyncio模块
- 数据结构之矩阵行列和相等的实例
- AngularJS解决ng-if中的ng-model值无效的问题
- JavaScript数据类型判定的总结笔记
- Java 可视化垃圾回收_动力节点Java学院整理
- JS实现按钮控制计时开始和停止功能
- js变形金刚文字特效代码分享
- 详解dll动态库的开发与调用及文件的读写小程序
- 基于HTML5 Ajax实现文件上传并显示进度条
- Android实现滑动选择控件实例代码
- SQL Server 2005 镜像构建手册(sql2005数据库同步镜像方案)
- 详解约瑟夫环问题及其相关的C语言算法实现
- vue项目中使用axios上传图片等文件操作
- 解析php5配置使用pdo
- ANDROID应用程序的混淆打包分享
- Java读取.properties配置文件方法示例
- python编辑用户登入界面的实现代码
- Springmvc应用Mongodb分页实现
- 对Python中画图时候的线类型详解
- 解决layui中onchange失效以及form动态渲染失效的问题