电台复活节_如何通过在控制台中隐藏复活节彩蛋使您的应用程序用户惊讶

电台复活节

by Ethan Ryan

由伊桑·瑞安(Ethan Ryan)

如何通过在控制台中隐藏复活节彩蛋使您的应用程序用户惊讶 (How to surprise your app’s users by hiding Easter eggs in the console)

I love console.logging(“stuff”).

我喜欢console.logging(“ stuff”)。

I do it throughout my apps, for debugging purposes and feature building purposes, and just for the sheer hell of it. It’s fun to log stuff to the console.

我在整个应用程序中都这样做，出于调试目的和功能构建目的，并且纯粹出于此目的。将内容记录到控制台很有趣。

I even use console.warn() and console.error(), and console.table() if I’m feeling frisky.

如果我感到烦躁，甚至可以使用console.warn()和console.error()以及console.table() 。

I like all the pretty colors they make in my console, and sometimes you want some messages to stand out more than others.

我喜欢它们在控制台中制作的所有漂亮颜色，有时您希望某些消息比其他消息更加突出。

But I realized while looking at my story generator app WordNerds yesterday than I was logging to the console in production mode.

但是我昨天在看故事生成器应用程序WordNerds时发现，与在生产模式下登录控制台相比，我意识到了这一点。

Uh-oh spaghetti-ohs.

哦，意大利面条，哦。

That’s a no-no. It could slow down the code unnecessarily, and more importantly, it could compromise my users’ email addresses! I was logging all my users’ usernames and email addresses. Not cool! Their passwords are encrypted of course but still, no bueno. I wouldn’t want any bad guys getting a a bunch of my users’ email addresses and spamming them crapola.

那是不对的。它可能会不必要地降低代码速度，更重要的是，它可能会损害我的用户的电子邮件地址！我正在记录所有用户的用户名和电子邮件地址。不酷！他们的密码当然是加密的，但仍然没有加密。我不希望任何坏蛋得到我用户的电子邮件地址，并给他们发送垃圾邮件。

在生产模式下摆脱控制台日志 (Getting Rid of Console Logs In Production Mode)

Fixing it turned out to be easy. Sure, I could have gone through the codebase and commented out all my console.logs(), but that would be a pain, and some of them are serving important purposes in development mode.

修复它很容易。当然，我可以遍历代码库并注释掉我的所有console.logs()，但这很痛苦，其中一些在开发模式下起着重要的作用。

Luckily there’s an easier, better way.

幸运的是，有一种更简便，更好的方法。

First I consulted some of the solutions to this problem listed on StackFlow, and then ultimately went with the first solution listed on this blog post.

首先，我咨询了 StackFlow上针对此问题的一些解决方案，然后最终采用了此博客文章中列出的第一个解决方案。

As some of the comments mentioned when someone listed this as a solution to the problem: “That’s a hack. Your [sic] wasting computation in production”

正如有人将其列为问题解决方案时提到的一些评论：“这是黑客。您的[原文如此]浪费了生产中的计算量”

Good debate! I wasn’t too worried about calling an empty function several times and wasting some computation in production, so I went with this solution, because it’s easy to implement and solves my problem.

好辩论！我不太担心多次调用空函数并浪费生产中的计算量，因此我选择了此解决方案，因为它易于实现并解决了我的问题。

Here’s how I did it, in the src/index.js file:

这是我在src / index.js文件中执行的操作：

Of course I could do this in any file, like the App component, or my StoryContainer component. Anywhere as long as it was before any console logs or warns or errors were being rendered. But it made sense to me to do it at the root.

当然，我可以在任何文件中执行此操作，例如App组件或StoryContainer组件。只要在呈现任何控制台日志或警告或错误之前的任何时间。但是从根本上讲，这对我来说很有意义。

I tested it in development by replacing ‘production’ with ‘development’, and it worked! No more messages in the console.

我在开发中通过将“生产”替换为“开发”来对其进行了测试，并且成功了！控制台中没有更多消息。

将消息添加回控制台 (Adding Messages Back Into the Console)

But then I felt sad :(

但是后来我很难过:(

No more messages in the console? Seemed so sparse.

控制台中没有更多消息了吗？看起来如此稀疏。

May as well have SOME messages for those curious, intrepid word nerds daring enough to open up the console.

对于那些大胆地打开控制台的好奇，勇敢的书呆子，可能还会收到一些消息。

So I added one back in, like a hidden Easter egg:

所以我又添加了一个，就像一个隐藏的复活节彩蛋：

How’d I do this? Easy: since all my app’s calls to console.log(), console.warn(), and console.error() where being overwritten by empty functions, I simply added in a console.info()! It’s basically the same as a console.log(). Some of the differences are listed, and disputed, here.

我该怎么做？容易：因为我的应用程序对console.log() ， console.warn()和console.error()所有调用都被空函数覆盖，所以我只添加了console.info() ！它基本上与console.log()相同。这里列出了一些差异，并且有争议。

hello everybody! was a little boring though. I already had my app’s logged-in user’s name stored in state, so why not personalize my message?

hello everybody! 虽然有点无聊。我已经将应用程序的登录用户名存储在状态中，那么为什么不个性化我的消息呢？

And if I’m gonna personalize my message, why not personalized a bunch of messages, and randomly return one every time a logged-in user inspects the console? Everyone likes finding Easter eggs!

而且，如果我要个性化我的消息，为什么不个性化一堆消息，并在每次登录用户检查控制台时随机返回一条消息？每个人都喜欢找到复活节彩蛋！

That’s what I decided to do, and here’s how I did it:

那就是我决定要做的，这就是我的做法：

I’m rendering my Greeting component in my StoryContainer, so that whenever a logged-in user chooses to check out the console, they’ll see one of those friendly messages!

我将在StoryContainer中渲染我的Greeting组件，以便每当登录用户选择检出控制台时，他们将看到这些友好消息之一！

function getFriendlyMessage(nameString) {let messages = [`Hello ${nameString}, it's good to see you!`,`sup ${nameString}`,`hi there ${nameString}, you look awesome today!`,`hi there ${nameString}, you spectacular human being you!`,`you look awesome today ${nameString}!`,`hellllooooooo ${nameString}!`,`Hey ${nameString}, how's life?`,`Can you keep a secret, ${nameString}? You're my favorite!`,`Nothing to see here, ${nameString}.`,`Congratulations, ${nameString}! You've discovered the console ;)`,`have i told you lately that i love you, ${nameString}?`,`i knew you'd find this Easter egg eventually, ${nameString}...`,]var randomMessage = messages[Math.floor(Math.random() * messages.length)];return randomMessage
}

Coding is fun.

编码很有趣。

Thanks for reading, word nerds!

感谢您的阅读，书呆子！