Kommando af Javascript-konsollen

Kommando af Javascript-konsollen

Nyttige tricks til fejlfinding, formatering og effektivitet

Konsollen er et af de første værktøjer, som udviklere lærer om. Konsollen er det værktøj, som udviklere bruger, når de fejler deres egne applikationer. Loven i instrumentet siger, at det er let at udvikle overtillid i et velkendt værktøj.

"Jeg formoder, at det er fristende, hvis det eneste værktøj, du har, er en hammer, at behandle alt som om det var et søm." -Maslow

Den samme idé kan anvendes på konsollen. I et økosystem, hvor værktøjer, tastaturgenveje og API'er flyder som mælk og honning i det lovede land, er det svært at retfærdiggøre at samle en ny hammer op, når din gamle fungerer fint. Stol på mig på denne, selvom de stikkende ting på bagsiden af ​​din hammer ikke kun er for at rive negle ud.

Det følgende er nogle af de enkleste tricks, jeg har fundet til fejlfinding i konsollen.

# 1: Indpakningsargumenter

Hvis du indpakker argumentet, der er sendt ind console.logi {}, udsender du de data, du logger på, i objektform. Objektet vil have et godt navn til at fortælle dig, hvad det var, du forsøgte at sende.

I stedet for at se en hel masse objekter med lignende felter som id og navn i din konsol sådan:

Du får navnet på variablen foran de data, der udskrives på denne måde:

# 2: Kopiering af data til udklipsholderen

Du kan kopiere data, der er logget i konsollen, til computerens udklipsholder. Jeg finder dette nyttigt, når du vil manipulere et objekt i en REPL eller trække data, du debugger, ud.

Højreklik ved siden af ​​de data, du vil kopiere, og vælg "Gem som en global variabel". Dette gemmer dataene som en variabel i konsollen med et midlertidigt navn. (Hvis det er første gang, du gør det i et konsolvindue, vil det være temp1.) Så kan du bruge copy()kommandoen, der lægger navnet ind temp1som argument. Dette kopierer de data, der er gemt på dit udklipsholder, som du kan indsætte, som om du gør noget andet, du kopierer.

Det er især nyttigt, når en databaseforespørgsel ikke returnerer data i et format, der svarer til, hvordan dine data manipuleres på frontend. Du kan vise dig, hvordan data bliver muteret eller transformeret.

# 3: Kortslutningsudtryk

Hvis du kortslutter et udtryk med en ||, kan du gøre refactoring-kode eller tilføje i en fejlretningserklæring meget hurtigere. Dette er især nyttigt med en linje fedtpilfunktioner, hvor du vil se, hvilke data du modtager som et argument.

// THISsomeFunction = data => ( )
// BECOMES...someFunction = data => console.log(data) || ( )
// RATHER THAN...someFunction = data => { console.log(data) return ( )}

Du springer ud over at indpakke hele funktionen i krøllede seler og tilføje et retur. Dette føles som om det ikke er så stort en aftale, før du optimerer ydeevnen og gør det tusind gange for at prøve at finde ud af, hvilken alvorlig reaktionssynd du har begået.

# 4: Log, fejl, advarsel

Derudover console.log()har konsollen flere andre funktioner til at udskrive data til konsollen i forskellige foruddefinerede formater. Blandt disse er:

  • console.log()
  • console.warn()
  • console.error()

# 5: Tilpasset formatering til konsoloutput

Du kan gøre mere end bare gennemføre den indbyggede formatering med console.log, warnog error. Du kan spille rollen som kunstner, hvor konsollen er dit lærred!

Prøv måske at udskrive en dejlig pille omkring output, du vil understrege:

Her er det uddrag:

Du kan også gemme CSS til brug som stilarter i en variabel, der skal anvendes til output. Du kan punkke dine kolleger med et stænk regnbue for at spore alt, hvad du sender. Hvis du vil have humungøse regnbuer, der følger alt, så prøv dette:

# 6: Udskrivning af JSON som en tabel

Uden at vide det for mange, har konsollen en indbygget metode til udskrivning af tabeldata i tabelformat. Dette kan være fantastisk til hurtigt at gennemgå JSON-data.

# 7: Let optælling

Den console.count()metode kan gøre at holde styr på, hvor mange gange du har ramt et punkt i din kode meget simpelt. Du behøver ikke længere peber din kode i stigende variabler.

Pro tip: Du kan erstatte "nummer" med en etiket fra en variabel, og det tæller, hvor mange gange optællingsmetoden med den pågældende etiket er blevet ramt.

Jeg har fundet dette at være nyttigt, når jeg forsøger at debugge race-betingelser eller unødvendig gengivelse i en React-app.

# 8: Brug af DOM Elements

Du kan vælge et DOM-element i fanen Elementer og derefter få adgang til det med $0. Browseren holder faktisk en historik, hvor den $0repræsenterer det aktuelle valg. $1repræsenterer det forrige valg. $2det næstsidste valg og så videre op til 5 elementer.

Du kan spørge dig selv: hvornår vil jeg nogensinde ønsker at ændre den indre HTML i min app fra konsollen? Og svaret ville sandsynligvis kun være, når du vil have et rigtig simpelt eksempel GIF til et blogindlæg. Men også dette har sine brugstilfælde.

# 9: Debugger-erklæringen

Hvis du nogensinde har tilføjet et console.log, gået ind i browserværktøjerne og tilføjet et breakpoint for at se, hvad der sker, når det kommer til den kode, skal du frigøre dig med debuggererklæringen.

Hvis du tilføjer debuggerpå en linje i dit Javascript, stopper browseren og åbner fejlretningsværktøjerne og sætter udførelsen på pause.

Selvom det ikke er en konsolfunktion, er det en god ting at vide. Loggeoplysninger til konsollen er ikke så effektive eller effektive som de fejlfindingsværktøjer, der er indbygget i browsere (som Chrome-fanen Kilder eller Firefox-fanen Debugger). For yderligere at forbedre din fejlretning skal du undersøge ressourcer, der dykker ned i disse værktøjer.

Konsollen er dog fortsat en rigtig hurtig og effektiv måde at se applikationsflow i apps, hvor mange forskellige livscyklusmetoder og gendannelser skyder og forbedrer, hvordan du også bruger dem, vil gøre dig til en bedre udvikler.

Tak for læsningen!

Hvis du har dine egne tip, så del venligst! Jeg vil meget gerne høre fra dig her i kommentarerne, på Twitter eller via e-mail.

Hvis du fandt det, du læste, interessant eller nyttigt, er du velkommen til at efterlade et klapp eller to, abonnere på fremtidige opdateringer eller retweet / del denne tweet:?