Sådan overrasker brugerne af din app ved at skjule påskeæg i konsollen

for meget logning til konsollen

Jeg elsker console.logging (“stuff”).

Jeg gør det gennem mine apps til debugging-formål og funktionsbygningsformål og bare for det rene helvede af det. Det er sjovt at logge ting på konsollen.

Jeg bruger endda console.warn () og console.error () og console.table (), hvis jeg føler mig frisk.

Jeg kan godt lide alle de smukke farver, de laver i min konsol, og sommetider ønsker du, at nogle meddelelser skal skille sig ud mere end andre.

Men jeg indså, mens jeg kiggede på min historiegenerator-app WordNerds i går, end jeg loggede på konsollen i produktionstilstand.

Uh-oh spaghetti-oh.

Det er et nej. Det kunne nedsætte unødvendigt koden, og endnu vigtigere kan det kompromittere mine brugers e-mail-adresser! Jeg loggerede alle mine brugers brugernavne og e-mail-adresser. Ikke sejt! Deres adgangskoder er selvfølgelig krypteret, men stadig ingen bueno. Jeg vil ikke have, at nogen dårlige fyre får en masse af mine brugers e-mail-adresser og spammer dem crapola.

Slip af konsolelogger i produktionstilstand

Det viste sig at være let at løse det. Javisst, jeg kunne have været igennem kodebasen og kommenteret alle mine console.logs (), men det ville være en smerte, og nogle af dem tjener vigtige formål i udviklingsmodus.

Heldigvis er der en lettere, bedre måde.

Først konsulterede jeg nogle af de løsninger på dette problem, der er angivet på StackFlow, og gik derefter til sidst med den første løsning, der er nævnt i dette blogindlæg.

Løsning via www.codebyamir.com

Som nogle af de kommentarer, der blev nævnt, når nogen angav dette som en løsning på problemet: ”Det er et hack. Din [sic] spilder beregning i produktionen ”

”Det er et hack.”

God debat! Jeg var ikke for bekymret for at kalde en tom funktion flere gange og spilder en vis beregning i produktionen, så jeg gik med denne løsning, fordi det er let at implementere og løser mit problem.

Sådan gjorde jeg det i src / index.js-filen:

src / index.js-fil

Selvfølgelig kunne jeg gøre dette i enhver fil, f.eks. App-komponenten eller min StoryContainer-komponent. Overalt, så længe det var før der blev gengivet nogen konsollogfiler eller advarsler eller fejl. Men det var fornuftigt for mig at gøre det ved roden.

Jeg testede det under udvikling ved at erstatte 'produktion' med 'udvikling', og det virkede! Der er ikke flere beskeder i konsollen.

Tilføjelse af meddelelser tilbage til konsollen

Men så følte jeg mig trist :(

Er der ikke flere beskeder i konsollen? Syntes så sparsom.

Kan også have nogle beskeder til de nysgerrige, tilbøjelige ordnørder, der vovede nok til at åbne konsollen.

Så jeg føjede en tilbage ind, som et skjult påskeæg:

Hej allesammen!

Hvordan gjorde jeg det? Let: Da alle mine app's opkald til console.log (), console.warn () og console.error () hvor de blev overskrevet af tomme funktioner, tilføjede jeg simpelthen en console.info ()! Det er dybest set det samme som en console.log (). Nogle af forskellene er anført og omtvistet her.

Hej allesammen! var dog lidt kedelig. Jeg har allerede gemt min apps loggede brugernavn i tilstand, så hvorfor ikke personalisere min besked?

Og hvis jeg personaliserer min besked, hvorfor personaliserer jeg ikke en masse beskeder og returnerer tilfældigt en hver gang en logget bruger inspicerer konsollen? Alle kan lide at finde påskeæg!

Det er hvad jeg besluttede at gøre, og her er hvordan jeg gjorde det:

Hilsen komponent

Jeg gengiver min hilsen-komponent i min StoryContainer, så når en logget bruger vælger at tjekke konsollen, vil de se en af ​​disse venlige beskeder!

funktion getFriendlyMessage (nameString) {
  lad beskeder = [
    'Hej $ {nameString}, det er godt at se dig!',
    'sup $ {nameString}',
    "Hej der $ {nameString}, du ser fantastisk ud i dag!",
    "Hej der $ {nameString}, du spektakulære menneske dig!",
    `I ser fantastisk ud i dag $ {nameString}! ',
    `hellllooooooo $ {nameString}! ',
    'Hej $ {nameString}, hvordan er det?',
    `Kan du bevare en hemmelighed, $ {nameString}? Du er min favorit! `,
    "Intet at se her, $ {nameString}.",
    `Tillykke, $ {nameString}! Du har opdaget konsollen;) `,
    `har jeg fortalt dig for nylig, at jeg elsker dig, $ {nameString}? ',
    `Jeg vidste, at du til sidst ville finde dette påskeæg, $ {nameString} ... ',
  ]
  var randomMessage = meddelelser [Math.floor (Math.random () * meddelelser.længde)];
  return randomMessage
}

Kodning er sjovt.

Tak for at have læst, ord nerder!