Silumine JavaScriptis: sisselogimine brauserikonsooli

Veebibrauseri konsool on üks laialdasemalt kasutatavaid tööriistu kasutajaliidese silumiseks. Konsooli API annab arendajatele võimaluse vigadega tegeleda ja sõnumeid logida.

console.log () on ilmselt Console API -s kõige sagedamini kasutatav meetod, kuid on ka teisi meetodeid, mida saate oma töövoos kasutada. See juhend näitab teile erinevaid veebibrauseri konsooli meetodeid, mida saate silumise töövoo täiustamiseks kasutada.

Miks on logimine oluline?

Veebibrauseri konsooli sisselogimine on üks parimaid viise kasutajaliidese või JavaScripti-põhiste rakenduste silumiseks.

Seotud: 6 JavaScripti raamistikku, mida tasub õppida

Enamik kaasaegseid veebibrausereid toetab konsooli API -d, muutes selle arendajatele hõlpsasti kättesaadavaks. Konsooli objekt vastutab juurdepääsu tagamise eest brauseri silumiskonsoolile. Rakendus võib brauserites olla erinev, kuid enamik meetodeid töötab kõigis kaasaegsetes brauserites.

Nõuanne : Teie brauserikonsool võib käivitada kogu selles juhendis käsitletud koodi. Vajutage F12 brauseri arendajate tööriistade avamiseks Chrome'is või Firefoxis.

Stringisõnumite logimine

Üks levinumaid konsoolimeetodeid on console.log () . See lihtsalt väljastab veebikonsoolile stringisõnumi või mõne väärtuse. Lihtsate väärtuste või stringisõnumite puhul console.log () meetod on ilmselt parim valik.

kas oinapulgad peavad sobima

Väljundiks a Tere, Maailm saate kasutada järgmist.

console.log(`Hello World`);

Veel üks eripära console.log () meetod on võimalus printida DOM -elementide väljund või veebisaidi osa struktuur, näiteks väljastada kehaelemendi struktuur ja kõik selle sees olev, kasutades järgmist.

console.log(document.body)

Väljundiks on DOM -elementide kogum HTML -puuna.

Interaktiivsete JavaScripti objektide logimine

The console.dir () meetodit kasutatakse JavaScripti objektide interaktiivsete omaduste logimiseks. Näiteks saate seda kasutada veebisaidi DOM -elementide vaatamiseks.

Tüüpiline väljund console.dir () meetod sisaldab kõiki JavaScripti objekti omadusi JSON -vormingus. HTML -lehe põhiosa kõigi elementide atribuutide printimiseks kasutage allolevat meetodit.

console.dir(document.body)

Väljendite hindamine

Võib -olla olete tuttav üksuste testimise kinnitusmeetoditega - hästi console.assert () meetod töötab sarnaselt. Kasuta console.assert () meetod avaldise või tingimuse hindamiseks.

Kui kinnitusmeetod ebaõnnestub, prindib konsool välja veateate; muidu ei prindi see midagi. Kasutage allolevat koodi, et hinnata, kas inimese vanus on suurem kui 18:

let ageLimit = 18;  
let yourAge = 12;  
const assertFailMessage = 'You have to be older than 18 years of age';  
  
console.assert( yourAge > ageLimit, assertFailMessage);

Ülaltoodud kinnitus ebaõnnestub ja veateade prinditakse vastavalt välja.

Andmete logimine tabelitesse

Kasuta console.table () meetod andmete kuvamiseks tabelivormingus. Head kandidaadid tabeli kujul kuvamiseks hõlmavad massiive või objekti andmeid.

Märge : Mõnel brauseril, näiteks Firefoxil, on maksimaalselt 1000 rida, mida saab kuvada koos console.table () meetod.

Eeldades, et teil on järgmine autoobjektide hulk:

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

Saate ülaltoodud massiivi tabelis kuvada, kasutades järgmist meetodit.

console.table(cars);

Sõnumite logimine kategooriate kaupa

Veebibrauseri konsooli sõnumid liigitatakse peamiselt kolme rühma: viga, hoiatus ja teave.

