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. 怎么使用zepto.js的tap事件引起的探索

    前言:   在使用zepto.js之前,你首先要知道它是什么?为什么要使用它?以及它和jquery有什么区别? ①:简单来说zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与j ...

  2. [Swift]LeetCode636. 函数的独占时间 | Exclusive Time of Functions

    Given the running logs of n functions that are executed in a nonpreemptive single threaded CPU, find ...

  3. [Swift]LeetCode841. 钥匙和房间 | Keys and Rooms

    There are N rooms and you start in room 0.  Each room has a distinct number in 0, 1, 2, ..., N-1, an ...

  4. shell 删除重复文件脚本

    摘自 <Linux Shell脚本攻略>一书,例子在109页,原理在110页,原理讲解的很好哦! 需要了解awk命令.xargs,脚本中所用的命令在Linux Shell脚本攻略一书中都有 ...

  5. 12.Git分支-推送(push)、跟踪分支、拉取(pull)、删除远程分支

    1.推送 本地的分支并不会自动与远程仓库同步,你可以显示的向远程仓库推送你的分支.例如你在本地创建了一个dev分支,你想其他的人和你一样在dev之下进行工作,可以使用 git push <rem ...

  6. Spring中你可能不知道的事(二)

    在上一节中,我介绍了Spring中极为重要的BeanPostProcessor BeanFactoryPostProcessor Import ImportSelector,还介绍了一些其他的零碎知识 ...

  7. 【Docker】(3)---linux部署Docker、Docker常用命令

    linux部署Docker.Docker常用命令 本次部署Linux版本:CentOS 7.4 64位. 说明: 因为Docker是基于Linux 64bit的 所以Docker要求64位的系统且内核 ...

  8. 再见了Server对象,拥抱IHostingEnvironment服务对象(.net core)

    一.绝对路径 1.获取应用程序运行当前目录Directory.GetCurrentDirectory(). System.IO命名空间中存在Directory类,提供了获取应用程序运行当前目录的静态方 ...

  9. .NET Core中的路由约束

    背景介绍 上周给大家分享了Nancy in .NET Core学习笔记 - 路由之后, 就一直在考虑.NET Core能否实现和Nancy中一样的路由约束, 最近查阅了一下MSDN及一些国外博客, 发 ...

  10. Android--Tween补间动画

    前言 Android除了支持逐帧动画之外,也提供了对补间动画的支持,补间动画就是指开发人员只需要指定动画的开始.动画结束的"关键帧",而动画变化的"中间帧"由系 ...