← 全部文章

教程

DEV/STAGING/PROD 环境标记 —— 不再搞砸生产环境的 5 种方法

15 5月 2026 · 作者 JustZix Team

你点了「删除所有账户」，以为自己在 staging。结果是生产环境。每个 DevOps 和工程师至少都会遇上一次。五种环境视觉标记技巧，让你别再掉进那个坑。

方法 1 —— 顶部红色横幅

最显而易见，也最有效。每个页面顶部一条横幅，无法忽视：

body::before {
  content: "DEV 环境 —— 数据可能并非来自生产";
  position: fixed;
  top: 0; left: 0; right: 0;
  background: repeating-linear-gradient(
    -45deg, #dc2626, #dc2626 12px, #b91c1c 12px, #b91c1c 24px
  );
  color: #fff;
  text-align: center;
  padding: 6px 12px;
  font: 700 13px/1.4 ui-monospace, monospace;
  letter-spacing: .5px;
  z-index: 999999;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* 给 body 加内边距，让内容不会滑到横幅下面 */
body { padding-top: 32px !important; }

重复渐变营造出工地上那种「警示胶带」的图案 —— 从进化的角度说，它意味着危险。没有渐变它就是一条普通的信息栏；有了它，没人会忽视它。

方法 2 —— 角落里的悬浮徽章

顶部横幅咄咄逼人，还占空间。有时你想要更含蓄的东西 —— 一个小巧的角落徽章：

body::after {
  content: "DEV";
  position: fixed;
  bottom: 16px; left: 16px;
  background: #dc2626;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font: 700 12px ui-monospace, monospace;
  letter-spacing: 1px;
  z-index: 999999;
  box-shadow: 0 4px 12px rgba(220, 38, 38, .4);
  pointer-events: none; /* 不要阻挡点击 */
}

固定在角落，可见但低调。pointer-events: none 很关键 —— 没有它，徽章会挡住下面的按钮。

方法 3 —— 替换 favicon

横幅只有在你看着页面时才有用。浏览器标签页即使 Cmd+Tab 之后也能看到。替换 favicon：

// 生成一个新 favicon（带字母 D 的红色圆圈）
const canvas = document.createElement('canvas');
canvas.width = 32; canvas.height = 32;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#dc2626';
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#fff';
ctx.font = 'bold 18px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('D', 16, 17);

// 移除旧的 favicon
document.querySelectorAll('link[rel*="icon"]').forEach(el => el.remove());

// 添加新的
const link = document.createElement('link');
link.rel = 'icon';
link.type = 'image/png';
link.href = canvas.toDataURL();
document.head.appendChild(link);

标签页里一个红色的 D，永远可见。书签里也管用 —— staging 和生产的书签变得轻而易举就能区分。

方法 4 —— 细微的视口染色

最优雅的 —— 一层轻微的彩色叠层，给整个页面带上一抹几乎察觉不到的色调：

/* STAGING 用橙色调，DEV 用红色调 */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(245, 158, 11, .04);
  pointer-events: none;
  z-index: 999998;
  mix-blend-mode: multiply;
}

rgba(..., .04) = 几乎不可见，但几秒之后大脑就知道「有什么不一样」。几天之后你一眼就能察觉。没有横幅那种侵略性。

方法 5 —— 在标签页标题里加前缀

浏览器标签页显示 document.title。加个前缀：

// 标题前缀 + 留意会动态修改它的 SPA
const PREFIX = '[DEV] ';

function ensurePrefix() {
  if (!document.title.startsWith(PREFIX)) {
    document.title = PREFIX + document.title;
  }
}

ensurePrefix();

// SPA 经常在路由切换时修改标题
new MutationObserver(ensurePrefix)
  .observe(document.querySelector('title'), { childList: true });

MutationObserver 会捕获那些在路由切换时重写标题的 SPA。没有这个 observer，前缀在第一次导航后就消失了。

坑

• 别在生产环境应用它 —— URL 模式必须收窄：https://staging.*、https://*-dev.*、http://localhost:*。不要用 *。
• z-index 冲突 —— 有些 cookie 横幅或模态框用 z-index 9999。你的标记必须更高（999999 应该够了）。
• 打印样式表 —— 横幅会出现在打印的 PDF 里。加上 @media print { body::before { display: none } } 来跳过它。
• iframe —— 嵌入 iframe 里的页面不会继承父级的 CSS。URL 模式也必须匹配 iframe 的内容，标记才会出现在里面。

如何在 JustZix 中接入

1. 安装 JustZix。
2. 文件夹「环境标记」。按环境设规则：
   • 模式 https://*-staging.company.com/* → 方法 1（横幅）+ 方法 3（favicon）。
   • 模式 http://localhost:*/* → 方法 2（徽章）+ 方法 5（标题前缀）。
3. 给整个团队发分享链接 —— 大家都用同一套环境标记。

免费安装 JustZix，别再因为「手滑点错」而搞砸生产环境。