Otklanjanje pogrešaka u JavaScriptu: Prijava na konzolu preglednika

Otklanjanje pogrešaka u JavaScriptu: Prijava na konzolu preglednika

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 JavaScript

Osigurajte svoje web stranice pomoću CAPTCHA provjere valjanosti.

Pročitajte Dalje
Povezane teme
  • Programiranje
  • Web razvoj
  • JavaScript
O autoru Dobro krenuti(36 objavljenih članaka)

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 Kumwende

Pretplatite 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