Virheenkorjaus JavaScriptissä: Kirjautuminen selainkonsoliin

Selainkonsoli on yksi laajimmin käytetyistä työkaluista käyttöliittymien virheenkorjaukseen. Konsolin sovellusliittymä tarjoaa kehittäjille mahdollisuuden puuttua virheisiin ja lokiviesteihin.

console.log () on luultavasti yleisimmin käytetty menetelmä konsolin sovellusliittymässä, mutta on myös muita menetelmiä, joita voit käyttää työnkulussa. Tämä opas näyttää eri selainkonsolimenetelmät, joita voit käyttää virheenkorjauksen työnkulun parantamiseen.

Miksi kirjaaminen on tärkeää?

Kirjautuminen verkkoselainkonsoliin on yksi parhaista menetelmistä etu- tai JavaScript-pohjaisten sovellusten vianetsintään.

Aiheeseen liittyviä: 6 oppimisen arvoista JavaScript -kehystä

Useimmat nykyaikaiset verkkoselaimet tukevat konsolin sovellusliittymää, joten ne ovat helposti kehittäjien saatavilla. Konsoliobjekti vastaa pääsystä selaimen vianetsintäkonsoliin. Toteutus voi olla erilainen eri selaimissa, mutta useimmat menetelmät toimivat kaikissa nykyaikaisissa selaimissa.

Kärki : Selainkonsolisi voi suorittaa kaikki tässä oppaassa käsitellyt koodit. Lehdistö F12 avaamalla selaimen kehittäjien työkalut Chromessa tai Firefoxissa.

Merkkijonoviestien kirjaaminen

Yksi yleisimmistä konsolimenetelmistä on console.log () . Se antaa vain merkkijonoviestin tai jonkin arvon verkkokonsolille. Yksinkertaisia arvoja tai merkkijonoviestejä varten console.log () menetelmä on luultavasti paras vaihtoehto.

mistä voin katsella ilmaisia elokuvia ilman rekisteröitymistä

Ulostulo a Hei maailma viestiä, voit käyttää seuraavaa.

console.log(`Hello World`);

Toinen erikoispiirre console.log () menetelmä on kyky tulostaa DOM -elementtien tulostus tai verkkosivuston osan rakenne, esimerkiksi tulostaa runkoelementin rakenne ja kaikki sen sisällä olevat, käyttämällä seuraavaa.

console.log(document.body)

Tulos on kokoelma DOM -elementtejä HTML -puuna.

Vuorovaikutteisten JavaScript -objektien kirjaaminen

The console.dir () menetelmää käytetään JavaScript -objektien interaktiivisten ominaisuuksien kirjaamiseen. Voit esimerkiksi käyttää sitä verkkosivun DOM -elementtien tarkasteluun.

Tyypillinen lähtö console.dir () menetelmä koostuu kaikista määritetyn JavaScript -objektin ominaisuuksista JSON -muodossa. Tulosta alla olevan menetelmän avulla kaikkien HTML -sivun rungon elementtien ominaisuudet:

console.dir(document.body)

Lausekkeiden arviointi

Saatat tuntea yksikkötestauksen väitemenetelmät - hyvin console.assert () menetelmä toimii samalla tavalla. Käytä console.assert () menetelmä lausekkeen tai ehdon arvioimiseksi.

Kun vahvistusmenetelmä epäonnistuu, konsoli tulostaa virheilmoituksen; muuten se ei tulosta mitään. Käytä alla olevaa koodia arvioidaksesi, onko henkilön ikä yli 18:

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

Yllä oleva väite epäonnistuu ja virheilmoitus tulostuu vastaavasti.

Tietojen kirjaaminen taulukoihin

Käytä console.table () tapa näyttää tiedot taulukkomuodossa. Taulukon muodossa näytettävät hyvät ehdokkaat sisältävät matriiseja tai objektitietoja.

Huomautus : Joillakin selaimilla, kuten Firefoxilla, on enintään 1000 riviä, jotka voidaan näyttää console.table () menetelmä.

Olettaen, että sinulla on seuraava joukko autokohteita:

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

Voit näyttää yllä olevan taulukon taulukossa alla olevalla menetelmällä:

console.table(cars);

Viestien kirjaaminen luokittain

Verkkoselainkonsolin viestit luokitellaan pääasiassa kolmeen ryhmään: virhe, varoitus ja tiedot.

Virheet

