Greasy Fork

Greasy Fork is available in English.

saasweb拦截调试工具-saasweb-devtool

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

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

作者
shixiaoshi
日安装量
0
总安装量
44
评分
0 0 0
版本
1.1.4
创建于
2022-11-30
更新于
2023-11-22
大小
250.0 KB
许可证
MIT
适用于
所有网站

工具诞生背景

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

  • 无法获取sassweb下发的信息
  • 无法验证在sassweb下的样式问题
  • 无法获取线上环境的token
  • 无法验证子应用在sassweb下的兼容问题
  • .......

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

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

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

功能演示

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

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

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

安装

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

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

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

http://greasyfork.icu/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: {
       // .....
    }
  },