哈尔滨网站建设公司,简单的wordpress模板下载,网页设计与制作课程评价内实,网站建设拟解决问题在进行前端开发过程中#xff0c;我们常常需要对一些接口进行处理#xff0c;以及当后端接口没有弄好需要我们mock一些假数据#xff0c;针对这些场景#xff0c;我们就可以使用whistle 来解决。首先#xff0c;我们要知道能满足我们需求的工具有很多#xff0c;例如我们常常需要对一些接口进行处理以及当后端接口没有弄好需要我们mock一些假数据针对这些场景我们就可以使用whistle 来解决。首先我们要知道能满足我们需求的工具有很多例如charles、fiddler等。但是这些工具有个非常不友好的点那就是它们需要付费使用当然我们一般都是通过一些方法来免费使用的。这里就不说了。安装whistle首先我们要确保我们有安装node。node -v出现以下内容就说明我们本地有安装node。反之我们就需要对node进行安装1. Windows或Mac系统访问https://nodejs.org/安装LTS版本的Node默认安装即可。2. Linux下推荐使用源码安装: 从Node官网下载最新版的Source Code(或者用wget命令下载)解压文件(tar -xzvf node-vx.y.z.tar.gz)后进入解压后的根目录(node-vx.y.z)依次执行./configure、./make和./make install。tips(Windows系统可能需要重新打开cmd)使用包管理器安装我们这里以npm为例当然如果有安装yarn、pnpm等的话可以使用其他的包管理器进行安装。npm install -g whistle当我们使用 w2 help能有正常的信息展示就说明了whistle安装成功了。whistle命令启动whistle:$ w2 startTips: 如果要防止其他人访问可以在启动时加上登录用户名和密码 -n name -w password。重启whsitle:$ w2 restart停止whistle:$ w2 stop修改 whistle 监听的端口默认为 8899w2 start -p port开启全局代理 (适用于无法安装Proxy SwitchyOmega等浏览器插件的朋友)w2 proxy关闭全局代理w2 proxy off配置whistle工作环境浏览器插件安装Proxy SwitchyOmegaTips 若无法打开「chrome 应用商店」的朋友可以使用上面的全局代理的方式进行启动whistle。对插件进行配置安装根证书捕获HTTPS请求正常启动后使用本地端口打开即可这里以mac为例找到证书下载地方点击进行安装。打开证书管理界面找到带有 whistle 的字样的证书并对其进行「始终信任」简单配置规则进行实践设置响应头临时允许跨域用于解决后端暂未配置cors的时候临时调试# 自动添加cors头 可以在服务器没有配置cors的时候进行临时调试
https://www.baidu.com/ resCors://{resCors.json}对js增加一些调试信息(推荐使用VConsole对H5、小程序以及移动端进行调试)# 对一些页面预追加VConsole便于移动端进行调试。
https://www.baidu.com/ jsPrepend://{log.js}# https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.0/vconsole.min.js 将这个js保存然后# 初始化VConsole
new VConsole();手机端等的环境进行调试可能就需要安装证书了。我们点击右上角的online 查看本地的IPv4然后找到和当前电脑处于同一个局域网Wi-Fi的手机对wifi进行配置代理方式手动 代理服务地址10.*.*.*上述代理的IPv4代理端口8899重要重要重要此处代理的是whistle的启动端口然后手机访问 rootca.pro 下载证书进行安装ios 下设置 通用 证书信任设置打开刚刚安装的证书的开关安卓 设置 搜索证书 从存储设备安装证书 〉进行安装即可mock响应json数据# mock测试需要的一些接口实际还未好但是开发确需要的假数据
https://www.baidu.com/api resBody://{res.json}线上js资源使用本地js进行替换# a.js b.js 其中b.js 可以是 http://localhost:4001/output/module/* 等形式
/passport.baidu.com/passApi/js/ {log.js}当然whistle还有很多调试的用法这里就不一一列举了。
