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. [Swift]LeetCode11. 盛最多水的容器 | Container With Most Water

    Given n non-negative integers a1, a2, ..., an , where each represents a point at coordinate (i, ai). ...

  2. [Swift]LeetCode215. 数组中的第K个最大元素 | Kth Largest Element in an Array

    Find the kth largest element in an unsorted array. Note that it is the kth largest element in the so ...

  3. 【译】编写支持SSR的通用组件指南

    原文来自:https://blog.lichter.io/posts/the-guide-to-write-universal-ssr-ready-vue-compon?utm_campaign=Vu ...

  4. 【斐波那契数列】java探究

    题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). n<=39 解析 (1)递归方式 对于公式f(n) = f(n-1) + f(n ...

  5. [Leetcode]695. Max Area of Island

    Given a non-empty 2D array grid of 0's and 1's, an island is a group of 1's (representing land) conn ...

  6. SpringBoot+gradle项目构建war

    前言 一开始觉得这并不是什么很难的事情,但是踩坑了之后才发现... 步骤 1.在build.gradle配置文件中加入apply plugin: 'war' 很多人以为这样就完事了,我一开始也是这样认 ...

  7. 精读《react-easy-state 源码》

    1. 引言 react-easy-state 是个比较有趣的库,利用 Proxy 创建了一个非常易用的全局数据流管理方式. import React from "react"; i ...

  8. 环境与工具2：建立高效的mac环境

    你的工作与生活离不开电脑,电脑是一个工具,也是一个环境.环境是不是绿水青山,是不是得心应手,这是很重要的事情.小程平时使用macbook来学习跟娱乐,最近重装了系统,很多环境与工具都需要重新组建. 那 ...

  9. AJAX应用【股票案例、验证码校验】

    一.股票案例 我们要做的是股票的案例,它能够无刷新地更新股票的数据.当鼠标移动到具体的股票中,它会显示具体的信息. 我们首先来看一下要做出来的效果: 1.1服务器端分析 首先,从效果图我们可以看见很多 ...

  10. 应用AI芯片加速 Hadoop 3.0 纠删码的计算性能

    本文由云+社区发表 做为大数据生态系统中最重要的底层存储文件系统HDFS,为了保证系统的可靠性,HDFS通过多副本的冗余来防止数据的丢失.通常,HDFS中每一份数据都设置两个副本,这也使得存储利用率仅 ...