Vead

Veateadete printimiseks konsooli kasutades spetsiaalselt console.error () meetod, kuvatakse veateated punase kirjaga.

console.error('error message');

Hoiatused

Hoiatuste printimiseks kasutage järgmist. Nagu enamiku stsenaariumide puhul, kuvatakse hoiatusteated oranžina:

console.warn('warning message');

Info

Konsooli üldteabe printimiseks kasutage console.info () meetod:

console.info('general info message')

Kui sõnumid on õigesti liigitatud, on neid lihtne filtreerida või brauseri konsoolist leida.

Programmi voo jälgimine

Kasuta console.trace () meetod programmi voo või täitmise virnajälje printimiseks. See on silumiseks väga kasulik funktsioon, kuna see prindib teie programmis funktsioonide täitmise järjekorra.

Et näha console.trace () meetodil, saate luua kolm funktsiooni (nagu allpool) ja asetada virnajälje ühte funktsiooni.

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

Helistage või käivitage brauseri konsoolis functionOne () ja saate funktsioonikõnede virnajälje, mis on trükitud viimases esimeses tellimuses (LIFO), kuna see on virn.

Ajastusprogrammi täitmine

Kui soovite määrata, kui kaua toiming teie programmis kulub, saate kasutada console.time () meetod. console.time () kasutatakse tavaliselt koos console.timeEnd () meetod, kus viimast kasutatakse taimeri lõpetamiseks.

Veebilehe kohta võib töötada kuni 10 000 taimerit, mis rõhutab taimerite õige sildistamise tähtsust.

Aja määramiseks, kui kaua kulub for -tsüklil numbrite 1 kuni 50 000 läbimiseks, saate taimerit kasutada järgmiselt.

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

Loendamine

The console.count () meetodit kasutatakse selleks, et jälgida, mitu korda programmis funktsiooni või mõnda kooditükki kutsuti. Näiteks saame jälgida, mitu korda a -tsükkel on käivitatud järgmiselt.

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

Logisõnumite rühmitamine

Täpselt nagu taimerimeetod, console.group () ja console.groupEnd () meetodeid kasutatakse tavaliselt paarikaupa.

Grupimeetod aitab teil logisõnumeid paremini korraldada. Näiteks saame luua hoiatusteadete rühma koos siltide hoiatustega järgmiselt.

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

Hoiatusrühma kaks teadet liigitatakse visuaalselt vastavalt allolevale väljundile.

Konsooli tühjendamine

Viimaseks, kuid mitte vähem tähtsaks, siin on mitu võimalust, kuidas oma brauserikonsoolis logisõnumeid kustutada.

Kasuta console.clear () meetodit järgmiselt.

console.clear()

Brauserikonsooli saate kustutada ka brauseri klaviatuuri otseteede abil.

Google Chrome : Ctrl + L

Firefox : Ctrl + Tõstuklahv + L

Brauserikonsooli täielik kasutamine

See juhend on näidanud teile mõningaid erinevaid saadaolevaid veebibrauseri konsooli meetodeid, mis aitavad teil esiprogramme siluda. Konsooli API on väga kerge, seda on lihtne õppida ja seda toetatakse laialdaselt enamikus kaasaegsetes brauserites.

kuidas muuta rockstari sotsiaalse klubi nime

Tehke oma järgmiseks projektiks CAPTCHA valideerimisvorm ja pange oma uued silumisoskused proovile!

Jaga Jaga Piiksuma E -post Looge CAPTCHA valideerimisvorm, kasutades HTML -i, CSS -i ja JavaScripti

Kaitske oma veebisaite CAPTCHA valideerimisega.

Loe edasi Seotud teemad

Programmeerimine
Veebiarendus
JavaScript

Autori kohta Valmis(36 artiklit avaldatud)

Mwiza arendab tarkvara erialalt ja kirjutab laialdaselt Linuxis ja esiprogrammeerimises. Mõned tema huvid hõlmavad ajalugu, majandust, poliitikat ja ettevõtlusarhitektuuri.

Veel Mwiza Kumwendalt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin