whistle
whistle介绍
whistle是基于Node的跨平台web调试代理工具, 主要查看, 修改HTTP, HTTPS, Websocket的请求,响应, 也可以作为HTTP代理服务器使用
Chrome DevTools
Chrome开发者工具也能实现简单的资源替换, 但是功能没有whistle强大, 也有很多局限性
- 开发者工具打开资源面板(
Sources) - 选中
Overrides选项卡, 单机下面的Select folder for overrides将保存修改资源的路径 - 打开网络面板(
NetWork), 右键某一个资源, 点击Save For Overrides菜单, 点击就能修改保存代码, 按一下F5会发现刚才修改的还在
whistle安装和配置
cnpm install -g whistlew2 run运行后, 浏览器打开http://127.0.0.1:8899进入UI界面- 找到
https按钮, 点击弹出对话框中勾选, 捕获https请求, 然后点击证书下载
- 在windows中, 双击证书文件, 点击安装证书, 选择存储位置为本地计算机, 选择将所有证书都放入下列存储, 点击浏览, 选择受信任的根证书颁发机构,确定
- 配置系统代理
- 在windows10中, 打开系统代理设置, 手动设置代理, 使用代理服务器开, 地址为127.0.0.1 或者 192.168.0.102你本机(whistle服务所在)的内网IP, 端口默认8899, 也可以在
ws命令启动时指定参数设置
- 浏览器打开
http:127.0.0.1:8899进入UI界面, 点击Create创建一个规则, 在右侧面板中输入https://xx.com/js/index.js file:///mnt/c:/Users/xueyo/Downloads/test.js就能替换资源了
whistle的更多相关文章
- 跨平台web调试代理工具---whistle
whistle是基于Node实现的跨平台web调试代理工具,支持windows.mac.linux等所有安装了Node的操作系统,可以部署在本地机器.虚拟机或远程服务器,并通过本地网页查看或修改HTT ...
- 实用抓包工具:whistle
无论是前端开发还是客户端,实际开发过程中,抓包都经常被用到.工欲善其事必先利其器,一款好用的抓包工具也是必须的. 说到抓包,Windows系统上不少人都用过Fiddler,Mac或Linux上用Cha ...
- 使用whistle模拟cgi接口异常:错误码、502、慢网速、超时
绝大多数程序只考虑了接口正常工作的场景,而用户在使用我们的产品时遇到的各类异常,全都丢在看似 ok 的 try catch 中.如果没有做好异常的兼容和兜底处理,会极大的影响用户体验,严重的还会带来安 ...
- 使用 whistle 替代本地 nginx/webpack 服务
加入鹅厂之后,我发现团队都在用一款叫做 Whistle 的工具,起初我以为这只是一款类似 Fiddler/Charles 的普通货色.然鹅,发现下面这两种用法之后,我把自己的膝盖摘下来献给了制作这款工 ...
- 移动端调试神器 whistle
移动端h5页面嵌入的方式多种多样,普通的chrome真机调试功能有时就不能满足要求了. whistle通过设置wifi服务器代理的方式,可以抓包调试所有移动端请求的页面. whistle的github ...
- 前端代理----whistle
场景一:如何将本地的请求代理到服务器上(如果接口没有校验登陆的情况) 最简单的方法:在项目文件中找到webpack开发环境的配置文件,配置devServer对象 devServer: { conten ...
- whistle工具全程入门
接触过前后端开发的同学应该都了解网络请求代理工具fiddler(mac下面常用的是Charles),可以用来拦截分析请求.包装请求.本地调试和移动端代理开发调试等.多多少少,fiddler和Charl ...
- whistle.js连接ios手机中https步骤
1:对于安卓直接扫码安装https的证书: 对于ios 连接电脑发出的wifi,打开whistle,配置代理之后(一定要保证先链接电脑发出的wifi,且配置代理) 用Safari打开网址:http: ...
- whistle替代Fiddler调试远程服务器代码使用教程
前沿 之前在window下开发的同学大部分都是使用Fiddler代理工具做远程调试,自从换了Mac后也想找个代替工具调试,查询了下大概都比较推荐两款:Charles 和 Whistle .不过Char ...
随机推荐
- [Swift]LeetCode99. 恢复二叉搜索树 | Recover Binary Search Tree
Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without changing ...
- [Swift]LeetCode832. 翻转图像 | Flipping an Image
Given a binary matrix A, we want to flip the image horizontally, then invert it, and return the resu ...
- Eclipse工具:常用快捷键记录
Eclipse快捷键: 按键操作 按键作用 输入sysout再按下Ctrl+Space System.out.println() Ctrl+1 当某行出错时时,跳出帮 ...
- 浮点型和BigDecimal的使用
//import java.math.*; package cn.xiaomu_01_rumrnjieduan; import java.math.BigDecimal; /** * 浮点型和BigD ...
- Json数组转换字符串、字符串转换原数组......
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Underscore.js 源码学习笔记(下)
上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...
- idea设置代码颜色主题(同Sublime Text 3的代码颜色一样)
1.下载主题的网址:http://color-themes.com,主题种类多,总有适合你的主题.在这个网址下载的主题是jar文件,直接导入,如下图file->import Setting,找 ...
- 【Spark篇】---Spark初始
一.前述 Spark是基于内存的计算框架,性能要优于Mapreduce,可以实现hadoop生态圈中的多个组件,是一个非常优秀的大数据框架,是Apache的顶级项目.One stack rule ...
- 使用docker-compose来部署开发环境
docker-compose的作用 docker-comopse可以帮助我们快速搭建起开发环境,比如你可以去把redis,mongodb,rabbitmq,mysql,eureka,configser ...
- 系列文章|OKR与敏捷(一):瀑布式目标与敏捷的冲突
OKR与敏捷开发的原理有着相似之处,但已经使用敏捷的团队再用OKR感觉会显得多余.这种误解的根源就在于对这两种模式不够了解,运用得当的情况下,OKR和敏捷可以形成强强联合的效果,他们可以创造出以价值为 ...