Leo’s Blog https://leolin66.top/ 無限進步💪 Wed, 05 Aug 2026 16:19:08 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed zh-CN All rights reserved 2026, leolin <![CDATA[Env Guard：让浏览器一眼分清生产、测试和开发环境]]> https://leolin66.top/article/env_guard https://leolin66.top/article/env_guard Wed, 05 Aug 2026 00:00:00 GMT

Env Guard：让浏览器一眼分清生产、测试和开发环境

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
在这里插入图片描述
在这里插入图片描述

写在前面

做后端、测试或者运维的朋友，应该都经历过这样一幕：
你以为自己在测试环境里点了一个删除按钮，结果页面跳了一下，URL 看起来差别不大，但其实是生产环境。
这种“环境误操作”，轻则浪费排查时间，重则直接出事故。很多时候并不是不认真，而是页面长得太像，地址栏又一眼看不准。
为了解决这个痛点，我给自己写了一个 Chrome 扩展：Env Guard。它会按你配置的 URL 规则，在页面上方自动挂一个醒目的环境标记，比如“生产环境”“测试环境”“开发环境”，颜色、透明度、位置都能自己调，拖到哪就停在哪。

这是什么

Env Guard 是一个 Chrome 浏览器扩展，主要面向需要频繁切换多个环境的用户，帮助你在打开一个页面时，一眼看清楚当前是哪种环境，降低误操作生产环境数据的风险。
它的核心理念很简单：
环境是重要的上下文，不应该只藏在 URL 后面。

核心功能

在这里插入图片描述
  • 按 URL 自动识别环境：根据配置的 URL 匹配规则，自动判断当前页面属于哪个环境。
  • 自定义环境名称和颜色：生产环境、测试环境、开发环境，或者你自己定义的任何环境名，都可以。
  • 透明度可调：标记背景支持透明度调节，在不遮挡业务的同时依然显眼。
  • 默认位置可配：支持左上、顶部居中、右上、左中、居中、右中、左下、底部居中、右下九宫格位置。
  • 字体大小可调：从 12 到 80 px，按屏幕和习惯自己调。
  • 支持正则匹配：URL 匹配字段支持正则表达式，写错了会回退到普通包含匹配，不至于直接失效。
  • 自由拖拽：标记可以直接在页面上拖动，避开遮挡内容的区域。
  • 记住拖拽位置：拖动后的位置会自动保存，下次命中同一条规则时会自动恢复。
  • SPA 友好：监听前端路由变化，URL 切换后会立刻重新判断环境标记，不用手动刷新。
  • 规则测试：配置页内置 URL 测试框，输入地址就能看到命中哪条规则。
  • 导入/导出配置：支持 JSON 导入导出，换电脑或者团队内部分享都很方便。

使用场景

举几个我自己用下来最常见的场景：
  1. 多套环境并行：同时有 prod.xxx.com、staging.xxx.com、dev.xxx.com，一眼分清。
  1. 本地开发：用 localhost、127.0.0.1 区分本地开发版本。
  1. 内网测试：用 IP 或特定子域名标识测试环境。
  1. 灰度环境：自定义一个“预发环境”标记，单独配色。
  1. 演示场景：录屏或对外演示时，避免误打开生产数据。

安装方式

  1. 从 GitHub Release 下载最新的 Env_Guard.zip。
  1. 解压到任意目录。
  1. 打开 Chrome，访问 chrome://extensions/。
  1. 打开右上角的 开发者模式。
  1. 点击 加载已解压的扩展程序。
  1. 选择刚才解压出来的目录即可。
如果你是开发者，也可以直接克隆仓库：

配置示例

在这里插入图片描述
打开扩展的“选项”页面，你会看到一张规则表，每条规则包含：
字段
说明
启用
是否启用这条规则
名称
页面上显示的环境名，比如“生产环境”
URL 匹配
用于匹配页面 URL，支持正则
颜色
标记背景颜色
透明度
标记背景透明度
默认位置
首次显示的位置
字体大小
标记文字大小
默认会带三条示例规则：
  • https://www.example.com/（生产环境）
  • https://test.example.com/（测试环境）
  • localhost|127.0.0.1|dev.example.com（开发环境）
