线上更换代码指南(生产环境调试)

背景

公司线上的项目. 需要更改水印参数(颜色, 透明度等). 每次都是发布修改尝试,耗时费力. 探讨了一番就有了以下操作.

实现步骤

以下文字图片可以结合一起观看

1. 打开控制台( f12 / 右键=> 选择检查 )
2. 切换到 sources tab
3. 控制台左上角找到 overrides 并点击
4. 点击 select folder for overrides
5. 在桌面新建一个文件夹, 选择该文件夹(最好以英文命名)
6. ctrl + p 打开搜索文件, 输入 watermarker, 找到 watermarker.umd.js 不要打开 watermarker.umd.min.js 文件
7. ctrl + f 执行搜索内容, 找到 getColor 方法 (代码如下)

8.   var actualWidth = window.devicePixelRatio * window.screen.width;
       /*
        * 1920 * 1080  ==> a 为 0.12
        * 按照这个比例去设置透明度
        */
     ​
       if (isApp) {
         return 'rgba(0,0,0,0.1)';
       } // 1920 1k 屏幕下, 展示的文字透明度作为基础
     ​
     ​
       var baseConfig = {
         opacity: 0.12,
         clientWidth: 1920
       };
       // 修改这里,例如:  return 'red';
       // console.log(actualWidth) // 打印桌面实际宽度
       // console.log(window.devicePixelRatio) // 打印设备像素比
       return "rgba(0,0,0,".concat(baseConfig.opacity / (actualWidth / baseConfig.clientWidth), ")");
   

接口数据更换指南

1. 右键接口名称, 选择Override Content

2. 选择文件夹 Select folder

3. 同意修改

4. 勾选, 然后修改返回内容

5. 保存(ctrl+s), 刷新即可