Home-theater-designers
De webbrowserconsole is een van de meest gebruikte tools voor het debuggen van front-end-applicaties. De Console API biedt ontwikkelaars de mogelijkheid om fouten aan te pakken en berichten te loggen.
console.log() is waarschijnlijk de meest gebruikte methode in de Console API, maar er zijn ook andere methoden die u in uw workflow kunt gebruiken. Deze handleiding toont u de verschillende methoden voor de webbrowserconsole die u kunt gebruiken om uw foutopsporingsworkflow te verbeteren.
Waarom is loggen belangrijk?
Aanmelden bij de webbrowserconsole is een van de beste methoden voor het debuggen van front-end- of JavaScript-gebaseerde toepassingen.
Gerelateerd: 6 JavaScript-frameworks die het leren waard zijn
De meeste moderne webbrowsers ondersteunen de Console API, waardoor deze direct beschikbaar is voor ontwikkelaars. Het console-object is verantwoordelijk voor het verlenen van toegang tot de foutopsporingsconsole van de browser. De implementatie kan per browser verschillen, maar de meeste methoden werken in alle moderne browsers.
Tip : Uw browserconsole kan alle code uitvoeren die in deze handleiding wordt besproken. druk op F12 op uw toetsenbord om de browserontwikkelaarstools in Chrome of Firefox te openen.
Stringberichten loggen
Een van de meest voorkomende consolemethoden is: console.log() . Het voert eenvoudigweg een tekenreeksbericht of een waarde uit naar de webconsole. Voor eenvoudige waarden of tekenreeksberichten, de console.log() methode is waarschijnlijk de beste optie om te gebruiken.
waarom zijn mijn laptop fans zo luid
Om een uit te voeren Hallo Wereld bericht, kunt u het volgende gebruiken.
console.log(`Hello World`); Een ander speciaal kenmerk van de console.log() methode is de mogelijkheid om de uitvoer van DOM-elementen of de structuur van een deel van een website af te drukken, bijvoorbeeld om de structuur van het body-element en alles daarbinnen uit te voeren, gebruik het volgende.
console.log(document.body) De uitvoer is een verzameling DOM-elementen als een HTML-boom.
Interactieve JavaScript-objecten loggen
De console.dir () methode wordt gebruikt voor het loggen van interactieve eigenschappen van JavaScript-objecten. U kunt het bijvoorbeeld gebruiken om de DOM-elementen in een webpagina te bekijken.
De typische output van de console.dir () methode bestaat uit alle eigenschappen van het opgegeven JavaScript-object in JSON-indeling. Gebruik de onderstaande methode om de eigenschappen van alle elementen in de hoofdtekst van een HTML-pagina af te drukken:
console.dir(document.body) Uitdrukkingen evalueren
Je bent misschien bekend met assert-methoden van unit-testen - nou ja, de console.beweren() methode werkt op een vergelijkbare manier. Gebruik de console.beweren() methode om een uitdrukking of voorwaarde te evalueren.
Wanneer de assert-methode faalt, drukt de console een foutmelding af; anders drukt het niets af. Gebruik de onderstaande code om te evalueren of iemand ouder is dan 18:
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';
console.assert( yourAge > ageLimit, assertFailMessage); De bewering hierboven mislukt en er wordt een foutbericht afgedrukt.
Gegevens in tabellen loggen
Gebruik de console.tabel() methode om gegevens in tabelvorm weer te geven. Goede kandidaten om in tabelvorm weer te geven zijn onder meer arrays of objectgegevens.
Opmerking : Sommige browsers, zoals Firefox, hebben een maximale limiet van 1.000 rijen die kunnen worden weergegeven met de console.tabel() methode.
Ervan uitgaande dat u de volgende reeks auto-objecten hebt:
let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
] U kunt de bovenstaande array in een tabel weergeven met behulp van de onderstaande methode:
console.table(cars); Berichten loggen op categorie
De consoleberichten van de webbrowser zijn hoofdzakelijk onderverdeeld in drie groepen: fout, waarschuwing en info.
fouten
Om specifiek foutberichten naar de console af te drukken met behulp van de console.error() methode worden foutgerelateerde berichten weergegeven in een rood lettertype.
console.error('error message'); Waarschuwingen
Gebruik het volgende om waarschuwingen af te drukken. Zoals bij de meeste scenario's worden waarschuwingsberichten oranje weergegeven:
console.warn('warning message');Info
Om algemene informatie naar de console af te drukken, gebruikt u de console.info () methode:
console.info('general info message') Het is gemakkelijk om berichten te filteren of te vinden in de browserconsole wanneer ze correct zijn gecategoriseerd.
Programmastroom traceren
Gebruik de console.trace() methode om een stapeltracering van programmastroom of uitvoering af te drukken. Dit is een zeer nuttige functie voor het debuggen, omdat het de volgorde afdrukt waarin functies in uw programma worden uitgevoerd.
Om de ... te zien console.trace() methode in actie, kunt u drie functies maken (zoals hieronder) en een stacktracering in een van de functies plaatsen.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}Bel of activeer in uw browserconsole functieEen() en je krijgt een stapeltracering van de functieaanroepen die zijn afgedrukt in de Last In First Out Order (LIFO) omdat het een stapel is.
Uitvoering van timingprogramma
Om te timen hoe lang het duurt om een bewerking in uw programma uit te voeren, kunt u de console.time() methode. console.time() wordt meestal gebruikt in combinatie met de console.timeEnd () methode waarbij de laatste wordt gebruikt om de timer te beëindigen.
U kunt maximaal 10.000 timers per webpagina laten lopen, wat het belang benadrukt van het correct labelen van uw timers.
Om te timen hoe lang een for-lus duurt om de getallen 1 tot 50.000 te doorlopen, kunt u de timer als volgt gebruiken.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
Tellen
De console.count() methode wordt gebruikt om bij te houden hoe vaak een functie of een stuk code in een programma is aangeroepen. We kunnen bijvoorbeeld het aantal keren dat een for-lus is uitgevoerd als volgt bijhouden:
for(i=0; i<4; i++ ){
console.count();
}Logboekberichten groeperen
Net als de timermethode, is de console.groep () , en console.groepEnd () methoden worden meestal in paren gebruikt.
De groepsmethode helpt je om je logberichten beter te ordenen. We kunnen bijvoorbeeld als volgt een groep waarschuwingsberichten maken met het label waarschuwingen.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()De twee berichten binnen de waarschuwingsgroep zijn visueel gecategoriseerd zoals te zien is in de onderstaande uitvoer.
De console wissen
Last but not least, hier zijn verschillende manieren waarop u logberichten in uw browserconsole kunt wissen.
Gebruik de console.clear() methode als volgt.
console.clear() U kunt de browserconsole ook wissen met de sneltoetsen van het browsertoetsenbord.
Google Chrome : Ctrl + L
Firefox : Ctrl + Shift + L
De browserconsole ten volle gebruiken
Deze handleiding heeft u enkele van de verschillende beschikbare methoden voor de webbrowserconsole laten zien om u te helpen bij het debuggen van front-end-toepassingen. De console-API is zeer licht van gewicht, gemakkelijk te leren en wordt breed ondersteund in de meeste moderne browsers.
hoe installeer ik windows 10 vanaf usb bios
Maak een CAPTCHA-validatie van uw volgende project en stel uw nieuwe debugging-vaardigheden op de proef!
Deel Deel Tweeten E-mail Maak een CAPTCHA-validatieformulier met HTML, CSS en JavaScriptBeveilig uw websites met CAPTCHA-validatie.
Lees volgende Gerelateerde onderwerpen- Programmeren
- Webontwikkeling
- JavaScript
Mwiza ontwikkelt software van beroep en schrijft uitgebreid over Linux en front-end programmeren. Enkele van zijn interesses zijn geschiedenis, economie, politiek en ondernemingsarchitectuur.
Meer van Mwiza KumwendaAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren