Odpravljanje napak v JavaScript: Prijava v konzolo brskalnika

Odpravljanje napak v JavaScript: Prijava v konzolo brskalnika

Konzola spletnega brskalnika je eno najpogosteje uporabljenih orodij za odpravljanje napak v sprednjih aplikacijah. API Console ponuja razvijalcem možnost reševanja napak in sporočil v dnevnikih.





console.log () je verjetno najpogosteje uporabljena metoda v API -ju konzole, vendar obstajajo tudi druge metode, ki jih lahko uporabite v svojem toku dela. Ta priročnik prikazuje različne načine konzole spletnega brskalnika, ki jih lahko uporabite za izboljšanje poteka dela za odpravljanje napak.



Zakaj je beleženje pomembno?

Prijava v konzolo spletnega brskalnika je eden najboljših načinov za odpravljanje napak v sprednjih aplikacijah ali aplikacijah, ki temeljijo na JavaScript.





Sorodno: 6 ogrodja JavaScript, vrednega učenja

Večina sodobnih spletnih brskalnikov podpira API Console, zaradi česar je ta na voljo razvijalcem. Objekt ukazne mize je odgovoren za dostop do konzole za odpravljanje napak brskalnika. Izvedba je lahko različna v vseh brskalnikih, vendar bo večina metod delovala v vseh sodobnih brskalnikih.



Nasvet : Vaša konzola brskalnika lahko izvaja vso kodo, opisano v tem priročniku. Pritisnite F12 na tipkovnici, da odprete orodja razvijalcev brskalnika v Chromu ali Firefoxu.

Zapisovanje nizov sporočil

Ena najpogostejših konzolnih metod je console.log () . Preprosto odda nizovno sporočilo ali neko vrednost na spletno konzolo. Za preproste vrednosti ali nizovna sporočila je console.log () metoda je verjetno najboljša možnost za uporabo.



kako povezati wii na tv s hdmi

Za izpis a Pozdravljen, svet sporočilo, lahko uporabite naslednje.

console.log(`Hello World`);

Še ena posebnost console.log () metoda je možnost tiskanja izhodnih podatkov elementov DOM ali strukture dela spletnega mesta, na primer za prikaz strukture elementa body in vse, kar je v njem, uporablja naslednje.



console.log(document.body)

Izhod je zbirka elementov DOM kot drevo HTML.

Zapisovanje interaktivnih predmetov JavaScript

The console.dir () se uporablja za beleženje interaktivnih lastnosti objektov JavaScript. Z njim lahko na primer ogledate elemente DOM na spletni strani.

Tipičen izhod console.dir () metoda je sestavljena iz vseh lastnosti podanega predmeta JavaScript v obliki JSON. S spodnjo metodo natisnite lastnosti vseh elementov v telesu strani HTML:

console.dir(document.body)

Vrednotenje izrazov

Morda ste seznanjeni z uveljavljalnimi metodami iz testiranja enot - no console.assert () metoda deluje na podoben način. Uporabi console.assert () metoda za ovrednotenje izraza ali stanja.

Ko metoda uveljavljanja ne uspe, konzola natisne sporočilo o napaki; drugače ne tiska nič. S spodnjo kodo ocenite, ali je starost osebe večja od 18 let:

let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';

console.assert( yourAge > ageLimit, assertFailMessage);

Zgornja trditev ne uspe in ustrezno se natisne sporočilo o napaki.

Zapisovanje podatkov v tabelah

Uporabi console.table () način prikaza podatkov v obliki tabele. Dobri kandidati za prikaz v obliki tabele vključujejo matrike ali podatke o objektu.

Opomba : Nekateri brskalniki, na primer Firefox, imajo največ 1000 omejitev, ki jih je mogoče prikazati z console.table () metoda.

Ob predpostavki, da imate naslednjo paleto avtomobilskih predmetov:

let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
]

Zgornji niz lahko prikažete v tabeli po spodnji metodi:

console.table(cars);

Zapisovanje sporočil po kategorijah

Sporočila konzole spletnega brskalnika so večinoma razvrščena v tri skupine: napake, opozorila in informacije.

