saasweb拦截调试工具-saasweb-devtool

shixiaoshi
2022-11-30T02:55:19Z

vue项目多路由切换；路径智能补全；saasweb生产界面调试本地服务。

工具诞生背景

前端项目开发是脱离sassweb的，本地开发阶段

无法获取sassweb下发的信息

无法验证在sassweb下的样式问题

无法获取线上环境的token

无法验证子应用在sassweb下的兼容问题

.......

这些潜在问题，只能在子应用部署后被发现，费事费力，极其浪费时间！

为了解决上述问题，saasweb-devtool应用而生！它基于qinkun原理和saasweb源代码

能够将本地前端服务，无缝嵌套在任意生产环境的saasweb下，供我们调试使用！

功能演示

本地服务嵌套在银泰环境下进行调试：

本地服务嵌套在印力测试环境下进行调试：

如图，我们也能发现本地引用部署后，在sassweb的影响下，样式会出现问题。借助这个工具，我们就提前知道了问题所在，提前解决！

安装

首先，浏览器需要安装Tampermonkey浏览器插件

科学上网后，在谷歌浏览器应用商店可以直接安装此插件。笔者使用的版本是：4.13.6137

然后，进入网页直接安装即可

https://greasyfork.org/zh-CN/scripts/455638-saasweb%E6%8B%A6%E6%88%AA%E8%B0%83%E8%AF%95%E5%B7%A5%E5%85%B7-saasweb-devtool

使用说明

打开并登录目标saasweb地址

http://taiyun.yintaiblt.com:30000/saasweb/draw/home?pj=059014535DCFA3D41DAA03B7FA6B35C3

xuhaoxing / admin123

运行本地项目

打开saasweb-devtool插件，并刷新页面，等待工具按钮出现

打开设置面板，启用saaweb调试

填入域名，保存配置即可

现在，在生产环境就嵌入你的本地代码了

接下来，就可以尽情调试了！

提示：

本地的代码可以consloe甚至断点，设置完毕后，打开生产地址的控制台，刷新后就可以看到效果！

配置说明

以下都是可选配置项

兼容性说明及配置

本工具为未解决的技术点：

1、在qiankun的嵌套模式下，线上环境的本地应用不能支持热更新（iframe可以）

2、在https的页面下，本应用可能会无法使用，暂未解决。

3、对于标准产品较高版本如5.5以上，可能会存在未解决的兼容性问题

浏览器兼容性配置

如果浏览器出现跨域问题：

打开如下地址：chrome://flags/#block-insecure-private-network-requests

设置规则为 Disabled的即可

webpack或vite兼容性配置

如果使用插件后，webpack一直报host的错误问题，开启如下规则即可

// 配置跨域
  devServer: {
  + disableHostCheck: true,
    proxy: {
       // .....
    }
  },