Home-theater-designers
Konzola webového prehliadača je jedným z najčastejšie používaných nástrojov na ladenie aplikácií front-end. Console API poskytuje vývojárom možnosť riešiť chyby a protokolovať správy.
console.log () je pravdepodobne najčastejšie používanou metódou v rozhraní Console API, ale existujú aj ďalšie metódy, ktoré môžete použiť vo svojom pracovnom toku. Táto príručka vám ukazuje rôzne metódy konzoly webového prehliadača, ktoré môžete použiť na zlepšenie pracovného postupu pri ladení.
Prečo je zaznamenávanie dôležité?
Prihlásenie do konzoly webového prehliadača je jednou z najlepších metód ladenia aplikácií front-end alebo JavaScript.
Súvisiace: 6 rámcov JavaScriptu, ktoré sa oplatí naučiť
Väčšina moderných webových prehliadačov podporuje rozhranie Console API, vďaka čomu je ihneď k dispozícii vývojárom. Objekt konzoly je zodpovedný za poskytnutie prístupu k ladiacej konzole prehliadača. Implementácia sa môže v rôznych prehliadačoch líšiť, ale väčšina metód bude fungovať vo všetkých moderných prehliadačoch.
Tip : Na vašej konzole prehliadača je možné spustiť všetok kód popísaný v tejto príručke. Stlačte F12 na klávesnici otvoríte nástroje vývojárov prehliadača v prehliadači Chrome alebo Firefox.
Protokolové reťazcové správy
Jednou z najbežnejších metód konzoly je console.log () . Jednoducho odosiela reťazcovú správu alebo nejakú hodnotu do webovej konzoly. V prípade jednoduchých hodnôt alebo reťazcových správ je prípona console.log () metóda je pravdepodobne najlepšia voľba.
do baran palice sa musia zhodovať
Na výstup a Ahoj Svet správu, môžete použiť nasledujúce.
console.log(`Hello World`); Ďalšou zvláštnosťou funkcie console.log () metóda je schopnosť vytlačiť výstup prvkov DOM alebo štruktúru časti webovej stránky, napríklad vytvoriť štruktúru prvku tela a všetko, čo v ňom je, použiť nasledujúce.
console.log(document.body) Výstupom je zbierka prvkov DOM ako strom HTML.
Protokolovanie interaktívnych objektov JavaScript
The console.dir () metóda sa používa na zaznamenávanie interaktívnych vlastností objektov JavaScript. Môžete ho napríklad použiť na zobrazenie prvkov DOM na webovej stránke.
Typický výstup súboru console.dir () Metóda pozostáva zo všetkých vlastností zadaného objektu JavaScript vo formáte JSON. Na vytlačenie vlastností všetkých prvkov v tele stránky HTML použite nižšie uvedenú metódu:
console.dir(document.body) Hodnotiace výrazy
Možno poznáte metódy tvrdenia z testovania jednotiek - teda console.assert () metóda funguje podobným spôsobom. Použi console.assert () metóda na vyhodnotenie výrazu alebo podmienky.
Keď metóda assert zlyhá, konzola vytlačí chybové hlásenie; v opačnom prípade nič nevytlačí. Pomocou nižšie uvedeného kódu vyhodnotte, či je vek osoby starší ako 18 rokov:
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';
console.assert( yourAge > ageLimit, assertFailMessage); Vyššie uvedené tvrdenie zlyhá a podľa toho sa vytlačí chybové hlásenie.
Zaznamenávanie údajov do tabuliek
Použi console.table () spôsob zobrazovania údajov v tabuľkovom formáte. Dobrými kandidátmi na zobrazenie vo forme tabuľky sú polia alebo údaje o objektoch.
Poznámka : Niektoré prehliadače, ako napríklad Firefox, majú maximálny limit 1 000 riadkov, ktoré je možné zobraziť pomocou súboru console.table () metóda.
Za predpokladu, že máte nasledujúcu škálu automobilových predmetov:
let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
] Pole uvedené vyššie môžete zobraziť v tabuľke pomocou nasledujúcej metódy:
console.table(cars); Protokolovanie správ podľa kategórie
Správy konzoly webového prehliadača sú rozdelené hlavne do troch skupín: chyby, varovania a informácie.
Chyby
Ak chcete konkrétne vytlačiť chybové správy do konzoly pomocou console.error () metódy sa chybové správy zobrazujú červeným písmom.
console.error('error message'); Varovania
Ak chcete vytlačiť varovania, použite nasledujúci postup. Ako vo väčšine scenárov, varovné správy sú zobrazené oranžovou farbou:
console.warn('warning message');Info
Ak chcete vytlačiť všeobecné informácie na konzolu, použite console.info () metóda:
console.info('general info message') Správne kategorizované správy v konzole prehliadača je ľahké filtrovať alebo nájsť.
Sledovací tok programu
Použi console.trace () metóda na vytlačenie stohovej stopy toku programu alebo spustenia. Je to veľmi užitočná funkcia pre ladenie, pretože vytlačí poradie, v ktorom sa funkcie vykonávajú vo vašom programe.
Ak chcete vidieť console.trace () metóda v akcii, môžete vytvoriť tri funkcie (ako je uvedené nižšie) a do jednej z funkcií vložiť trasovanie zásobníka.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}V konzole prehliadača zavolajte alebo spustite functionOne () a dostanete stopu stohu volaní funkcií vytlačenú v poradí Last In First Out Order (LIFO), pretože je to zásobník.
Vykonanie programu načasovania
Ak chcete zistiť, ako dlho trvá spustenie operácie vo vašom programe, môžete použiť príkaz console.time () metóda. console.time () sa zvyčajne používa spolu s console.timeEnd () metóda, pri ktorej sa tento používa na ukončenie časovača.
Na jednej webovej stránke môže byť spustených až 10 000 časovačov, čo zdôrazňuje dôležitosť správneho označenia vašich časovačov.
Ak chcete zistiť, ako dlho trvá cyklu for prejsť číslami 1 až 50 000, môžete použiť časovač nasledovne.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
Počítanie
The console.count () Táto metóda sa používa na sledovanie počtu volaní funkcie alebo kódu v programe. Napríklad môžeme sledovať, koľkokrát sa slučka for spustila, nasledovne:
for(i=0; i<4; i++ ){
console.count();
}Zoskupovanie správ denníka
Rovnako ako metóda časovača, console.group () a console.groupEnd () metódy sa zvyčajne používajú vo dvojiciach.
Skupinová metóda vám pomôže lepšie zorganizovať správy denníka. Skupinu varovných správ s upozornením na štítku môžeme napríklad vytvoriť nasledovne.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()Tieto dve správy v rámci skupiny varovaní sú vizuálne kategorizované, ako je vidieť na nižšie uvedenom výstupe.
Vymazanie konzoly
V neposlednom rade je tu niekoľko spôsobov, ktorými môžete vymazať správy z denníka v konzole prehliadača.
Použi console.clear () nasledujúcim spôsobom.
console.clear() Konzolu prehliadača môžete vymazať aj pomocou klávesových skratiek prehliadača.
Google Chrome : Ctrl + L
Firefox : Ctrl + Shift + L
Používanie konzoly prehliadača naplno
Táto príručka vám ukázala niektoré z rôznych dostupných metód konzoly webového prehliadača, ktoré vám pomôžu pri ladení aplikácií front-end. Konzolové API je veľmi ľahké, ľahko sa učí a je široko podporované vo väčšine moderných prehliadačov.
dobré filmy na zaspanie
Urobte si z validácie CAPTCHA ďalší projekt a vyskúšajte si svoje nové ladiace schopnosti!
zdieľam zdieľam Tweet E -mail Vytvorte overovací formulár CAPTCHA pomocou HTML, CSS a JavaScriptZabezpečte svoje webové stránky overením CAPTCHA.
Čítajte ďalej Súvisiace témy- Programovanie
- Vývoj webových aplikácií
- JavaScript
Mwiza sa špecializuje na vývoj softvéru a rozsiahle píše o Linuxe a front-end programovaní. Medzi jeho záujmy patrí história, ekonomika, politika a podniková architektúra.
Viac od Mwizy Kumwendyprihlásiť sa ku odberu noviniek
Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!
Kliknutím sem sa prihlásite na odber