Napake

Če želite na konzolo natisniti sporočila o napakah s pomočjo console.error () način, so sporočila o napakah prikazana z rdečo pisavo.

console.error('error message');

Opozorila

Za tiskanje opozoril uporabite naslednje. Kot pri večini scenarijev so opozorilna sporočila prikazana oranžno:

console.warn('warning message');

Informacije

Če želite natisniti splošne informacije na konzolo, uporabite console.info () metoda:

console.info('general info message')

Sporočila v konzoli brskalnika je enostavno filtrirati ali najti, če so pravilno kategorizirana.

Sledenje toku programa

Uporabi console.trace () način tiskanja sledi sklada toka ali izvajanja programa. To je zelo uporabna funkcija za odpravljanje napak, ker natisne vrstni red, v katerem se funkcije izvajajo v vašem programu.

Če si želite ogledati console.trace () metoda v akciji, lahko ustvarite tri funkcije (kot je prikazano spodaj) in v eno od funkcij postavite sled sklada.

function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}

V konzoli brskalnika pokličite ali sprožite functionOne () in dobili boste sled skladov klicev funkcij, natisnjenih v vrstnem redu Last In First Out (LIFO), ker je to sklad.

Časovna izvedba programa

Če želite časovno določiti, kako dolgo traja operacija v vašem programu, lahko uporabite console.time () metoda. console.time () se običajno uporablja skupaj z console.timeEnd () način, pri katerem se slednji uporablja za izklop časovnika.

Na eni strani lahko imate do 10.000 časovnikov, kar poudarja pomen pravilnega označevanja časovnikov.

Če želite meriti, koliko časa for zanka preide skozi številke od 1 do 50.000, lahko uporabite časovnik na naslednji način.

console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');

Štetje

The console.count () metoda se uporablja za spremljanje, kolikokrat je bila v programu poklicana funkcija ali kakšen del kode. Na primer, lahko sledimo številu izvedb zanke for na naslednji način:

for(i=0; i<4; i++ ){
console.count();
}

Združevanje dnevniških sporočil

Tako kot metoda časovnika, console.group () , in console.groupEnd () metode se običajno uporabljajo v parih.

Skupinska metoda vam pomaga bolje organizirati sporočila dnevnika. Na primer, lahko ustvarimo skupino opozorilnih sporočil z opozorili na oznaki, kot sledi.

console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()

Dva sporočila znotraj opozorilne skupine sta vizualno kategorizirana, kot je razvidno iz spodnjega izhoda.

Brisanje konzole

In nenazadnje, tukaj je več načinov, kako lahko počistite sporočila dnevnika v konzoli brskalnika.

Uporabi console.clear () metodo na naslednji način.

console.clear()

Konzolo brskalnika lahko počistite tudi z bližnjicami na tipkovnici brskalnika.

Google Chrome : Ctrl + L

Firefox : Ctrl + Shift + L

Dokončanje uporabe konzole brskalnika

Ta priročnik vam je pokazal nekaj različnih razpoložljivih načinov konzole spletnega brskalnika, ki vam pomagajo pri odpravljanju napak v vmesnih aplikacijah. API za konzolo je zelo lahek, enostaven za učenje in široko podprt v večini sodobnih brskalnikov.

kraji za namestitev zaslona iphone v moji bližini

Naredite potrditev CAPTCHA pri svojem naslednjem projektu in preizkusite svoje nove sposobnosti odpravljanja napak!

Deliti Deliti Cvrkutati E-naslov Ustvarite obrazec za preverjanje CAPTCHA z uporabo HTML, CSS in JavaScript

Zaščitite svoja spletna mesta s preverjanjem CAPTCHA.

Preberite Naprej Sorodne teme
  • Programiranje
  • Spletni razvoj
  • JavaScript
O avtorju Dobro za iti(36 objavljenih člankov)

Mwiza po poklicu razvija programsko opremo in veliko piše o Linuxu in vmesnem programiranju. Nekateri njegovi interesi vključujejo zgodovino, ekonomijo, politiko in arhitekturo podjetja.

Več od Mwize Kumwenda

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, če se želite naročiti