Hvordan du kan forbedre din arbejdsgang ved hjælp af JavaScript-konsollen

Som webudvikler ved du meget godt behovet for at fejle din kode. Vi bruger ofte eksterne biblioteker til logfiler og til at formatere og / eller vise dem i nogle tilfælde, men konsollen i vores browsere er meget kraftigere, end vi tror.

Når vi tænker på konsollen, er det første, der kommer til at tænke på console.log, og ikke? Men der er mange flere metoder end dem, vi forestiller os. Nu vil vi se, hvordan du får mest ud af brugen af ​​konsollen, og jeg giver dig nogle tip til at gøre dem disse metoder mere læsbare

Hvad er konsollen?

JavaScript-konsollen er en indbygget funktion i moderne browsere, der leveres med out-of-the-box udviklingsværktøjer i en shell-lignende interface. Det giver en udvikler mulighed for at:

  • Se en log over fejl og advarsler, der opstår på en webside.
  • Interagere med websiden ved hjælp af JavaScript-kommandoer.
  • Fejlfind applikationer og kryds DOM direkte i browseren.
  • Undersøg og analyser netværksaktivitet

Dybest set giver det dig mulighed for at skrive, administrere og overvåge JavaScript lige i din browser.

Console.log, Console.error, Console.warn og Console.info

Disse er sandsynligvis de mest anvendte metoder af alle. Du kan videregive mere end én parameter til disse metoder. Hver parameter evalueres og sammenkædes i en streng afgrænset af rummet, men i tilfælde af objekter eller arrays kan du navigere mellem deres egenskaber.

Console.group

Denne metode giver dig mulighed for at gruppere en række console.logs (men også fejlinfo og så videre) under en gruppe, der kan skjules. Syntaksen er virkelig meget enkel: indtast bare alt det, console.logvi vil gruppere før a console.group()(eller console.groupCollapsed()hvis vi ønsker, at det skal lukkes som standard). Tilføj derefter en console.groupEnd()i slutningen for at lukke gruppen.

Resultaterne vil se sådan ud:

Konsolbord

Siden jeg opdagede, at console.tablemit liv har ændret sig. Visning af JSON eller meget store JSON-arrays inde i en console.loger en skræmmende oplevelse. Det console.tablegiver os mulighed for at visualisere disse strukturer inde i en smuk tabel, hvor vi kan navngive kolonnerne og videregive dem som parametre.

Resultatet er vidunderligt og meget nyttigt i debugging:

Console.count, Console.time og Console.timeEnd

Disse tre metoder er den schweiziske hærkniv til enhver udvikler, der har brug for fejlretning. De console.counttæller og udgange antallet af gange, count()er blevet påberåbt på samme linje og med samme etiket. Den console.timestarter en timer med et navn er angivet som et input parameter, og kan køre op til 10.000 samtidige timere på en given side. Når vi er startet, bruger vi et opkald til console.timeEndat stoppe timeren og udskrive den forløbne tid til konsollen.

Outputtet ser sådan ud:

Console.trace og Console.assert

Disse metoder udskriver simpelthen et stakspor fra det sted, hvor det blev kaldt. Forestil dig, at du opretter et JS-bibliotek og vil informere brugeren, hvor fejlen blev genereret. I så fald kan disse metoder være meget nyttige. Det console.asserter som det, console.tracemen udskrives kun, hvis den godkendte betingelse ikke bestod.

Som vi kan se, er output nøjagtigt det, som React (eller ethvert andet bibliotek) viser os, når vi genererer en undtagelse.

Slet alle konsoller?

Brug af konsoller tvinger os ofte til at fjerne dem. Eller nogle gange glemmer vi produktionsbygningen (og bemærker dem kun ved en fejltagelse dage og dage senere). Naturligvis råder jeg ingen til at misbruge konsoller, hvor de ikke er nødvendige (konsollen i ændringsinputhåndtaget kan slettes, når du ser, at det fungerer). Du skal efterlade fejllogfiler eller spore logfiler i udviklingstilstand for at hjælpe dig med fejlfinding. Jeg bruger Webpack meget, både på arbejde og i mine egne projekter. Dette værktøj giver dig mulighed for at slette alle konsoller, som du ikke ønsker at forblive (efter type) fra produktionsbygningen ved hjælp af uglifyjs-webpack-plugin?

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')var debug = process.env.NODE_ENV !== "production";.....optimization: { minimizer: !debug ? [ new UglifyJsPlugin({ // Compression specific options uglifyOptions: { // Eliminate comments comments: false, compress: { // remove warnings warnings: false, // Drop console statements drop_console: true }, } })] : []}

Konfigurationen er virkelig triviel, og det forenkler arbejdet, så sjov med konsollen (men misbrug den ikke!)

Hvis du kunne lide artiklen, bedes du klappe og følge mig :)

Thx og hold dig opdateret?

Følg mine sidste nyheder og tip på Facebook