Virhesanomien tulostaminen konsoliin käyttämällä console.error () menetelmä, virheisiin liittyvät viestit näytetään punaisella fontilla.

console.error('error message');

Varoitukset

Voit tulostaa varoituksia seuraavasti. Kuten useimmissa tilanteissa, varoitusviestit näkyvät oranssina:

console.warn('warning message');

Tiedot

Voit tulostaa yleisiä tietoja konsoliin käyttämällä console.info () menetelmä:

console.info('general info message')

Viestit on helppo suodattaa tai löytää selainkonsolista, kun ne on luokiteltu oikein.

Ohjelman kulun seuranta

Käytä console.trace () menetelmä pinon jäljen tulostamiseksi ohjelman kulusta tai suorituksesta. Tämä on erittäin hyödyllinen ominaisuus virheenkorjauksessa, koska se tulostaa järjestyksen, jossa toiminnot suoritetaan ohjelmassasi.

Nähdäksesi console.trace () menetelmässä, voit luoda kolme funktiota (kuten alla) ja sijoittaa pinojäljen johonkin funktioista.

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

Soita tai käynnistä selainkonsolissa functionOne () ja saat pinojäljen LIFO (Last In First Out Order) -toiminnossa tulostetuista toimintokutsuista, koska se on pino.

Ajoitusohjelman suoritus

Voit määrittää, kuinka kauan ohjelman suorittaminen kestää ohjelmassasi, käyttämällä console.time () menetelmä. console.time () käytetään yleensä yhdessä console.timeEnd () menetelmä, jossa jälkimmäistä käytetään ajastimen lopettamiseen.

Voit käyttää jopa 10 000 ajastinta verkkosivua kohden, mikä korostaa ajastimien merkitsemisen tärkeyttä.

Voit käyttää ajastinta seuraavasti, jos haluat määrittää, kuinka kauan for -silmukka kestää numeroiden 1 - 50 000 läpi kulkemisen.

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

Laskenta

The console.count () -menetelmää käytetään seuraamaan, kuinka monta kertaa funktio tai jokin koodiosa on kutsuttu ohjelmassa. Voimme esimerkiksi seurata, kuinka monta kertaa silmukka on suoritettu seuraavasti:

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

Lokiviestien ryhmittely

Ajastimen tapaan, console.group () ja console.groupEnd () Menetelmiä käytetään yleensä pareittain.

Ryhmämenetelmä auttaa sinua järjestämään lokiviestisi paremmin. Voimme esimerkiksi luoda varoitusviestiryhmän, jossa on varoitusmerkinnät seuraavasti.

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

Varoitusryhmän kaksi viestiä luokitellaan visuaalisesti alla olevan tuloksen mukaisesti.

Konsolin tyhjentäminen

Viimeisenä mutta ei vähäisimpänä, tässä on useita tapoja, joilla voit poistaa lokiviestit selainkonsolista.

Käytä console.clear () menetelmä seuraavasti.

console.clear()

Voit myös tyhjentää selainkonsolin selaimen pikanäppäimillä.

Google Chrome : Ctrl + L.

Firefox : Ctrl + Vaihto + L

Käyttämällä selainkonsolia täysillä

Tämä opas on näyttänyt sinulle joitain erilaisia käytettävissä olevia verkkoselaimen konsolimenetelmiä, jotka auttavat sinua ratkaisemaan käyttöliittymien vianmäärityksen. Konsolin sovellusliittymä on erittäin kevyt, helppo oppia ja sitä tuetaan laajalti useimmissa nykyaikaisissa selaimissa.

kuinka päästä pimeään verkkoon turvallisesti

Tee CAPTCHA -vahvistuslomake seuraavaan projektiin ja testaa uudet virheenkorjaustaitosi!

Jaa Jaa Tweet Sähköposti Luo CAPTCHA -vahvistuslomake HTML: n, CSS: n ja JavaScriptin avulla

Suojaa verkkosivustosi CAPTCHA -validoinnilla.

Lue seuraava Liittyvät aiheet

Ohjelmointi
Verkkokehitys
JavaScript

Kirjailijasta Hyvä mennä(36 artikkelia julkaistu)

Mwiza kehittää ohjelmistoja ammatin mukaan ja kirjoittaa laajasti Linux- ja käyttöliittymäohjelmoinnista. Joitakin hänen kiinnostuksen kohteitaan ovat historia, talous, politiikka ja yritysarkkitehtuuri.

Lisää Mwiza Kumwendalta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi