移动端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的更多相关文章

  1. 移动端调试神器vconsole,手机端网页的调试工具Eruda

    移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试 移动端调试工具vconsole安装Git地址:https://github.com/WechatFE ...

  2. 移动端调试神器vConsole

    vConsole.js 其实就是重写console方法,实现了类似于微信小程序的移动端调试效果 在普通html文件里使用 <script src="https://cdn.bootcs ...

  3. Eruda 一个被人遗忘的移动端调试神器

    引言 ​ 日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于fiddler.Charles.chrome devtools.Firebug ...

  4. 移动端调试神器-vConsole

    什么是vConsole?   官方说明是一个web前端开发者面板,可用于展示console日志,方便日常开发,调试. 简单来说相当于移动版的Chrome调试控制台,就是我们在PC端常用的F12 vCo ...

  5. 移动端调试神器(eruda)

    在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,只有在chrome调试完成,没有问题了才会上到真机测试,移动端开发的一大问题就在于此, 各种品牌各种型号手机,手机中各种 ...

  6. 两大js移动端调试神器 / 调试工具分享 !

    分享大家一个CDN网站:https://www.bootcdn.cn/ eruda 移动端网页调试工具的使用: <script src="https://cdn.bootcdn.net ...

  7. 移动端调试利器-vConsole

    现在移动端开发越来越火,随之而来的问题也越来越多,今天给大家介绍一款移动端调试神器,vconsole. 一.先引用文件,可以从https://www.bootcdn.cn/vConsole/下载,也可 ...

  8. 移动端真机debug调试神器 vConsole学习(一)之基础

    参考 使用方法 移动端真机debug调试神器 vConsole的引入说明(原生态与WebPack) 移动端使用vconsole调试console vConsole ——开源的前端 console 调试 ...

  9. Eruda 一个被人遗忘的调试神器

    Eruda 一个被人遗忘的调试神器 引言   日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于 fiddler.Charles.chro ...

随机推荐

  1. web优化及web安全攻防学习总结

    web优化 前端:(高性能网站建设进阶指南) 使用gzip压缩(节省服务器的 网络带宽) 减少http请求( 减少DNS请求所耗费的时间. 减少服务器压力. 减少http请求头) 使用cdn(用户可以 ...

  2. (完美)华为Mate8 NXT-TL00的USB调试模式在哪里开启的经验

    每当我们使用pc通过数据线连接上安卓手机的时候,如果手机没有开启usb调试模式,pc则没法成功检测到我们的手机,在一些情况下,我们使用的一些功能比较强的的软件如以前我们使用的一个软件引号精灵,老版本就 ...

  3. 用Python实现支持向量机并处理Iris数据集

    SVM全称是Support Vector Machine,即支持向量机,是一种监督式学习算法.它主要应用于分类问题,通过改进代码也可以用作回归.所谓支持向量就是距离分隔面最近的向量.支持向量机就是要确 ...

  4. LeetCode--026--删除排序数组中的重复项(java)

    给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. 示例 1 ...

  5. java.lang.ClassNotFoundException: org.apache.log4j.Logger 异常

    Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'd ...

  6. Activiti流程变量五步曲 ——by fightingKing

    http://blog.csdn.net/zwk626542417/article/details/46648139 一.前言 上一篇文章我们将流程实例的启动与查询,任务的办理查询都进行了介绍,我们这 ...

  7. count性能

    表有主键列,count(1)的效率会稍微高于count(*),count(主键列)效率会高于count(1).表没有主键列,count(1)效率会高于count(*) count(1).count(* ...

  8. MySQL数据库(2)

    上一篇我们讲述过MySQL创建数据库,数据表的内容,其中涉及到了几个约束: NOT NULL   非空约束 PRIMARY KEY   主键约束 UNIQUE KEY    唯一约束 其实还有两个约束 ...

  9. 在idea中使用plantUML画类图

    1.下载插件,搜uml找找就有了,安装重启idea. 2.会提示你找不到graphviz,下载msi安装. 3.提示not executable,需要配置环境变量,不是配置path,配置GRAPHVI ...

  10. hadoop HA学习

    一 HDFS HA架构图 二 HDFS HA组件 Active NameNode和Standby NameNode 在NameNode的HA方案中有两个不同状态的NameNode,分别为活跃态(Act ...