Home-theater-designers
Žiniatinklio naršyklės pultas yra vienas iš plačiausiai naudojamų įrankių priekinių programų derinimui. „Console“ API suteikia kūrėjams galimybę spręsti klaidas ir registruoti pranešimus.
console.log () yra turbūt dažniausiai naudojamas „Console“ API metodas, tačiau yra ir kitų metodų, kuriuos galite naudoti savo darbo eigoje. Šiame vadove pateikiami įvairūs žiniatinklio naršyklės konsolės metodai, kuriuos galite naudoti, kad pagerintumėte derinimo darbo eigą.
Kodėl registravimas yra svarbus?
Prisijungimas prie žiniatinklio naršyklės konsolės yra vienas iš geriausių būdų, kaip derinti priekines ar „JavaScript“ pagrįstas programas.
Susiję: 6 „JavaScript“ rėmai, kuriuos verta išmokti
Dauguma šiuolaikinių žiniatinklio naršyklių palaiko „Console“ API, todėl kūrėjai ją lengvai pasiekia. Konsolės objektas yra atsakingas už prieigos prie naršyklės derinimo pulto suteikimą. Įdiegimas gali skirtis įvairiose naršyklėse, tačiau dauguma metodų veiks visose šiuolaikinėse naršyklėse.
Patarimas : Jūsų naršyklės pultas gali paleisti visus šiame vadove aptartus kodus. Paspauskite F12 klaviatūroje, kad atidarytumėte naršyklės kūrėjų įrankius „Chrome“ arba „Firefox“.
Eilinių pranešimų registravimas
Vienas iš labiausiai paplitusių konsolės metodų yra console.log () . Jis tiesiog pateikia žiniatinklio pultui eilutės pranešimą ar tam tikrą vertę. Paprastoms vertėms ar eilutiniams pranešimams, console.log () metodas yra turbūt geriausias pasirinkimas.
„Apple iPhone“ įstrigo ant „Apple“ logotipo
Norėdami išvesti a Labas pasauli pranešimą, galite naudoti šiuos dalykus.
console.log(`Hello World`); Kitas ypatingas bruožas console.log () metodas yra galimybė atspausdinti DOM elementų išvestį arba svetainės dalies struktūrą, pavyzdžiui, norint išvesti kūno elemento struktūrą ir viską, kas yra jo viduje, naudokite šiuos dalykus.
console.log(document.body) Išvestis yra DOM elementų rinkinys kaip HTML medis.
Interaktyvių „JavaScript“ objektų registravimas
The console.dir () metodas naudojamas registruojant „JavaScript“ objektų interaktyvias savybes. Pavyzdžiui, galite jį naudoti norėdami peržiūrėti tinklalapio DOM elementus.
Tipiškas išėjimas console.dir () metodą sudaro visos nurodyto „JavaScript“ objekto ypatybės JSON formatu. Naudokite toliau nurodytą metodą, kad išspausdintumėte visų HTML puslapio turinio elementų savybes:
console.dir(document.body) Išraiškų vertinimas
Galbūt esate susipažinęs su tvirtinimo metodais iš vieneto testavimo - gerai console.assert () metodas veikia panašiai. Naudoti console.assert () išraiškos ar sąlygos įvertinimo metodas.
Kai tvirtinimo metodas nepavyksta, konsolė išspausdina klaidos pranešimą; kitu atveju jis nieko nespausdina. Naudokite žemiau esantį kodą, kad įvertintumėte, ar asmens amžius yra didesnis nei 18 metų:
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';
console.assert( yourAge > ageLimit, assertFailMessage); Aukščiau pateiktas teiginys nepavyksta ir atitinkamai išspausdinamas klaidos pranešimas.
Duomenų registravimas lentelėse
Naudoti console.table () metodas rodyti duomenis lentelės formatu. Geri kandidatai, pateikiami lentelės pavidalu, apima masyvus arba objektų duomenis.
Pastaba : Kai kuriose naršyklėse, pvz., „Firefox“, yra ne daugiau kaip 1 000 eilučių, kurias galima rodyti naudojant console.table () metodas.
Darant prielaidą, kad turite tokį automobilių objektų masyvą:
let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
] Aukščiau esantį masyvą galite parodyti lentelėje, naudodami toliau nurodytą metodą.
console.table(cars); Pranešimų registravimas pagal kategorijas
Žiniatinklio naršyklės konsolės pranešimai dažniausiai skirstomi į tris grupes: klaida, įspėjimas ir informacija.
Klaidos
Norėdami specialiai spausdinti klaidų pranešimus į konsolę naudodami console.error () metodas, su klaidomis susiję pranešimai rodomi raudonu šriftu.
console.error('error message'); Įspėjimai
Norėdami išspausdinti įspėjimus, naudokite šiuos nurodymus. Kaip ir daugelyje scenarijų, įspėjamieji pranešimai rodomi oranžine spalva:
console.warn('warning message');Informacija
Norėdami spausdinti bendrą informaciją į konsolę, naudokite console.info () metodas:
console.info('general info message') Nesunku filtruoti arba rasti pranešimus naršyklės pulte, kai jie tinkamai suskirstyti į kategorijas.
Programos sekimo sekimas
Naudoti console.trace () būdas spausdinti programos srauto ar vykdymo pėdsaką. Tai labai naudinga derinimo funkcija, nes ji spausdina jūsų programoje vykdomų funkcijų tvarką.
Norėdami pamatyti console.trace () veikiant metodui, galite sukurti tris funkcijas (kaip parodyta žemiau) ir įdėti kamino pėdsaką į vieną iš funkcijų.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}Naršyklės pulte skambinkite arba suaktyvinkite functionOne () ir gausite funkcijų iškvietimų pėdsaką, atspausdintą paskutinio užsakymo tvarka (LIFO), nes tai yra krūva.
Laiko programos vykdymas
Norėdami nustatyti, kiek laiko operacija vykdoma jūsų programoje, galite naudoti console.time () metodas. console.time () paprastai naudojamas kartu su console.timeEnd () metodas, kai pastarasis naudojamas laikmačiui baigti.
Viename tinklalapyje galite paleisti iki 10 000 laikmačių, pabrėždami, kaip svarbu tinkamai pažymėti laikmačius.
Norėdami nustatyti, kiek laiko ciklui praeiti per skaičius nuo 1 iki 50 000, galite naudoti laikmatį taip.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
Skaičiavimas
The console.count () metodas naudojamas sekti, kiek kartų programoje buvo iškviesta funkcija ar tam tikras kodo fragmentas. Pavyzdžiui, galime sekti, kiek kartų ciklas buvo įvykdytas taip:
for(i=0; i<4; i++ ){
console.count();
}Žurnalo pranešimų grupavimas
Kaip ir laikmačio metodas, console.group () , ir console.groupEnd () metodai dažniausiai naudojami poromis.
Grupės metodas padeda geriau organizuoti žurnalo pranešimus. Pavyzdžiui, mes galime sukurti įspėjamųjų pranešimų grupę su etiketės įspėjimais taip.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()Du įspėjimų grupės pranešimai yra vizualiai suskirstyti į kategorijas, kaip parodyta žemiau esančiame išėjime.
Konsolės išvalymas
Paskutinis, bet ne mažiau svarbus dalykas yra keli būdai, kuriais galite išvalyti žurnalo pranešimus naršyklės konsolėje.
Naudoti console.clear () metodą taip.
console.clear() Taip pat galite išvalyti naršyklės konsolę naudodami naršyklės sparčiuosius klavišus.
„Google Chrome“ : „Ctrl“ + L.
„Firefox“ : „Ctrl“ + „Shift“ + L.
Visiškai naudojant naršyklės konsolę
Šiame vadove buvo parodyti keli galimi žiniatinklio naršyklės konsolės metodai, padedantys derinti priekines programas. Konsolės API yra labai lengva, lengvai išmokstama ir plačiai palaikoma daugelyje šiuolaikinių naršyklių.
Geriausi nešiojamieji kompiuteriai vaizdo redagavimui 2015 m
Padarykite savo kito projekto CAPTCHA patvirtinimo formą ir išbandykite naujus derinimo įgūdžius!
Dalintis Dalintis „Tweet“ Paštu Sukurkite CAPTCHA patvirtinimo formą naudodami HTML, CSS ir „JavaScript“Apsaugokite savo svetaines naudodami CAPTCHA patvirtinimą.
Skaityti toliau Susijusios temos- Programavimas
- Interneto svetainių kūrimas
- „JavaScript“
„Mwiza“ kuria programinę įrangą pagal profesiją ir daug rašo „Linux“ ir priekinio planavimo programomis. Kai kurie jo interesai apima istoriją, ekonomiką, politiką ir įmonių architektūrą.
Daugiau iš Mwiza KumwendaPrenumeruokite mūsų naujienlaiškį
Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!
Norėdami užsiprenumeruoti, spustelėkite čia