Kao web programer vrlo dobro znate potrebu za otklanjanjem pogrešaka u kodu. Često koristimo vanjske knjižnice za zapisnike te ih u nekim slučajevima formatiramo i / ili prikazujemo, ali konzola naših preglednika puno je moćnija nego što mislimo.
Kad pomislimo na konzolu, prvo što mi padne na pamet i što console.log, zar ne? Ali postoji mnogo više metoda od onih koje zamišljamo. Sad ćemo vidjeti kako najbolje iskoristiti konzolu i dat ću vam nekoliko savjeta kako bi ove metode učinili čitljivijima
Što je konzola?
JavaScript konzola ugrađena je značajka u modernim preglednicima koja dolazi s izvanrednim razvojnim alatima u sučelju nalik ljusci. Omogućuje programeru da:
- Pregledajte dnevnik pogrešaka i upozorenja koji se javljaju na web stranici.
- Interakcija s web stranicom pomoću JavaScript naredbi.
- Otklonite pogreške u programima i pređite DOM izravno u pregledniku.
- Pregledajte i analizirajte mrežne aktivnosti
U osnovi, omogućuje vam pisanje, upravljanje i nadgledanje JavaScripta izravno u vašem pregledniku.
Console.log, Console.error, Console.warn i Console.info
To su vjerojatno najčešće korištene metode od svih. Ovim metodama možete proslijediti više parametara. Svaki se parametar procjenjuje i spaja u niz razgraničen razmakom, ali u slučaju objekata ili polja možete se kretati između njihovih svojstava.
Konzola.grupa
Ova metoda omogućuje vam grupiranje niza console.logs (ali i informacija o pogreškama itd.) U grupu koja se može sažeti. Sintaksa je zaista vrlo jednostavna: samo unesite sve console.logšto želimo grupirati prije console.group()(ili console.groupCollapsed()ako želimo da se prema zadanim postavkama zatvori). Zatim dodajte a console.groupEnd()na kraju da zatvorite grupu.
Rezultati će izgledati ovako:
Konzola.stol
Otkad sam otkrio da se console.tablemoj život promijenio. Prikazivanje JSON-a ili vrlo velikih JSON-ovih nizova unutar console.loga zastrašujuće je iskustvo. console.tableOmogućuje nam da vizualizirati ove strukture unutar lijepe stola gdje možemo imenovati stupce i uputiti ga kao parametara.
Rezultat je prekrasan i vrlo koristan u otklanjanju pogrešaka:
Console.count, Console.time i Console.timeEnd
Ove su tri metode švicarski vojni nož za svakog programera koji treba ispraviti pogreške. U console.countbroji i izlazi je broj puta da count()se poziva na istoj liniji i sa istom oznakom. console.timePokreće brojač s imenom naveden kao ulazni parametar, a može izvoditi i do 10.000 istovremenih vremena na određenoj stranici. Jednom pokrenut, koristimo poziv za console.timeEndzaustavljanje odbrojavanja i ispis proteklog vremena na konzolu.
Izlaz će izgledati ovako:
Console.trace i Console.assert
Ove metode jednostavno ispisuju trag stoga od točke na kojoj je pozvan. Zamislite da kreirate JS biblioteku i želite obavijestiti korisnika gdje je generirana pogreška. U tom slučaju ove metode mogu biti vrlo korisne. Is console.assertje poput, console.traceali ispisat će se samo ako proslijeđeni uvjet nije prošao.
Kao što vidimo, izlaz je točno ono što bi nam React (ili bilo koja druga knjižnica) pokazao kada generiramo iznimku.
Izbrisati sve konzole?
Korištenje konzola često nas prisiljava da ih eliminiramo. Ili ponekad zaboravimo na izradu proizvodnje (i samo ih danima i danima kasnije primijetimo pogreškom). Naravno, ne savjetujem nikome da zloupotrebljava konzole tamo gdje nisu potrebne (konzola u ručki za unos promjene može se izbrisati nakon što vidite da to radi). Trebali biste ostaviti zapisnike pogrešaka ili zapisnike praćenja u načinu rada koji će vam pomoći u uklanjanju pogrešaka. Puno koristim Webpack, kako na poslu, tako i u vlastitim projektima. Ovaj vam alat omogućuje brisanje svih konzola za koje ne želite da ostanu (po vrsti) iz proizvodne gradnje pomoću dodatka 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 }, } })] : []}Konfiguracija je doista trivijalna i pojednostavljuje rad, pa se zabavite s konzolom (ali nemojte je zloupotrijebiti!)
Ako vam se svidio članak, pljeskajte i slijedite me :)Thx i pratite nas?
Slijedite moje posljednje vijesti i savjete na Facebooku