{"id":91419,"date":"2022-10-11T20:07:35","date_gmt":"2022-10-12T01:07:35","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/felsokning-i-javascript-logga-till-webblasarkonsolen\/"},"modified":"2022-10-11T20:07:35","modified_gmt":"2022-10-12T01:07:35","slug":"felsokning-i-javascript-logga-till-webblasarkonsolen","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/felsokning-i-javascript-logga-till-webblasarkonsolen\/","title":{"rendered":"Fels\u00f6kning i JavaScript: Logga till webbl\u00e4sarkonsolen"},"content":{"rendered":"
\n

Webbl\u00e4sarkonsolen \u00e4r ett av de mest anv\u00e4nda verktygen f\u00f6r att fels\u00f6ka front-end-applikationer. Console API ger utvecklare m\u00f6jligheten att hantera fel och loggmeddelanden.<\/p>\n

console.log()<\/strong> \u00e4r f\u00f6rmodligen den mest anv\u00e4nda metoden i Console API, men det finns \u00e4ven andra metoder som du kan anv\u00e4nda i ditt arbetsfl\u00f6de. Den h\u00e4r guiden visar de olika metoderna f\u00f6r webbl\u00e4sarkonsolen som du kan anv\u00e4nda f\u00f6r att f\u00f6rb\u00e4ttra ditt fels\u00f6kningsarbetsfl\u00f6de.<\/p>\n

<\/span> Varf\u00f6r \u00e4r loggning viktigt?<\/span><\/h2>\n

Att logga till webbl\u00e4sarkonsolen \u00e4r en av de b\u00e4sta metoderna f\u00f6r att fels\u00f6ka front-end eller JavaScript-baserade applikationer.<\/p>\n

De flesta moderna webbl\u00e4sare st\u00f6der Console API, vilket g\u00f6r det l\u00e4ttillg\u00e4ngligt f\u00f6r utvecklare. Konsolobjektet ansvarar f\u00f6r att ge \u00e5tkomst till webbl\u00e4sarens fels\u00f6kningskonsol. Implementeringen kan skilja sig \u00e5t mellan olika webbl\u00e4sare men de flesta metoder fungerar i alla moderna webbl\u00e4sare.<\/p>\n

Dricks<\/strong>: Din webbl\u00e4sarkonsol kan k\u00f6ra all kod som diskuteras i den h\u00e4r guiden. Tryck F12 <\/strong>p\u00e5 ditt tangentbord f\u00f6r att \u00f6ppna webbl\u00e4sarutvecklarnas verktyg i Chrome eller Firefox.<\/p>\n

<\/span> Logga str\u00e4ngmeddelanden<\/span><\/h2>\n

En av de vanligaste konsolmetoderna \u00e4r console.log()<\/strong>. Det matar helt enkelt ut ett str\u00e4ngmeddelande eller n\u00e5got v\u00e4rde till webbkonsolen. F\u00f6r enkla v\u00e4rden eller str\u00e4ngmeddelanden, console.log()<\/strong> metoden \u00e4r f\u00f6rmodligen det b\u00e4sta alternativet att anv\u00e4nda.<\/p>\n

Att mata ut a Hej v\u00e4rlden<\/strong> meddelande kan du anv\u00e4nda f\u00f6ljande.<\/p>\n

 console.log(`Hello World`); <\/pre>\n
\n<\/figure>\n
En annan speciell egenskap hos console.log()<\/strong> metod \u00e4r m\u00f6jligheten att skriva ut utdata fr\u00e5n DOM-element eller strukturen f\u00f6r en del av en webbplats, till exempel f\u00f6r att mata ut strukturen f\u00f6r body-elementet och allt inuti det anv\u00e4nda f\u00f6ljande.<\/p>\n
 console.log(document.body) <\/pre>\n
Utdata \u00e4r en samling DOM-element som ett HTML-tr\u00e4d.<\/p>\n
<\/span>  Logga interaktiva JavaScript-objekt<\/span><\/h2>\n
De console.dir()<\/strong> metod anv\u00e4nds f\u00f6r att logga interaktiva egenskaper f\u00f6r JavaScript-objekt.  Du kan till exempel anv\u00e4nda den f\u00f6r att se DOM-elementen p\u00e5 en webbsida.<\/p>\n
Den typiska produktionen av console.dir()<\/strong> Metoden best\u00e5r av alla egenskaper f\u00f6r det angivna JavaScript-objektet i JSON-format.  Anv\u00e4nd metoden nedan f\u00f6r att skriva ut egenskaperna f\u00f6r alla element i br\u00f6dtexten p\u00e5 en HTML-sida:<\/p>\n
 console.dir(document.body) <\/pre>\n
\n<\/figure>\n
<\/span>  Utv\u00e4rdera uttryck<\/span><\/h2>\n
Du kanske \u00e4r bekant med p\u00e5st\u00e5 metoder fr\u00e5n enhetstestning \u2013 ja console.assert()<\/strong> metoden fungerar p\u00e5 liknande s\u00e4tt.  Anv\u00e4nd console.assert()<\/strong> metod f\u00f6r att utv\u00e4rdera ett uttryck eller villkor.<\/p>\n
N\u00e4r assertmetoden misslyckas skriver konsolen ut ett felmeddelande;  annars skriver den ingenting.  Anv\u00e4nd koden nedan f\u00f6r att utv\u00e4rdera om en persons \u00e5lder \u00e4r \u00e4ldre \u00e4n 18:<\/p>\n
let ageLimit = 18;let yourAge = 12;const assertFailMessage = \"You have to be older than 18 years of age\";
console.assert( yourAge > ageLimit, assertFailMessage); <\/p><\/pre>\n
P\u00e5st\u00e5endet ovan misslyckas och ett felmeddelande skrivs ut i enlighet med detta.<\/p>\n
\n<\/figure>\n
<\/span>  Logga data i tabeller<\/span><\/h2>\n
Anv\u00e4nd konsol bord()<\/strong> metod f\u00f6r att visa data i tabellformat.  Bra kandidater att visa i tabellform inkluderar arrayer eller objektdata.<\/p>\n
Notera<\/strong>: Vissa webbl\u00e4sare, som Firefox, har en maxgr\u00e4ns p\u00e5 1 000 rader som kan visas med konsol bord()<\/strong> metod.<\/p>\n
F\u00f6rutsatt att du har f\u00f6ljande upps\u00e4ttning bilobjekt:<\/p>\n
 let cars = [{\"color\":\"purple\", \"type\":\"minivan\", \"registration\": new Date('2021-04-05')},{\"color\": \"red\", \"type\":\"minivan\", \"registration\": new Date ('2021-06-10')}] <\/pre>\n
Du kan visa arrayen ovan i en tabell med metoden nedan:<\/p>\n
 console.table(cars); <\/pre>\n
\n<\/figure>\n
<\/span>  Logga meddelanden efter kategori<\/span><\/h2>\n
Webbl\u00e4sarkonsolmeddelanden kategoriseras huvudsakligen i tre grupper: fel, varning och info.<\/p>\n
<\/span>Fel<\/span><\/h3>\n
F\u00f6r att specifikt skriva ut felmeddelanden till konsolen med hj\u00e4lp av console.error()<\/strong> metod visas felrelaterade meddelanden i r\u00f6tt teckensnitt.<\/p>\n
 console.error('error message'); <\/pre>\n
<\/span>Varningar<\/span><\/h3>\n
Anv\u00e4nd f\u00f6ljande f\u00f6r att skriva ut varningar.  Som med de flesta scenarier visas varningsmeddelanden i orange:<\/p>\n
 console.warn('warning message');<\/pre>\n
<\/span>Info<\/span><\/h3>\n
F\u00f6r att skriva ut allm\u00e4n information till konsolen, anv\u00e4nd console.info()<\/strong> metod:<\/p>\n
 console.info('general info message') <\/pre>\n
Det \u00e4r l\u00e4tt att filtrera eller hitta meddelanden i webbl\u00e4sarkonsolen n\u00e4r de \u00e4r korrekt kategoriserade.<\/p>\n
<\/span>  Sp\u00e5ra programfl\u00f6de<\/span><\/h2>\n
Anv\u00e4nd console.trace()<\/strong> metod f\u00f6r att skriva ut ett stacksp\u00e5r av programfl\u00f6de eller exekvering.  Detta \u00e4r en mycket anv\u00e4ndbar funktion f\u00f6r fels\u00f6kning eftersom den skriver ut i vilken ordning funktionerna k\u00f6rs i ditt program.<\/p>\n
Att se console.trace()<\/strong> metod i aktion, kan du skapa tre funktioner (enligt nedan) och placera en stacksp\u00e5rning i en av funktionerna.<\/p>\n
function functionOne(){functionTwo()}function functionTwo(){functionThree()}function functionThree(){console.trace()}<\/pre>\n
Ring eller trigg i din webbl\u00e4sarkonsol functionOne()<\/strong>  och du f\u00e5r ett stacksp\u00e5r av funktionsanropen som skrivs ut i Last In First Out Order (LIFO) eftersom det \u00e4r en stack.<\/p>\n
\n<\/figure>\n
<\/span>  Utf\u00f6rande av timingprogram<\/span><\/h2>\n
F\u00f6r att ta reda p\u00e5 hur l\u00e5ng tid en operation tar att k\u00f6ra i ditt program kan du anv\u00e4nda console.time()<\/strong> metod. console.time()<\/strong> anv\u00e4nds vanligtvis tillsammans med console.timeEnd()<\/strong> metod d\u00e4r den senare anv\u00e4nds f\u00f6r att avsluta timern.<\/p>\n
Du kan ha upp till 10 000 timers ig\u00e5ng per webbsida, vilket understryker vikten av att korrekt m\u00e4rka dina timers.<\/p>\n
F\u00f6r att tajma hur l\u00e5ng tid det tar f\u00f6r en for-loop att g\u00e5 igenom siffrorna 1 till 50 000 kan du anv\u00e4nda timern enligt f\u00f6ljande.<\/p>\n
console.time('loop timer 2');for(i=1; i< 50001; i++){}console.timeEnd('loop timer 2');<\/pre>\n
\n<\/figure>\n
<\/span>  R\u00e4kning<\/span><\/h2>\n
De console.count()<\/strong> metod anv\u00e4nds f\u00f6r att h\u00e5lla reda p\u00e5 hur m\u00e5nga g\u00e5nger en funktion eller n\u00e5gon kodbit har anropats i ett program.  Till exempel kan vi h\u00e5lla reda p\u00e5 hur m\u00e5nga g\u00e5nger en for-loop har k\u00f6rts enligt f\u00f6ljande:<\/p>\n
 for(i=0; i<4; i++ ){console.count();}<\/pre>\n
\n<\/figure>\n
<\/span>  Gruppera loggmeddelanden<\/span><\/h2>\n
Precis som timermetoden \u00e4r console.group()<\/strong>, och console.groupEnd()<\/strong> metoder anv\u00e4nds vanligtvis i par.<\/p>\n
Gruppmetoden hj\u00e4lper dig att b\u00e4ttre organisera dina loggmeddelanden.  Till exempel kan vi skapa en grupp varningsmeddelanden med etiketten \u201cvarningar\u201d enligt f\u00f6ljande.<\/p>\n
console.group('warnings')console.warn('another warning');console.warn('This is a warning')console.groupEnd()<\/pre>\n
De tv\u00e5 meddelandena inom varningsgruppen \u00e4r visuellt kategoriserade enligt utg\u00e5ngen nedan.<\/p>\n
\n<\/figure>\n
<\/span>  Rensa konsolen<\/span><\/h2>\n
Sist men inte minst, h\u00e4r \u00e4r flera s\u00e4tt p\u00e5 vilka du kan rensa loggmeddelanden i din webbl\u00e4sarkonsol.<\/p>\n
Anv\u00e4nd console.clear()<\/strong> metod enligt f\u00f6ljande.<\/p>\n
 console.clear() <\/pre>\n
Du kan ocks\u00e5 rensa webbl\u00e4sarkonsolen med webbl\u00e4sarens kortkommandon.<\/p>\n
Google Chrome<\/strong>: Ctrl + L<\/strong><\/p>\n
Firefox<\/strong>: Ctrl + Shift + L<\/strong><\/p>\n
<\/span>  Anv\u00e4nda webbl\u00e4sarkonsolen till fullo<\/span><\/h2>\n
Den h\u00e4r guiden har visat dig n\u00e5gra av de olika tillg\u00e4ngliga webbl\u00e4sarkonsolmetoderna f\u00f6r att hj\u00e4lpa dig att fels\u00f6ka front-end-applikationer.  Konsolens API \u00e4r mycket l\u00e4tt, l\u00e4tt att l\u00e4ra sig och st\u00f6ds brett i de flesta moderna webbl\u00e4sare.<\/p>\n
G\u00f6r en CAPTCHA-validering fr\u00e5n ditt n\u00e4sta projekt och testa dina nya fels\u00f6kningsf\u00e4rdigheter!<\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Mwiza Kumwenda (48 artiklar publicerade)
<\/strong><\/p>\n
Mwiza utvecklar mjukvara till yrket och skriver mycket om Linux och front-end-programmering.  N\u00e5gra av hans intressen inkluderar historia, ekonomi, politik och f\u00f6retagsarkitektur.<\/p>\n
                            Mer fr\u00e5n Mwiza Kumwenda<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n