工具诞生背景
前端项目开发是脱离sassweb的,本地开发阶段
- 无法获取sassweb下发的信息
- 无法验证在sassweb下的样式问题
- 无法获取线上环境的token
- 无法验证子应用在sassweb下的兼容问题
- .......
这些潜在问题,只能在子应用部署后被发现,费事费力,极其浪费时间!
为了解决上述问题,saasweb-devtool应用而生!它基于qinkun原理和saasweb源代码
能够将本地前端服务,无缝嵌套在任意生产环境的saasweb下,供我们调试使用!
功能演示
本地服务嵌套在银泰环境下进行调试:
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/acd3c4cc1e794fc09f29282deed017c7%7Etplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1862&h=955&s=1182457&e=gif&f=114&b=018ffc)
本地服务嵌套在印力测试环境下进行调试:
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/321aaeeb5c5149f1ac79577f078e9ca8%7Etplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1854&h=957&s=321221&e=gif&f=65&b=018ffc)
如图,我们也能发现本地引用部署后,在sassweb的影响下,样式会出现问题。借助这个工具,我们就提前知道了问题所在,提前解决!
安装
首先,浏览器需要安装Tampermonkey浏览器插件![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/76e63860791c4668bd95fa536c1a1ce4%7Etplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=834&h=68&s=11067&e=png&b=046b00)
科学上网后,在谷歌浏览器应用商店可以直接安装此插件。笔者使用的版本是: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
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dda8b581fd914e5e90ed714266c851ed%7Etplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1650&h=868&s=1193497&e=gif&f=54&b=ebdad1)
运行本地项目
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d9cc96bc3cf24ea6962e2a673ab83d73%7Etplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1896&h=728&s=171111&e=png&b=202235)
打开saasweb-devtool插件,并刷新页面,等待工具按钮出现
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc043c04ae2f4983bc458db78d543207%7Etplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=195&h=51&s=3041&e=png&b=fefefe)
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/680f80d0906e46b982842db8854447ac%7Etplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1825&h=914&s=438107&e=gif&f=129&b=fcf7f7)
打开设置面板,启用saaweb调试
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae7210d1f3e04595a295fd74edd6b049%7Etplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=334&h=104&s=5858&e=png&b=ffffff)
填入域名,保存配置即可
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cae23f4e41434892a6b841db43383f97%7Etplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=879&h=461&s=38634&e=png&b=ffffff)
现在,在生产环境就嵌入你的本地代码了
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc728f35f6164076a16554f809340959%7Etplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1794&h=850&s=919082&e=gif&f=144&b=fbf5f5)
接下来,就可以尽情调试了!
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32d7d2b427c146c3b4a222404d6d4c39%7Etplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1803&h=894&s=356187&e=gif&f=64&b=202235)
提示:
本地的代码可以consloe甚至断点,设置完毕后,打开生产地址的控制台,刷新后就可以看到效果!
配置说明
以下都是可选配置项
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f04891f58144f9983886896f711f3ba%7Etplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=326&h=412&s=22512&e=png&b=f3f5f8)
兼容性说明及配置
本工具为未解决的技术点:
1、在qiankun的嵌套模式下,线上环境的本地应用不能支持热更新(iframe可以)
2、在https的页面下,本应用可能会无法使用,暂未解决。
3、对于标准产品较高版本如5.5以上,可能会存在未解决的兼容性问题
浏览器兼容性配置
如果浏览器出现跨域问题:
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5b50c4ce073428685cfed96d4d89b51%7Etplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1796&h=290&s=38614&e=png&b=fff2f2)
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a510a07e3c3242058a8fa6953ee183a8%7Etplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1406&h=87&s=19306&e=png&b=fff1f1)
打开如下地址:chrome://flags/#block-insecure-private-network-requests
设置规则为 Disabled的即可
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e39c9684967e4433b0183016e34f1b34%7Etplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1547&h=271&s=47069&e=png&b=fff5f4)
webpack或vite兼容性配置
如果使用插件后,webpack一直报host的错误问题,开启如下规则即可
// 配置跨域
devServer: {
+ disableHostCheck: true,
proxy: {
// .....
}
},