你可以基于这些示例改成自己的项目地址。

性能优化

之前拖动标记时会有点卡，主要原因有两个：
  1. transform 频繁重排。
  1. 监听事件没有节流。
这次重写之后做了几件事：
  • 拖动过程统一改用 translate3d。
  • 用 requestAnimationFrame 合并位置更新。
  • 用 pointer events 统一鼠标/触控。
实测下来，拖动手感顺滑多了，不再有掉帧感。

隐私说明

Env Guard 只做一件事：
把配置和当前页面 URL 在本地做匹配，决定显示哪种环境标记。
它不会：
  • 上传任何页面内容
  • 上传任何用户配置
  • 收集任何浏览历史
  • 接入任何第三方服务
所有规则、颜色、拖动位置都只保存在浏览器本地 chrome.storage.sync 里。

写在最后

Env Guard 是一个非常“个人化”的小工具，它解决的问题很具体，但确实能减少一次又一次的“环境恍惚”。
如果你也经常在多套环境之间来回切，欢迎试试看，反馈和建议都很欢迎。
仓库地址： https://github.com/Linlei-dev/Env_Guard
如果你想看更详细的使用说明，可以继续看仓库 README；如果你想交流插件思路或者推荐类似的小工具，欢迎在评论区聊。
]]> <![CDATA[jmeter之执行前置sql脚本踩坑]]> https://leolin66.top/article/jmeter_notes https://leolin66.top/article/jmeter_notes Tue, 28 Nov 2023 00:00:00 GMT
 
😀
这份笔记主要是记录自己使用前置sql脚本时踩的坑，配置JDBC预处理程序时变量名称没有填JDBC-Connection-Configuration中配置的连接池变量名，导致sql不执行的问题。
 

📝 前置sql脚本

操作步骤

  • 首先在你要添加前置sql的请求上右键【添加】-【配置元件】-【JDBC-Connection-Configuration】
notion image
  • 接下来配置JDBC-Connection-Configuration 这里我们只关注这个参数Variable name bound to pool（其他的参数可以自行查找教程解析），它是JDBC连接配置中的一个可选参数。 它用于定义一个变量名，将数据库连接池绑定到该变量上。当你在 JDBC 连接配置中设置了 "Variable Name" 参数，并指定一个变量名时，JMeter 将创建一个数据库连接池，并将该连接池绑定到指定的变量上。 这样，你就可以在其他地方使用该变量引用连接池，例如在 JDBC 请求中。通过将连接池绑定到变量名上，你可以在测试执行期间共享数据库连接池，以便在多个线程组或多个请求中重复使用连接池。这可以提高性能并减少数据库连接的开销。
notion image
  • 配置好数据库连接之后，再右键【添加】-【前置处理器】-【JDBC预处理程序】
notion image
  • 接下来配置JDBC预处理程序 这一步需要注意的就是我们上面配置JDBC-Connection-Configuration时的Variable name bound to pool参数，否则会连不上数据库，sql不会正确执行。
notion image
  • 如果还是无法执行sql，可以检查一下是否装了mysql的jar包，可以到jmeter安装路径/lib中查看，如果没有，可以打开jmeter插件下载地址：http://jmeter-plugins.org/搜索后下载解压，将jar包放进lib目录下重启jmeter即可生效。
notion image

📎 参考文章

 
💡
欢迎您在底部评论区留言，一起交流~
]]> <![CDATA[如何更新Fork的项目]]> https://leolin66.top/article/how_to_update_fork_project https://leolin66.top/article/how_to_update_fork_project Mon, 29 Jan 2024 00:00:00 GMT

如何更新Fork的项目(需要一定git基础)

