简介

工具

  1. whistle文档
  2. SwitchyOmega 插件 （ 谷歌 ） （ Edge ）

功能介绍

  • 【whistle】：基于Node实现的跨平台web调试 代理工具、抓包工具，类似的工具有Windows平台上的Fiddler
    1. 支持作为 HTTP、HTTPS、SOCKS 代理及反向代理
    2. 支持抓包及修改 HTTP、HTTPS、HTTP2、WebSocket、TCP 请求
    3. 支持重放及构造 HTTP、HTTPS、HTTP2、WebSocket、TCP 请求（发送一个目的主机已接收过的包）
    4. 支持设置上游代理、PAC 脚本、Hosts、延迟（限速）请求响应等
    5. 支持查看远程页面的 console 日志及 DOM 节点
    6. 支持用 Node 开发插件扩展功能，也可以作为独立 npm 包引用
  • 【SwitchyOmega】：用于进行 代理配置 （将请求通过指定代理服务器进行发送）

使用场景

在此主要用于 跨域web调试

  1. 在本地开发中，需要用测试环境或正式环境域名访问本地项目而不是使用ip端口方式访问，可以通过 whistle 进行代理，配置规则后通过域名访问本地项目，从而实现可以跨域使用http请求测试环境或正式环境域名下接口
  2. 访问测试环境或正式环境项目，通过 whistle 进行代理，配置相关规则可以将正式环境请求的文件或接口换成本地开发接口和文件，进行在线调试

配置方式

  1. 安装 whistle
    npm i whistle -g
  2. 安装 SwitchyOmega 插件
  3. 启动 whistle
    w2 start
  4. SwitchyOmega 代理配置

基础用法

whistle 规则定义

  • 定义规则

替换为本地文件

正式环境代码的部分请求，修改为本地文件，进行在线调试查找问题和修改

[请求的地址] 空格 [本地文件地址]

1
https://www.baidu.com/index.js http://127.0.0.1:5500/index.js

域名访问本地项目

  • 通过域名访问本地项目
    1. 解决有域名限制的项目
    2. 实现跨域情况下访问域名下接口

[请求的地址] 空格 [本地服务地址]

1
https://www.baidu.com/  http://127.0.0.1:5500/index.html

响应内容后注入

  1. html
  2. css
  3. js

[域名] 空格 [文件类型]://[文件地址]

1
2
3
4
5
6
7
8
// 注入 windows 桌面上的 index.css 文件
https://www.baidu.com  css://C:/Users/SuperMan/Desktop/index.css

// 注入 windows 桌面上的 index.js 文件
https://www.baidu.com  js://C:/Users/SuperMan/Desktop/index.js

// 注入 windows 桌面上的 index.js 文件（html中元素插入到此域名下访问的html页面中最后）
https://www.baidu.com  html://C:/Users/SuperMan/Desktop/test.html

响应内容前添加脚本

在请求 html、js 文件时，获取响应之前，添加js脚本（执行html或js之前，往文件里面添加脚本）
多个 js 脚本，将按照规则顺序，合并成一个脚本，以 script 标签方式添加到 html 响应之前，或者 js 文件的响应之前

  1. 定义脚本
    • 将代码复制到 values 选项中
    • 或者点击 files 上传代码
  2. 添加规则，执行代码
    • [域名] 空格 jsPrepend://[上传文件的路径]
    • [域名] 空格 jsPrepend://{[value添加的选项]}

定义脚本

上传脚本

添加规则，执行脚本

1
2
3
4
5
// 注入并执行 vconsole 脚本
https://www.baidu.com jsPrepend:///$whistle/vconsole.min.js

// 注入并执行自定义生成 vconsole 实例的脚本
https://www.baidu.com jsPrepend://{daima}

展示控制台信息

  1. 把远程页面的 console 打印的信息展示出来，方便调试移动端页面
  2. 在 Network -> Tools -> Console 进行展示

[域名] 空格 log://

1
https://www.baidu.com log://

取消跨域

不需要将本地项目通过域名访问方式解决跨域测试接口，可以直接设置访问域名取消跨域

[域名] 空格 resCors://*

1
https://www.baidu.com resCors://*