Konzola web preglednika jedan je od najčešće korištenih alata za ispravljanje pogrešaka u aplikacijama s prednjeg kraja. API za konzolu pruža programerima mogućnost rješavanja pogrešaka i poruka dnevnika.
console.log () vjerojatno je najčešće korištena metoda u API -ju konzole, ali postoje i druge metode koje možete koristiti u svom tijeku rada. Ovaj vodič prikazuje različite metode konzole web preglednika koje možete koristiti za poboljšanje tijeka rada za ispravljanje pogrešaka.
Zašto je bilježenje važno?
Prijavljivanje na konzolu web preglednika jedna je od najboljih metoda za ispravljanje pogrešaka u aplikacijama na prednjoj strani ili JavaScriptu.
Povezano: 6 JavaScript okvira vrijednih učenja
Većina modernih web preglednika podržava API konzole, što ga čini lako dostupnim programerima. Objekt konzole odgovoran je za omogućavanje pristupa konzoli za otklanjanje pogrešaka preglednika. Implementacija se može razlikovati u preglednicima, ali većina metoda funkcionira u svim modernim preglednicima.
Savjet : Konzola vašeg preglednika može pokrenuti sav kôd opisan u ovom vodiču. Pritisnite F12 na tipkovnici za otvaranje alata programera preglednika u Chromeu ili Firefoxu.
Zapisivanje nizova poruka
Jedna od najčešćih metoda konzole je console.log () . Jednostavno šalje niz poruku ili neku vrijednost na web konzolu. Za jednostavne vrijednosti ili nizove poruka, console.log () metoda je vjerojatno najbolja opcija za korištenje.
facebook dvofaktorska autentifikacija bez telefonskog broja
Za izlaz a Pozdrav svijete poruku, možete koristiti sljedeće.
console.log(`Hello World`);
Još jedna posebna značajka console.log () metoda je mogućnost ispisivanja izlaza DOM elemenata ili strukture dijela web stranice, na primjer, za ispisivanje strukture elementa body i svega unutar njega koristi se sljedeće.
console.log(document.body)
Izlaz je zbirka DOM elemenata kao HTML stablo.
Zapisivanje interaktivnih JavaScript objekata
The console.dir () Metoda se koristi za bilježenje interaktivnih svojstava JavaScript objekata. Na primjer, možete ga koristiti za pregled DOM elemenata na web stranici.
Tipičan izlaz console.dir () metoda se sastoji od svih svojstava navedenog JavaScript objekta u JSON formatu. Koristite donju metodu za ispis svojstava svih elemenata u tijelu HTML stranice:
console.dir(document.body)
Vrednovanje izraza
Možda ste upoznati s metodama tvrđenja iz jediničnog testiranja - pa console.assert () metoda djeluje na sličan način. Koristiti console.assert () metoda za procjenu izraza ili stanja.
Kad metoda assert ne uspije, konzola ispisuje poruku o pogrešci; inače ništa ne ispisuje. Pomoću donjeg koda procijenite je li dob osobe veća od 18 godina:
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';
console.assert( yourAge > ageLimit, assertFailMessage);
Gornja tvrdnja ne uspijeva i prema tome se ispisuje poruka o pogrešci.
Zapisivanje podataka u tablice
Koristiti console.table () način prikaza podataka u tabličnom obliku. Dobri kandidati za prikaz u obliku tablice uključuju nizove ili podatke o objektima.
Bilješka : Neki preglednici, poput Firefoxa, imaju maksimalno ograničenje od 1.000 redaka koje se može prikazati s console.table () metoda.
Pod pretpostavkom da imate sljedeći niz objekata automobila:
let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
]
Gornji niz možete prikazati u tablici koristeći donju metodu:
console.table(cars);
Zapisivanje poruka prema kategoriji
Poruke konzole web preglednika uglavnom su kategorizirane u tri grupe: pogreške, upozorenja i informacije.
Pogreške
Za posebno ispisivanje poruka o pogrešci na konzolu pomoću console.error () metoda, poruke o greškama prikazuju se crvenim fontom.
console.error('error message');
Upozorenja
Za ispis upozorenja upotrijebite sljedeće. Kao i u većini scenarija, poruke upozorenja prikazane su narančastom bojom:
console.warn('warning message');
Info
Za ispis općih informacija na konzolu upotrijebite console.info () metoda:
console.info('general info message')
Lako je filtrirati ili pronaći poruke u konzoli preglednika ako su pravilno kategorizirane.
Praćenje tijeka programa
Koristiti console.trace () način ispisivanja traga steka tijeka ili izvođenja programa. Ovo je vrlo korisna značajka za ispravljanje pogrešaka jer ispisuje redoslijed izvršavanja funkcija u vašem programu.
Da biste vidjeli console.trace () metodom na djelu, možete stvoriti tri funkcije (prema dolje) i postaviti trag steka u jednu od funkcija.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}
U konzoli preglednika pozovite ili aktivirajte functionOne () i dobit ćete trag steka poziva funkcija ispisanih u Last In First Out Order (LIFO) jer je to hrpa.
Vremenski rok izvođenja programa
Da biste odredili vrijeme potrebno za izvršavanje operacije u vašem programu, možete koristiti console.time () metoda. console.time () obično se koristi zajedno s console.timeEnd () metoda gdje se potonji koristi za prekid mjerača vremena.
Po jednoj web stranici možete pokrenuti do 10.000 mjerača vremena, što naglašava važnost pravilnog označavanja mjerača vremena.
Da biste odredili koliko vremena for petlji treba da prođe kroz brojeve od 1 do 50.000, možete koristiti mjerač vremena na sljedeći način.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
Brojanje
The console.count () metoda se koristi za praćenje broja poziva funkcije ili nekog dijela koda u programu. Na primjer, možemo pratiti broj izvršavanja for petlje na sljedeći način:
for(i=0; i<4; i++ ){
console.count();
}
Grupiranje poruka dnevnika
Baš kao i mjerač vremena, console.group () , i console.groupEnd () metode se obično koriste u parovima.
Metoda grupe pomaže vam u boljem organiziranju poruka dnevnika. Na primjer, možemo stvoriti grupu poruka upozorenja s upozorenjima naljepnice na sljedeći način.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()
Dvije poruke unutar grupe upozorenja vizualno su kategorizirane kako se vidi u donjem ispisu.
Brisanje konzole
Na kraju, ali ne i najmanje važno, evo nekoliko načina na koje možete izbrisati poruke dnevnika na konzoli preglednika.
Koristiti console.clear () metodu kako slijedi.
console.clear()
Također možete izbrisati konzolu preglednika pomoću prečaca na tipkovnici preglednika.
Google Chrome : Ctrl + L
Firefox : Ctrl + Shift + L
Upotreba Konzole preglednika do kraja
Ovaj vodič vam je pokazao neke od različitih dostupnih metoda konzole web preglednika koje će vam pomoći u otklanjanju pogrešaka u aplikacijama s prednjeg kraja. API konzole je vrlo lagan, jednostavan za učenje i široko podržan u većini modernih preglednika.
kako deinstalirati skype za posao
Učinite CAPTCHA provjeru valjanosti za svoj sljedeći projekt i isprobajte svoje nove vještine otklanjanja pogrešaka!
Udio Udio Cvrkut E -pošta Izradite CAPTCHA obrazac za provjeru valjanosti koristeći HTML, CSS i JavaScriptOsigurajte svoje web stranice pomoću CAPTCHA provjere valjanosti.
Pročitajte Dalje Povezane teme- Programiranje
- Web razvoj
- JavaScript
Mwiza razvija softver po struci i opsežno piše o Linuxu i front-end programiranju. Neki od njegovih interesa uključuju povijest, ekonomiju, politiku i arhitekturu poduzeća.
Više od Mwize KumwendePretplatite se na naše obavijesti
Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!
Kliknite ovdje za pretplatu