whistle介绍

whistle是基于Node的跨平台web调试代理工具, 主要查看, 修改HTTP, HTTPS, Websocket的请求,响应, 也可以作为HTTP代理服务器使用

Chrome DevTools

Chrome开发者工具也能实现简单的资源替换, 但是功能没有whistle强大, 也有很多局限性

  1. 开发者工具打开资源面板(Sources)
  2. 选中Overrides选项卡, 单机下面的Select folder for overrides将保存修改资源的路径
  3. 打开网络面板(NetWork), 右键某一个资源, 点击Save For Overrides菜单, 点击就能修改保存代码, 按一下F5会发现刚才修改的还在

whistle安装和配置

  1. cnpm install -g whistle
  2. w2 run 运行后, 浏览器打开http://127.0.0.1:8899 进入UI界面
  3. 找到https按钮, 点击弹出对话框中勾选, 捕获https请求, 然后点击证书下载
  • 在windows中, 双击证书文件, 点击安装证书, 选择存储位置为本地计算机, 选择将所有证书都放入下列存储, 点击浏览, 选择受信任的根证书颁发机构,确定
  1. 配置系统代理
  • 在windows10中, 打开系统代理设置, 手动设置代理, 使用代理服务器开, 地址为127.0.0.1 或者 192.168.0.102你本机(whistle服务所在)的内网IP, 端口默认8899, 也可以在ws命令启动时指定参数设置
  1. 浏览器打开http:127.0.0.1:8899 进入UI界面, 点击Create创建一个规则, 在右侧面板中输入https://xx.com/js/index.js file:///mnt/c:/Users/xueyo/Downloads/test.js 就能替换资源了

whistle的更多相关文章

  1. 跨平台web调试代理工具---whistle

    whistle是基于Node实现的跨平台web调试代理工具,支持windows.mac.linux等所有安装了Node的操作系统,可以部署在本地机器.虚拟机或远程服务器,并通过本地网页查看或修改HTT ...

  2. 实用抓包工具：whistle

    无论是前端开发还是客户端,实际开发过程中,抓包都经常被用到.工欲善其事必先利其器,一款好用的抓包工具也是必须的. 说到抓包,Windows系统上不少人都用过Fiddler,Mac或Linux上用Cha ...

  3. 使用whistle模拟cgi接口异常：错误码、502、慢网速、超时

    绝大多数程序只考虑了接口正常工作的场景,而用户在使用我们的产品时遇到的各类异常,全都丢在看似 ok 的 try catch 中.如果没有做好异常的兼容和兜底处理,会极大的影响用户体验,严重的还会带来安 ...

  4. 使用 whistle 替代本地 nginx/webpack 服务

    加入鹅厂之后,我发现团队都在用一款叫做 Whistle 的工具,起初我以为这只是一款类似 Fiddler/Charles 的普通货色.然鹅,发现下面这两种用法之后,我把自己的膝盖摘下来献给了制作这款工 ...

  5. 移动端调试神器 whistle

    移动端h5页面嵌入的方式多种多样,普通的chrome真机调试功能有时就不能满足要求了. whistle通过设置wifi服务器代理的方式,可以抓包调试所有移动端请求的页面. whistle的github ...

  6. 前端代理----whistle

    场景一:如何将本地的请求代理到服务器上(如果接口没有校验登陆的情况) 最简单的方法:在项目文件中找到webpack开发环境的配置文件,配置devServer对象 devServer: { conten ...

  7. whistle工具全程入门

    接触过前后端开发的同学应该都了解网络请求代理工具fiddler(mac下面常用的是Charles),可以用来拦截分析请求.包装请求.本地调试和移动端代理开发调试等.多多少少,fiddler和Charl ...

  8. whistle.js连接ios手机中https步骤

    1:对于安卓直接扫码安装https的证书: 对于ios  连接电脑发出的wifi,打开whistle,配置代理之后(一定要保证先链接电脑发出的wifi,且配置代理) 用Safari打开网址:http: ...

  9. whistle替代Fiddler调试远程服务器代码使用教程

    前沿 之前在window下开发的同学大部分都是使用Fiddler代理工具做远程调试,自从换了Mac后也想找个代替工具调试,查询了下大概都比较推荐两款:Charles 和 Whistle .不过Char ...

随机推荐

  1. [Java]LeetCode117. 填充同一层的兄弟节点 II | Populating Next Right Pointers in Each Node II

    Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *nex ...

  2. [Swift]LeetCode250.计数相同值子树的个数 $ Count Univalue Subtrees

    Given a binary tree, count the number of uni-value subtrees. A Uni-value subtree means all nodes of ...

  3. [Swift]LeetCode367. 有效的完全平方数 | Valid Perfect Square

    Given a positive integer num, write a function which returns True if num is a perfect square else Fa ...

  4. 002-J2EE-tomcat的配置

    在配置之前我们要先下载一个Tomcat,登入以下网址... 下载解压完了之后可以把里面多余的东西删掉,当然也可以选择不删. 还有这里的也是 如果已经有了 classes 和l ib 目录了, 就不用再 ...

  5. [Abp 源码分析]十一、权限验证

    0.简介 Abp 本身集成了一套权限验证体系,通过 ASP.NET Core 的过滤器与 Castle 的拦截器进行拦截请求,并进行权限验证.在 Abp 框架内部,权限分为两块,一个是功能(Featu ...

  6. [Abp 源码分析]十四、DTO 自动验证

    0.简介 在平时开发 API 接口的时候需要对前端传入的参数进行校验之后才能进入业务逻辑进行处理,否则一旦前端传入一些非法/无效数据到 API 当中,轻则导致程序报错,重则导致整个业务流程出现问题. ...

  7. android 缩放平移自定义View 显示图片

    1.背景 现在app中,图片预览功能肯定是少不了的,用户基本已经形成条件反射,看到小图,点击看大图,看到大图两个手指开始进行放大,放大后,开始移动到指定部位~~~ 我相信看图的整个步骤,大家或者说用户 ...

  8. Python内置函数(24)——frozenset

    英文文档: class frozenset([iterable]) Return a new frozenset object, optionally with elements taken from ...

  9. 7.Django CSRF 中间件

    CSRF 1.概述 CSRF(Cross Site Request Forgery)跨站点伪造请求,举例来讲,某个恶意的网站上有一个指向你的网站的链接,如果某个用户已经登录到你的网站上了,那么当这个用 ...

  10. 【Android】打开本地的html文件

    网上好多说法 但实际上说到点上的没有 不想写太长 直接进入正题 Intent intent = new Intent(Intent.ACTION_VIEW); intent.addCategory(I ...