Ako môžete vylepšiť svoj pracovný postup pomocou konzoly JavaScript

Ako webový vývojár veľmi dobre viete, že je potrebné ladiť váš kód. Na protokoly často používame externé knižnice a v niektorých prípadoch ich formátujeme a / alebo zobrazujeme, ale konzola našich prehľadávačov je oveľa výkonnejšia, ako si myslíme.

Keď premýšľame o konzole, prvá vec, ktorá mi príde na myseľ, že console.log? Existuje však oveľa viac metód ako tých, ktoré si predstavujeme. Teraz uvidíme, ako čo najlepšie využiť konzolu. Dám vám niekoľko rád, ako dosiahnuť, aby boli tieto metódy čitateľnejšie

Čo je to Konzola?

Konzola JavaScript je zabudovanou funkciou moderných prehľadávačov, ktorá je dodávaná s vývojovými nástrojmi priamo v balení v prostredí shell. Umožňuje vývojárovi:

  • Prezrite si denník chýb a varovaní, ktoré sa vyskytujú na webovej stránke.
  • Interakcia s webovou stránkou pomocou príkazov JavaScriptu.
  • Debugujte aplikácie a prechádzajte DOM priamo v prehliadači.
  • Skontrolujte a analyzujte sieťovú aktivitu

V zásade vám umožňuje písať, spravovať a monitorovať JavaScript priamo v prehliadači.

Console.log, Console.error, Console.warn a Console.info

Toto sú pravdepodobne najpoužívanejšie metódy zo všetkých. Týmto metódam môžete odovzdať viac ako jeden parameter. Každý parameter je vyhodnotený a zreťazený v reťazci ohraničenom medzerou, ale v prípade objektov alebo polí môžete prechádzať medzi ich vlastnosťami.

Konzolová skupina

Táto metóda umožňuje zoskupiť sériu console.logs (ale aj informácií o chybách atď.) Do skupiny, ktorú je možné zbaliť. Syntax je naozaj veľmi jednoduchá: stačí zadať všetko, console.logčo chceme zoskupiť pred a console.group()(alebo console.groupCollapsed()ak chceme, aby bolo štandardne zatvorené). Potom console.groupEnd()na koniec pridajte a, aby ste skupinu uzavreli.

Výsledky budú vyzerať takto:

Konzola.tabuľka

Odkedy som zistil, console.tablemôj život sa zmenil. Zobrazenie súborov JSON alebo veľmi veľkých polí JSON vo vnútri a console.logje strašidelný zážitok. console.tableNám umožňuje vizualizovať tieto štruktúry vo vnútri krásne stola, kde môžeme pomenovať stĺpce a odovzdávať ako parametre.

Výsledok je úžasný a veľmi užitočný pri ladení:

Console.count, Console.time a Console.timeEnd

Tieto tri metódy sú švajčiarskym armádnym nožom pre každého vývojára, ktorý potrebuje ladiť. Tieto console.countpočty a výstupy, koľkokrát count()bol vyvolaný na rovnakom riadku a v rovnakom štítku. console.timeSpustí časovač s názvom zadaný ako vstupný parameter, a môže bežať až 10.000 simultánnych časovača na danej stránke. Po console.timeEndspustení pomocou hovoru zastavíme časovač a vytlačíme uplynulý čas do konzoly.

Výstup bude vyzerať takto:

Console.trace a Console.assert

Tieto metódy jednoducho vytlačia stopu zásobníka z miesta, kde bola volaná. Predstavte si, že vytvárate knižnicu JS a chcete informovať používateľa, kde bola chyba vygenerovaná. V takom prípade môžu byť tieto metódy veľmi užitočné. Je console.assertako, console.traceale bude sa tlačiť, iba ak splnená podmienka neprešla.

Ako vidíme, výstup je presne to, čo by nám React (alebo akákoľvek iná knižnica) ukázala, keď vygenerujeme výnimku.

Odstrániť všetky konzoly?

Používanie konzol nás často núti eliminovať. Alebo niekedy zabudneme na produkčné zostavenie (a všimneme si ich len omylom o dni a dni neskôr). Samozrejme nikomu neodporúčam zneužívať konzoly tam, kde to nie je potrebné (konzola v rukoväti vstupu zmeny môže byť vymazaná, keď uvidíte, že to funguje). V vývojovom režime by ste mali nechať protokoly chýb alebo trasovacie protokoly, ktoré vám pomôžu pri ladení. Webpack používam veľa, a to ako v práci, tak aj vo svojich vlastných projektoch. Tento nástroj umožňuje pomocou konzoly uglifyjs-webpack-plugin odstrániť všetky konzoly, ktoré nechcete zostať (podľa typu) z produkčnej zostavy?

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 }, } })] : []}

Konfigurácia je skutočne triviálna a zjednodušuje prácu, takže sa bavte s konzolou (ale nezneužívajte ju!)

Ak sa vám článok páčil prosím tlieskajte a sledujte ma :)

Thx a zostať naladení?

Sledujte moje posledné správy a tipy na Facebooku