-
引入swiper出现not scoped to the top-level :root element 警告
问题项目中引入swiper运行后发现控制台出现很多类似于下面的警告 warning in ./node_modules/swiper/css/swiper.cssModule Warning (from ./node_modules/postcss-loader/src/index.js):Warning(429:3) Custom property ignored: not scoped to the top-level :root element (.swiper-lazy-prel...…
-
如何动态修改Lottie动画里的部分图片？
动效给的效果是一个头耳朵话筒胳膊都在动的摇摆效果，这个不能传视频，大体图片展示如下紧靠前端css实现这种动效比较难，因此决定采用Lottie实现。后面才了解到，产品希望小猴子的脸是孩子的头像图片，于是修改了Lottie的json文件，将动效里面的头像换成自己的，但是实现效果如下看了很多关于lottie的文章，查找每一个属性的作用，找到一个 tm(剪裁路径) 的属性，但是都仅仅是提到这个属性，具体怎么用完全不知道，看一下里面的json结构，想去实现剪裁效果简直一脸蒙。只能另辟蹊径，有什么办法...…
-
ARMS 接入、使用教程
ARMS 接入、使用教程首先ARMS前端接入，如以下步骤 首先RAM用户登录（登录地址：https://signin.aliyun.com/tal-weilaichanpin.onaliyun.com/login.htm?callback=https%3A%2F%2Fhomenew.console.aliyun.com%2F） 登录进去以后如下图操作： 首先选择、点击进去： 然后选择前端监控： 选择创建应用站点： 选择web、输入应用名称、...…
-
【rules-cli】check-code 代码质量规范
代码质量规范背景团队多人开发项目，每个人的保存风格不一致，经常导致合并冲突。更甚者，正好同时开发一个文件，导致根本没法合并，不得不关掉自动保存功能。一旦没有了自动保存功能，也没有提交校验，代码质量将得不到保证，极有可能引发线上问题。解决方案使用rules-cli 约束团队代码规范，安装方式 `npm install -g @xes/rules-cli` # 外网不可用然后使用 rules-cli all 安装全部功能1. checkbranch 分支校验2. checkmessage g...…
-
【rules-cli】check-message git提交规范
git提交规范背景团队人多，经常git commit message 的时候，懒得写只写个修改或者其它杂乱的名字，都不知道修改了啥。优雅的提交，方便团队协作和快速定位问题，也是其中重点。安装npm install --save-dev @commitlint/config-conventional @commitlint/cli// 生成配置文件commitlint.config.js，当然也可以是 .commitlintrc.jsecho "module.exports = {exten...…
-
【rules-cli】check-branch 分支命名规范
分支命名规范背景由于部门开发人员较多，大家对于分支的命名没有统一的规范，造成代码分支命名比较混乱，没有语义化，特此规范分支命名在git push之前对分支进行校验，加入不符合规范禁止提交规范说明master : 主分支，默认创建，用于线上的正式代码发布dev: 开发环境分支，用于开发代码提交到开发环境release : (测试环境1)分支，用于开发代码提交到测试环境1release02 : (测试环境2)分支，用于开发代码提交到测试环境2release03 : (测试环境3)分支，用于开发...…
-
调试 whistle修改请求以及响应的那些事
whistle修改请求以及响应的那些事这里专门总结一下修改请求以及响应相关的，前面章节有些已经介绍过了的相关内容也归类到这里。修改请求修改url参数www.xueersi.com/ urlParams://`{urlParams.json}`注：这里采用字符串模板的方式书写，方便展示数据，也可以通过引入value值的方式使用``` urlParams.jsona: 1b: 2```如下图，可以看到请求的url已经修改，带上了urlParams.json里面的参数修改请求方法www.xuee...…
-
调试 whistle与翻墙代理冲突问题以及跨域问题代理
whistle与翻墙代理冲突问题以及跨域问题代理whistle与翻墙代理冲突问题最近一直调试mock请求，然后使用whistle后就发现不能使用谷歌了，并没有走自己的vpn。然后每次想用谷歌搜索的时候，就得把whistle换成系统代理，换来唤去也麻烦，so… 直接把要访问的地址转发到vpn服务地址不就好了~现在可以愉快的进行项目调试以及访问谷歌了。跨域问题代理跨域问题也是比较常见的。当然也有很多办法解决，什么 Nginx，什么 Charles 等等。看一下whistle是如何解决的：*.x...…
-
调试 whistle 手把手调试mock数据
调试 whistle 手把手调试mock数据开发思维周日报时正好用到，在此总结一下。现状以及问题：在我们的vue项目里，可以通过proxy去代理到targe地址访问，但是我们targe的一般都是不同环境下的接口数据。之前也配置过单独target到专门的mock数据地址，但是mock的数据，针对整个项目而言往往是不全的，涉及到登录或者一些页面交互有的可能就缺了，所以更多时候是单独针对某一个请求，开发期间去改成mock的地址，但是要发布测试的时候，还得再改回来，记得还好，不记得发布测试出问题又...…
-
调试 whistle 过滤抓包数据的几种方法
调试 whistle 过滤抓包数据的几种方法whistle 提供了四种搜索及过滤抓包数据的方法，方便大家快速精确获取想要的抓包数据，分别为： 通过配置规则过滤抓包数据 通过Network界面Filter菜单过滤抓包数据 通过页面URL的hash参数过滤抓包数据 通过Network界面下方搜索框搜索抓包数据规则过滤whistle支持通过 pattern enable://hide [filters] 方式隐藏抓包数据，如： pattern可以为域名、路径、通配符、正则等，详细内容参...…
-
调试 whistle 用whistle清除js和css缓存
调试 whistle 用whistle清除js和css缓存在开发调试web页面过程中，经常会被浏览器缓存所困扰，导致一些静态资源的请求无法得到实时更新，特别是手机APP的内嵌Webview页面，经常找不到清除缓存的入口，本文将介绍下如何利用whistle彻底解决这类问题。一般清除缓存可以用以下三种方式： 客户端(浏览器)禁用缓存 通过修改请求和响应头 通过给请求URL加随机参数客户端禁用缓存Chrome浏览器可以通过打开开发者工具，并勾选Network菜单里面的Disable cac...…
-
调试 whistle 常用功能一览
调试 whistle 常用功能一览绑定host说明：相当于浏览器层的host文件，如果找不到再去查找本机的host文件192.168.0.1 mydomain.com替换请求以及文件说明：请求百度的时候会返回京东的页面内容此规则在移动端调试时有个场景特别有用：比如想在某个 APP 里打开一个的网页，但是该 APP 没有一个 url 输入框，我们可以随机地点击这个 app 的信息流，如果捕获到有页面请求，重定向为我们的 url 即可。https://m.baidu.com https://w...…
-
调试 whistle 移动端vconsole调试
调试 whistle 移动端vconsole调试这个就有点牛逼了，可以给任何项目添加 vconsole 展示，免去了代码安装。看图中耀眼的小绿条…直接安装相关插件即可sudo npm install whistle.inspect -g然后回到whistle的规则配置里这时候再去移动端访问相关页面，就发现已经有了，是不是巨方便！无需项目代码安装！…
-
调试 whistle 移动端weinre调试
调试 whistle 移动端weinre调试whistle内置了weinre，weinre可以用于调试远程页面特别是移动端的网页打开小猴思维app，访问正式环境，可以看到host是 imonkey.xueersi.com然后这时候点击Rules配置规则# xxx为对应的weinre id，主要用于页面分类，默认为anonymouswww.example.com weinre://xxx保存后，鼠标悬浮Weinre菜单上会出现你配置的weinre ID点击会出来一个weinre的调试页面打开...…
-
调试 whistle 移动端代理配置
调试 whistle 移动端代理配置以IOS为例，首选配置代理。 设置 → 无线局域网 → 选择我的网络 → 配置代理 → 选择 手动 ，输入你启动的 代理服务ip地址以及端口号 然后访问safari浏览器，输入 rootca.pro 或者扫描 之前chrome配置https的弹框二维码，下载证书描述文件。 下载完成后，点击设置 → 通用 → 描述文件 → 选择 whistle.xxxxxxxxxx 安装此描述文件 最后，开启证书信任，点击 设置 ...…
