有些网站在用户打开浏览器开发者工具时，会在Console控制台里显示一段有趣的文字、品牌提示、招聘文案或开发者问候。这类内容通常被称为控制台彩蛋。它不会影响普通用户浏览页面，但懂一点前端的人打开F12时，就能看到这个隐藏的小细节。

控制台彩蛋一般通过JavaScript里的console.log()实现。简单写法只输出一段文字，稍微好看一点的写法会配合%c和CSS样式，让文字带上颜色、字号、背景、边框等效果。

glowing egg in developer interface.webp

最简单的彩蛋

最基础的控制台彩蛋就是一行console.log。把下面代码放到网站公共JS文件里，或者放到页面底部即可。

<script>
console.log('欢迎打开控制台，看来你也是懂前端的人。');
</script>

这种写法非常简单，适合放一句问候、提示或品牌文案。但纯文字不够醒目，很多网站更常见的做法是使用带样式的控制台输出。

带样式的写法

浏览器控制台支持在console.log里使用%c占位符，然后给这段文字添加CSS样式。比如下面这段代码，会输出一个更醒目的提示。

<script>
console.log(
  '%cHello Developer!',
  'font-size: 28px; font-weight: bold; color: #ffffff; background: #222222; padding: 8px 12px; border-radius: 6px;'
);

console.log(
  '%c欢迎来到我们的网站，如果你喜欢研究前端，也许我们会有共同话题。',
  'font-size: 14px; color: #666666;'
);
</script>

这里的第一段参数是要显示的文字，第二段参数是CSS样式。%c后面的内容会应用对应样式。它不会改变网页页面本身，只会影响控制台里的显示效果。

多段样式组合

如果想让一句话里不同部分显示不同样式，可以使用多个%c。每一个%c对应后面一个CSS参数。

<script>
console.log(
  '%c站点提示 %c请不要在控制台粘贴陌生代码',
  'font-size: 16px; font-weight: bold; color: #ffffff; background: #1677ff; padding: 4px 8px; border-radius: 4px;',
  'font-size: 14px; color: #d93025; font-weight: bold;'
);
</script>

这种写法适合做安全提醒。很多普通用户会被陌生人诱导复制代码到控制台执行，因此网站可以在控制台里放一段提醒，告诉用户不要随意粘贴不明代码。

做一个招聘彩蛋

不少互联网产品会在控制台里留下招聘信息，因为会打开控制台的人，很可能是开发者、SEO技术人员或对网站实现感兴趣的人。文案可以轻松一点，但不要写得太长。

<script>
console.log(
  '%c我们正在寻找有趣的开发者',
  'font-size: 24px; font-weight: bold; color: #ffffff; background: #111827; padding: 10px 14px; border-radius: 8px;'
);

console.log(
  '%c如果你看到这里，说明你可能也喜欢研究网页。欢迎关注我们的招聘页面：/jobs',
  'font-size: 14px; color: #4b5563; line-height: 1.8;'
);
</script>

招聘彩蛋不建议写成弹窗或强提示，放在Console里轻轻展示就够了。它更像品牌性格的一部分，而不是正式招聘渠道的替代品。

输出ASCII图案

如果想做得更像“彩蛋”，可以使用ASCII字符拼出简单图案。注意不要太大，否则会让控制台显得混乱。

<script>
console.log(
  '%c' +
  '  ____        _      _             \\n' +
  ' |  _ \\      | |    | |            \\n' +
  ' | |_) | ___ | | ___| | ___  _ __  \\n' +
  ' |  _ < / _ \\| |/ _ \\ |/ _ \\| `_ \\ \\n' +
  ' | |_) | (_) | |  __/ | (_) | | | |\\n' +
  ' |____/ \\___/|_|\\___|_|\\___/|_| |_|',
  'font-family: monospace; color: #111827; font-size: 12px;'
);
</script>

ASCII图案适合技术社区、工具站、开源项目官网等场景。企业官网或正式业务站可以少用，避免显得过于花哨。

用group整理信息

如果控制台内容不止一两行，可以用console.group()和console.groupEnd()把内容折叠起来。这样既能展示彩蛋，又不会占用太多控制台空间。

<script>
console.group('%c站点开发者信息', 'font-size: 16px; font-weight: bold; color: #1677ff;');
console.log('版本：v1.0.0');
console.log('提示：请不要在控制台执行陌生代码。');
console.log('反馈：如果发现页面问题，可以通过网站底部联系方式告诉我们。');
console.groupEnd();
</script>

这种写法更适合产品站、工具站和后台系统。开发者打开控制台时，可以快速看到版本、反馈方式和安全提醒。

用table展示信息

console.table()可以在控制台里用表格展示结构化信息。它不适合大段文案，但适合展示版本、环境、联系方式等简单信息。

<script>
console.table([
  {
    name: 'Website',
    value: 'Example Site'
  },
  {
    name: 'Version',
    value: '1.0.0'
  },
  {
    name: 'Contact',
    value: 'contact@example.com'
  }
]);
</script>

