移动端调试神器 whistle
移动端h5页面嵌入的方式多种多样,普通的chrome真机调试功能有时就不能满足要求了。
whistle通过设置wifi服务器代理的方式,可以抓包调试所有移动端请求的页面。
whistle的github地址:https://github.com/avwo/whistle/blob/master/README-zh_CN.md。
总的来说,分成3步:
1. 启动代理服务器。
依托node,全局安装whistle,通过 whistle start 命令启动。
2. 浏览器设置代理服务器,用于显示抓包调试内容。
目前仅限chrome浏览器。推荐使用switchOmega插件。主要需要配置ip地址和端口号。
3. 手机wifi设置代理服务器。
下面来说说代理服务器:
代理服务器相当于一个中转站。假设坐在家中的小张,突然想喝甜品店的紫薯麦麦拿铁,
不用代理时,小张直接打电话给甜品店:“歪~来杯热的紫薯麦麦拿铁~”;
设置代理时,小张需要给中转站打电话:“我想要甜品店的紫薯麦麦拿铁”,中转站给甜品店打电话:“要一杯热的紫薯麦麦拿铁”,拿到后再给小张。
whitle功能很强大,
可以调出控制台,显示打印信息;
查看并调整dom结构;
查看css样式。
更多功能及详细用法,可以参考文档:http://wproxy.org/whistle/
移动端调试神器 whistle的更多相关文章
- 移动端调试神器vconsole,手机端网页的调试工具Eruda
移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试 移动端调试工具vconsole安装Git地址:https://github.com/WechatFE ...
- 移动端调试神器vConsole
vConsole.js 其实就是重写console方法,实现了类似于微信小程序的移动端调试效果 在普通html文件里使用 <script src="https://cdn.bootcs ...
- Eruda 一个被人遗忘的移动端调试神器
引言 日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于fiddler.Charles.chrome devtools.Firebug ...
- 移动端调试神器-vConsole
什么是vConsole? 官方说明是一个web前端开发者面板,可用于展示console日志,方便日常开发,调试. 简单来说相当于移动版的Chrome调试控制台,就是我们在PC端常用的F12 vCo ...
- 移动端调试神器(eruda)
在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,只有在chrome调试完成,没有问题了才会上到真机测试,移动端开发的一大问题就在于此, 各种品牌各种型号手机,手机中各种 ...
- 两大js移动端调试神器 / 调试工具分享 !
分享大家一个CDN网站:https://www.bootcdn.cn/ eruda 移动端网页调试工具的使用: <script src="https://cdn.bootcdn.net ...
- 移动端调试利器-vConsole
现在移动端开发越来越火,随之而来的问题也越来越多,今天给大家介绍一款移动端调试神器,vconsole. 一.先引用文件,可以从https://www.bootcdn.cn/vConsole/下载,也可 ...
- 移动端真机debug调试神器 vConsole学习(一)之基础
参考 使用方法 移动端真机debug调试神器 vConsole的引入说明(原生态与WebPack) 移动端使用vconsole调试console vConsole ——开源的前端 console 调试 ...
- Eruda 一个被人遗忘的调试神器
Eruda 一个被人遗忘的调试神器 引言 日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于 fiddler.Charles.chro ...
随机推荐
- 【NET Core】Nuget包发布流程
1.新建一个.NET Core类库 2.新增一个方法,并编译项目 3.下载Nuget.exe,与刚才新建的类库放在同一目录下 下载地址:https://www.nuget.org/downloads ...
- RabbitMQ跟Redis做消息队列的区别
区别 https://www.zhihu.com/question/20795043 https://blog.csdn.net/dd18709200301/article/details/79077 ...
- git pull 撤销误操作
本来想把github上的release合并到本地的release分支上,由于没有查看当前分支,直接运用git pull origin v2.8.1,结果将release合并到了v2.8.1分支中. 解 ...
- react state成员
组件中包括state,props与render成员函数. react中,主要通过定义state,根据不同state渲染对应用户界面. 过程调用了成员函数setState(data,callback). ...
- introduce explaining variable 引入解释变量
一段复杂的计算的表达式(一般 逻辑判断 if(a!=1 && b!=Null && a>b ) && .... 直接在代码中参与到 代码的逻辑 ...
- Oracle中用户的创建和权限设置
权限: CREATE SESSION --允许用户登录数据库权限 CREATE TABLE --允许用户创建表权限 UNLIMITED TABLESPACE --允许用户在其他表空间随意建表 角色: ...
- springboot junit
1 添加pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...
- Confluence 6 从 WIKI 标记整合到基于 XHTML 的存储格式
如果你现在正在将 Confluence 从一个老的版本升级到 Confluence 4.0 或者更新的版本 (例如从 Confluence 3.5.x 或者更老的版本),在升级的过程中一个内容整合过程 ...
- 爬坑!OpenCV打开双目摄像头
1.首先找到双目摄像头的VideoCapture的设备号,记住定义时要采用降序的方法定义:cv::VideoCapture Rcap(1); cv::VideoCapture Lcap(0); 2.分 ...
- 采用梯度下降优化器(Gradient Descent optimizer)结合禁忌搜索(Tabu Search)求解矩阵的全部特征值和特征向量
[前言] 对于矩阵(Matrix)的特征值(Eigens)求解,采用数值分析(Number Analysis)的方法有一些,我熟知的是针对实对称矩阵(Real Symmetric Matrix)的特征 ...