notion image
  • 如何更新fork的项目
    • 首先你需要fork大佬的原项目仓库得到你自己的仓库A
    • 为仓库A新建一个deploy分支用于部署到vercel
      • 在vercel中修改部署的分支为deploy
          • notion image
    • 然后将你的A仓库clone到本地
      • 先初始化本地仓库
          1. 在你本地新建一个文件夹
          1. 鼠标右键git bash here
          1. 在git命令窗口中执行git init
          1. 执行git clone https://github.com/XXXX/NotionNext.git 后面的链接为A仓库的https链接
        notion image
    • 克隆完成后，执行git checkout deploy创建一个本地的deploy分支
    • 平时自己需要开发或配置代码，则切换到deploy分支上进行修改
    • 修改后将修改内容推送到远程仓库的deploy分支上，即可完成你自己内容的更新
        1. git add 你修改的文件 将你修改的内容添加到暂存区
        1. git commit -m '更新了XXX' 将暂存区的文件提交到本地的deploy分支
        1. git push oringin deploy:deploy 将本地deploy分支推送到远程仓库的deploy分支
    • 如果大佬的项目有更新，那么我们只需要在github上A仓库的main分支上点击Sync fork将你的仓库更新为与大佬的一致
    • 这时候本地切换到本地的main分支，并将远程main分支的内容同步到本地main分支
        1. git checkout main
        1. git pull 将远程main分支的内容下载并合并到本地main分支
    • 然后切换到本地deploy分支，将main分支的内容合并到deploy分支，解决冲突（如有的话），推送到远程deploy分支即可完成更新
        1. git checkout deploy
        1. git merge main
        1. git add . 将所有修改添加到暂存区
        1. git commit -m '合并main分支的修改到deploy分支'
        1. git push origin deploy:deploy 将本地deploy推送到远程deploy分支（如果失败，记得先 git pull origin deploy 将远程 deploy 分支最新版拉到本地的 deploy 分支，然后修改冲突后再推送）
    • 推送成功后，vercel会自动重新部署项目，部署完成即可完成更新
 
点击下方下载xmind文件：
如何更新fork的项目(进阶版) (1).xmind
208.9KB
 
💡
欢迎您在底部评论区留言，一起交流~
]]> <![CDATA[解决使用小火箭代理后被银行app检测的问题]]> https://leolin66.top/article/solve_shadowrocket_bank_agent_detection https://leolin66.top/article/solve_shadowrocket_bank_agent_detection Mon, 22 Sep 2025 00:00:00 GMT

解决使用小火箭代理后被银行app检测的问题

目前使用小火箭，农业银行app老是被检测到有代理打不开，即使代理规则把这些 app 的用户代理全部划为直连也会提示代理，甚至代理规则直接直连也会提示代理。于是上网找解决办法，在v2ex论坛上看见一个哥们儿给的解决方案，使用之后发现确实有效果，故记录一下。
解决方式：
  1. 打开小火箭
  1. 进入设置-代理
  1. 代理类型 选择 none
  1. 完美解决！
原论坛内容：关于 ios 上 app 检测代理 - V2EX
notion image
💡
欢迎您在底部评论区留言，一起交流~
]]> <![CDATA[jira与钉钉通知脚本]]> https://leolin66.top/article/jira_dingding_reminder https://leolin66.top/article/jira_dingding_reminder Thu, 13 Jun 2024 00:00:00 GMT
 
💡
欢迎您在底部评论区留言，一起交流~
]]> <![CDATA[Selenium入门]]> https://leolin66.top/article/selenium_demo https://leolin66.top/article/selenium_demo Mon, 30 Sep 2024 00:00:00 GMT

Selenium UI自动化入门

在软件开发中，UI自动化测试是一项至关重要的实践，它可以帮助我们验证应用程序的用户界面行为是否符合预期。Selenium是一种流行的自动化测试工具，用于执行UI自动化测试。本教程将介绍如何使用Selenium进行UI自动化测试，并提供一个简单的示例代码。

什么是Selenium？

Selenium是一个用于自动化Web应用程序测试的工具，支持多种编程语言。它可以模拟用户在浏览器中的操作，如点击按钮、填写表单等，以验证应用程序的行为。

准备工作

在开始之前，确保你已经安装了以下软件：
  • Python编程语言
  • Selenium库
  • Chrome浏览器
  • ChromeDriver

编写第一个Selenium测试

下面是一个简单的示例，演示如何使用Selenium打开一个网页并验证标题：
💡
欢迎您在底部评论区留言，一起交流~
]]>