如果网站面向开发者用户，控制台表格会显得更清楚。普通内容站一般不需要这么复杂，简单文案就够了。

加一个安全提醒

控制台彩蛋除了有趣，也可以承担一点安全提醒作用。因为有些诈骗或恶意教程会诱导用户打开控制台粘贴代码，从而盗取账号信息或执行危险操作。

<script>
console.log(
  '%c安全提醒',
  'font-size: 20px; font-weight: bold; color: #ffffff; background: #d93025; padding: 6px 10px; border-radius: 4px;'
);

console.log(
  '%c不要在控制台粘贴或运行陌生人提供的代码，这可能导致账号或数据风险。',
  'font-size: 14px; color: #d93025; font-weight: bold;'
);
</script>

这类提醒比较实用，尤其适合用户中心、后台系统、电商站、工具站和有登录功能的网站。它不会真正阻止用户执行代码，但可以降低一部分误操作风险。

不要输出敏感信息

控制台彩蛋只是展示给用户看的信息，不能把它当成内部日志。不要在控制台输出接口Token、密钥、用户手机号、订单信息、后台接口地址、调试参数或未公开的业务逻辑。

前端控制台里的内容，任何用户都可以看到。即使你认为只有开发者才会打开控制台，也不能在这里放敏感信息。真正的调试日志应该在开发环境使用，生产环境要控制输出。

区分生产和开发

如果网站有开发环境和生产环境，建议把控制台彩蛋和调试日志分开。生产环境可以保留一两段品牌提示或安全提醒，但不要保留大量调试输出。

<script>
(function () {
  var isProduction = location.hostname === 'www.example.com';

  if (isProduction) {
    console.log(
      '%c欢迎来到Example Site',
      'font-size: 20px; font-weight: bold; color: #ffffff; background: #111827; padding: 8px 12px; border-radius: 6px;'
    );
  } else {
    console.log('当前为测试环境');
  }
})();
</script>

正式项目中，这类判断通常由构建工具、环境变量或后端模板处理。上面的写法适合简单站点参考，不一定适合所有工程化项目。

放在哪里更合适

控制台彩蛋通常放在网站公共JS文件、页脚脚本或主题自定义代码区域。它不需要阻塞页面加载，也不应该影响首屏内容显示。

如果是WordPress网站，可以通过主题的自定义代码功能、子主题、页脚脚本插件或全站代码插入插件添加。不要直接修改WordPress核心文件，主题文件也尽量通过子主题或插件管理，否则后续更新容易被覆盖。

如果是静态站，可以放在公共脚本文件中；如果是Vue、React、Next.js等项目，可以放在入口文件或只在客户端执行的逻辑里。需要注意服务端渲染环境中没有浏览器Console对象时，代码不要影响构建或渲染。

控制好出现频率

控制台彩蛋不建议输出太多次。单页应用在路由切换时，如果每次都输出一大段内容，会让控制台很快变得混乱。比较稳妥的做法是页面首次加载时输出一次。

<script>
(function () {
  if (window.__consoleEggShown) {
    return;
  }

  window.__consoleEggShown = true;

  console.log(
    '%cHello Console!',
    'font-size: 22px; font-weight: bold; color: #ffffff; background: #000000; padding: 8px 12px; border-radius: 6px;'
  );
})();
</script>

这样可以避免重复输出，尤其适合有前端路由的站点。

适合哪些网站

控制台彩蛋适合技术博客、工具站、开源项目官网、SaaS产品、招聘页、开发者社区和有品牌性格的网站。它能让懂技术的用户感到一点惊喜，也能顺便传递安全提醒或招聘信息。

如果是政府、金融、医疗、严肃企业官网，彩蛋文案应尽量克制。可以保留安全提醒或版本说明，不建议使用过于调侃的内容。

实际使用建议

控制台彩蛋最好保持短小、清楚、无侵入。不要用大量循环输出，不要用alert打断用户，不要尝试阻止开发者工具，不要把控制台当成广告位刷屏。

一个好的Console彩蛋，应该是用户打开开发者工具时看到一点额外信息，而不是影响调试。对普通站点来说，一段品牌问候加一段安全提醒就已经足够。

如果你只是想快速加一个可用版本，可以直接使用下面这段代码：

<script>
(function () {
  if (window.__consoleEggShown) {
    return;
  }

  window.__consoleEggShown = true;

  console.log(
    '%c欢迎来到本站',
    'font-size: 24px; font-weight: bold; color: #ffffff; background: #111827; padding: 8px 12px; border-radius: 6px;'
  );

  console.log(
    '%c如果你正在查看控制台，请不要粘贴或运行陌生代码。祝你调试愉快。',
    'font-size: 14px; color: #4b5563; line-height: 1.8;'
  );
})();
</script>

这段代码简单、可控、不影响页面主体功能，适合大多数网站作为控制台彩蛋的基础版本。