Atkļūdošana JavaScript: piesakoties pārlūkprogrammas konsolē

Tīmekļa pārlūka konsole ir viens no visplašāk izmantotajiem rīkiem priekšgala lietojumprogrammu atkļūdošanai. Konsoles API nodrošina izstrādātājiem iespēju novērst kļūdas un reģistrēt ziņojumus.

console.log () iespējams, ir visbiežāk izmantotā metode konsoles API, taču ir arī citas metodes, kuras varat izmantot savā darbplūsmā. Šajā rokasgrāmatā ir parādītas dažādas tīmekļa pārlūkprogrammas konsoles metodes, kuras varat izmantot, lai uzlabotu atkļūdošanas darbplūsmu.

Kāpēc mežizstrāde ir svarīga?

Pieteikšanās tīmekļa pārlūkprogrammas konsolē ir viena no labākajām front-end vai JavaScript lietojumprogrammu atkļūdošanas metodēm.

Saistītie: 6 JavaScript ietvari, kurus ir vērts apgūt

Lielākā daļa mūsdienu tīmekļa pārlūkprogrammu atbalsta konsoles API, padarot to viegli pieejamu izstrādātājiem. Konsoles objekts ir atbildīgs par piekļuves nodrošināšanu pārlūkprogrammas atkļūdošanas konsolei. Īstenošana dažādās pārlūkprogrammās var būt atšķirīga, taču lielākā daļa metožu darbosies visās mūsdienu pārlūkprogrammās.

Padoms : Jūsu pārlūkprogrammas konsole var palaist visu kodu, kas apskatīts šajā rokasgrāmatā. Nospiediet F12 uz tastatūras, lai pārlūkprogrammā Chrome vai Firefox atvērtu pārlūka izstrādātāju rīkus.

Stīgu ziņojumu reģistrēšana

Viena no populārākajām konsoles metodēm ir console.log () . Tas vienkārši izvada tīmekļa konsolē virknes ziņojumu vai kādu vērtību. Vienkāršām vērtībām vai virknes ziņojumiem console.log () metode, iespējams, ir labākā izvēle.

kā nosūtīt kādam ziņu vietnē youtube

Lai izvadītu a Sveika pasaule ziņu, varat izmantot tālāk norādīto.

console.log(`Hello World`);

Vēl viena īpaša iezīme console.log () metode ir iespēja izdrukāt DOM elementu izvadi vai vietnes daļas struktūru, piemēram, lai izvadītu pamatteksta struktūru un visu tajā esošo, izmantojiet sekojošo.

console.log(document.body)

Rezultāts ir DOM elementu kolekcija kā HTML koks.

Interaktīvu JavaScript objektu reģistrēšana

The console.dir () metode tiek izmantota JavaScript objektu interaktīvo rekvizītu reģistrēšanai. Piemēram, varat to izmantot, lai apskatītu DOM elementus tīmekļa lapā.

Tipiskā izeja console.dir () metode sastāv no visiem norādītā JavaScript objekta rekvizītiem JSON formātā. Izmantojiet tālāk norādīto metodi, lai izdrukātu visu HTML lapas pamatteksta elementu rekvizītus.

console.dir(document.body)

Izteicienu novērtēšana

Jūs, iespējams, esat iepazinušies ar vienību testēšanas apgalvojuma metodēm - labi console.assert () metode darbojas līdzīgi. Izmantojiet console.assert () izteiksmes vai nosacījuma novērtēšanas metode.

Ja apstiprināšanas metode neizdodas, konsole izdrukā kļūdas ziņojumu; pretējā gadījumā tas neko nedrukā. Izmantojiet zemāk esošo kodu, lai novērtētu, vai personas vecums ir lielāks par 18 gadiem:

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

Iepriekš minētais apgalvojums neizdodas, un attiecīgi tiek izdrukāts kļūdas ziņojums.

Datu reģistrēšana tabulās

Izmantojiet console.table () metode datu parādīšanai tabulas formātā. Labi kandidāti, ko parādīt tabulas veidā, ietver masīvus vai objektu datus.

Piezīme : Dažās pārlūkprogrammās, piemēram, Firefox, maksimālais ierobežojums ir 1000 rindas, kuras var parādīt ar console.table () metode.

Pieņemot, ka jums ir šāds automašīnu objektu klāsts:

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

Iepriekš redzamo masīvu varat parādīt tabulā, izmantojot tālāk norādīto metodi.

console.table(cars);

Ziņojumu reģistrēšana pēc kategorijas

Tīmekļa pārlūkprogrammas konsoles ziņojumus galvenokārt iedala trīs grupās: kļūda, brīdinājums un informācija.

Kļūdas

Konkrēti drukāt kļūdas ziņojumus konsolē, izmantojot console.error () metodi, ar kļūdām saistīti ziņojumi tiek parādīti sarkanā fontā.

console.error('error message');

Brīdinājumi

Lai izdrukātu brīdinājumus, izmantojiet tālāk norādīto. Tāpat kā vairumā gadījumu, brīdinājuma ziņojumi tiek parādīti oranžā krāsā:

console.warn('warning message');

Informācija

Lai konsolē izdrukātu vispārīgu informāciju, izmantojiet console.info () metode:

console.info('general info message')

Pārlūka konsolē ir viegli filtrēt vai atrast ziņojumus, ja tie ir pareizi klasificēti.

Programmas plūsmas izsekošana

Izmantojiet console.trace () metode, lai drukātu programmas plūsmas vai izpildes kaudzīti. Šī ir ļoti noderīga funkcija atkļūdošanai, jo tā izdrukā secību, kādā jūsu programmā tiek izpildītas funkcijas.

Lai redzētu console.trace () metodi darbībā, varat izveidot trīs funkcijas (kā norādīts zemāk) un vienā no funkcijām ievietot kaudzes izsekošanu.

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

Zvaniet vai aktivizējiet pārlūkprogrammas konsolē functionOne () un jūs saņemsiet funkciju izsaukumu kaudzīti, kas izdrukāta pasūtījumā Last In First Out (LIFO), jo tā ir kaudze.

Laika programmas izpilde

Lai noteiktu laiku, kas nepieciešams, lai darbība tiktu izpildīta jūsu programmā, varat izmantot console.time () metode. console.time () parasti izmanto kopā ar console.timeEnd () metode, kad pēdējo izmanto, lai pārtrauktu taimeri.

Katrai tīmekļa lapai var darboties līdz 10 000 taimeru, uzsverot, cik svarīgi ir pareizi marķēt taimerus.

Lai noteiktu laiku, cik ilgi ciklam jāiet cauri skaitļiem no 1 līdz 50 000, taimeri varat izmantot šādi.

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

Skaitīšana

The console.count () metodi izmanto, lai izsekotu, cik reižu programmā ir izsaukta funkcija vai kāds koda gabals. Piemēram, mēs varam izsekot, cik reizes cilpa ir izpildīta šādi:

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

Žurnālu ziņojumu grupēšana

Tāpat kā taimera metode, console.group () , un console.groupEnd () metodes parasti izmanto pāros.

Grupas metode palīdz labāk sakārtot žurnāla ziņojumus. Piemēram, mēs varam izveidot brīdinājuma ziņojumu grupu ar etiķetes brīdinājumiem šādi.

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

Abi brīdinājuma grupas ziņojumi ir vizuāli iedalīti kategorijās, kā redzams zemāk redzamajā izvadā.

Konsoles notīrīšana

Visbeidzot, šeit ir vairāki veidi, kā pārlūkprogrammas konsolē var notīrīt žurnāla ziņojumus.

Izmantojiet console.clear () metodi šādi.

console.clear()

Varat arī notīrīt pārlūkprogrammas konsoli, izmantojot pārlūka īsinājumtaustiņus.

Google Chrome : Ctrl + L.

Firefox : Ctrl + Shift + L.

Pilnībā izmantojot pārlūkprogrammas konsoli

Šajā rokasgrāmatā ir parādītas dažas no pieejamajām tīmekļa pārlūkprogrammas konsoles metodēm, lai palīdzētu atkļūdot priekšējās lietojumprogrammas. Konsoles API ir ļoti viegla, viegli apgūstama un plaši atbalstīta lielākajā daļā mūsdienu pārlūkprogrammu.

kā formatēt micro sd karti operētājsistēmā Mac

Padariet CAPTCHA validācijas veidlapu par savu nākamo projektu un pārbaudiet savas jaunās atkļūdošanas prasmes!

Kopīgot Kopīgot Čivināt E -pasts Izveidojiet CAPTCHA validācijas veidlapu, izmantojot HTML, CSS un JavaScript

Aizsargājiet savas vietnes, izmantojot CAPTCHA validāciju.

Lasīt Tālāk Saistītās tēmas

Programmēšana
Web izstrāde
JavaScript

Par autoru Labi iet(36 raksti publicēti)

Mwiza izstrādā programmatūru pēc profesijas un plaši raksta par Linux un front-end programmēšanu. Dažas no viņa interesēm ietver vēsturi, ekonomiku, politiku un uzņēmumu arhitektūru.

Vairāk no Mwiza Kumwenda

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu