Home-theater-designers
A webböngésző konzol az egyik leggyakrabban használt eszköz a front-end alkalmazások hibakereséséhez. A Console API lehetővé teszi a fejlesztők számára a hibák kezelését és az üzenetek naplózását.
console.log () valószínűleg a leggyakrabban használt módszer a Console API -ban, de vannak más módszerek is, amelyeket a munkafolyamatban használhat. Ez az útmutató bemutatja a különböző webböngésző konzol módszereket, amelyekkel javíthatja a hibakeresési munkafolyamatot.
Miért fontos a naplózás?
A webböngésző konzolra történő bejelentkezés az egyik legjobb módszer a front-end vagy a JavaScript-alapú alkalmazások hibakeresésére.
Kapcsolódó: 6 JavaScript keretrendszer, amit érdemes megtanulni
A legtöbb modern webböngésző támogatja a Console API -t, így könnyen elérhetővé válik a fejlesztők számára. A konzolobjektum felelős a böngésző hibakereső konzoljához való hozzáférés biztosításáért. A megvalósítás böngészőkönként eltérő lehet, de a legtöbb módszer minden modern böngészőben működik.
Tipp : A böngészőkonzol képes futtatni az ebben az útmutatóban tárgyalt összes kódot. nyomja meg F12 a billentyűzeten, hogy megnyissa a böngészőfejlesztők eszközeit a Chrome -ban vagy a Firefoxban.
String üzenetek naplózása
Az egyik leggyakoribb konzol módszer console.log () . Egyszerűen egy karakterlánc üzenetet vagy valamilyen értéket ad ki a webkonzolnak. Egyszerű értékek vagy karakterlánc -üzenetek esetén a console.log () módszer talán a legjobb választás.
mi az álló mód az iPhone 7 -en
A kimenethez a Helló Világ üzenetet, a következőket használhatja.
console.log(`Hello World`); Egy másik különlegessége a console.log () módszer az a képesség, hogy kinyomtassuk a DOM elemek kimenetét vagy a webhely egy részének szerkezetét, például a törzs elem szerkezetének és az abban lévő mindennek a kiadásához használjuk a következőt.
console.log(document.body) A kimenet DOM elemek gyűjteménye HTML -faként.
Interaktív JavaScript objektumok naplózása
Az console.dir () módszer a JavaScript objektumok interaktív tulajdonságainak naplózására szolgál. Ezzel például megtekintheti a DOM elemeket egy weboldalon.
A tipikus kimenete console.dir () metódus a megadott JavaScript objektum összes tulajdonságából áll JSON formátumban. Az alábbi módszerrel nyomtathatja ki a HTML -oldal törzsében található összes elem tulajdonságait:
console.dir(document.body) A kifejezések értékelése
Lehet, hogy ismeri a bizonyítási módszereket az egység teszteléséből - nos console.assert () módszer hasonló módon működik. Használja a console.assert () kifejezés vagy feltétel értékelésének módszere.
Ha az érvényesítési módszer sikertelen, a konzol hibaüzenetet nyomtat; különben nem nyomtat semmit. Használja az alábbi kódot annak értékelésére, hogy egy személy 18 évesnél idősebb -e:
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';
console.assert( yourAge > ageLimit, assertFailMessage); A fenti állítás sikertelen, és ennek megfelelően hibaüzenet jelenik meg.
Adatok naplózása táblázatokban
Használja a konzolasztal() módszer az adatok táblázatos formában történő megjelenítésére. A táblázatban megjeleníthető jó jelöltek tömböket vagy objektumadatokat tartalmaznak.
jegyzet : Egyes böngészők, például a Firefox, legfeljebb 1000 sort tartalmazhatnak, amelyek megjeleníthetők a konzolasztal() módszer.
Tegyük fel, hogy a következő autóobjektum -tömbbel rendelkezik:
let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
] A fenti tömböt táblázatban jelenítheti meg az alábbi módszerrel:
console.table(cars); Üzenetek naplózása kategória szerint
A webböngésző konzol üzeneteit három csoportba sorolják: hiba, figyelmeztetés és információ.
Hibák
Ha hibaüzeneteket szeretne nyomtatni a konzolra a console.error () módszerrel, a hibaüzenetek piros betűvel jelennek meg.
console.error('error message'); Figyelmeztetések
A figyelmeztetések kinyomtatásához használja az alábbiakat. A legtöbb forgatókönyvhöz hasonlóan a figyelmeztető üzenetek narancssárgán jelennek meg:
console.warn('warning message');Információ
Ha általános információkat szeretne nyomtatni a konzolra, használja a console.info () módszer:
console.info('general info message') Könnyen szűrheti vagy megkeresheti az üzeneteket a böngészőkonzolban, ha megfelelően kategorizálják őket.
Programkövetés nyomon követése
Használja a console.trace () módszer a programfolyamat vagy végrehajtás kötegnyomának kinyomtatására. Ez egy nagyon hasznos funkció a hibakereséshez, mert kinyomtatja a programban a funkciók végrehajtásának sorrendjét.
Látni a console.trace () metódus működésében, három függvényt hozhat létre (az alábbiak szerint), és veremnyomot helyezhet el az egyik függvényben.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}Hívjon vagy indítson böngészőkonzolban functionOne () és halom nyomon követi a LIFO -ban (Last In First Out Order) nyomtatott függvényhívásokat, mert ez egy verem.
Időzítő program végrehajtása
Annak érdekében, hogy mennyi ideig tart egy művelet végrehajtása a programban, használja a console.time () módszer. console.time () jellemzően együtt használják a console.timeEnd () módszer, ahol az utóbbit használják az időzítő leállítására.
Webhelyenként akár 10 000 időzítő is futhat, kiemelve az időzítők megfelelő címkézésének fontosságát.
Annak érdekében, hogy mennyi ideig tartson egy for ciklus az 1 és 50 000 közötti számok áthaladásához, használja az időzítőt az alábbiak szerint.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
Számolás
Az console.count () metódust használják annak nyomon követésére, hogy egy programban hányszor hívtak meg egy funkciót vagy valamilyen kódrészletet. Például nyomon követhetjük, hogy egy ciklus hányszor hajtódott végre az alábbiak szerint:
for(i=0; i<4; i++ ){
console.count();
}Naplóüzenetek csoportosítása
Akárcsak az időzítő módszer, a console.group () , és console.groupEnd () a módszereket általában párban használják.
A csoportos módszer segít a naplóüzenetek jobb rendszerezésében. Például a következőképpen hozhatunk létre figyelmeztető üzenetek csoportját a figyelmeztető címkékkel.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()A figyelmeztető csoporton belüli két üzenet vizuálisan kategorizált, az alábbi kimeneten látható módon.
A konzol törlése
Végül, de nem utolsósorban, itt többféle módon törölheti a naplóüzeneteket a böngészőkonzolban.
Használja a console.clear () módszer az alábbiak szerint.
console.clear() A böngészőkonzolt a böngésző gyorsbillentyűivel is törölheti.
Google Chrome : Ctrl + L
Firefox : Ctrl + Shift + L
A böngészőkonzol teljes használata
Ez az útmutató bemutatott néhány elérhető webböngésző konzol módszert, amelyek segítenek a front-end alkalmazások hibakeresésében. A konzol API nagyon könnyű, könnyen elsajátítható és széles körben támogatott a legtöbb modern böngészőben.
használhatod a microsoft szót a chromebookon
Készítse el CAPTCHA érvényesítési űrlapját a következő projektjéhez, és próbálja ki új hibakeresési készségeit!
Részvény Részvény Csipog Email Hozzon létre CAPTCHA érvényesítési űrlapot HTML, CSS és JavaScript használatávalVédje webhelyeit a CAPTCHA érvényesítéssel.
Olvassa tovább Kapcsolódó témák- Programozás
- Webfejlesztés
- JavaScript
A Mwiza szakmát szakmailag fejleszt, és sokat ír Linuxon és front-end programozáson. Érdeklődési körei közé tartozik a történelem, a gazdaság, a politika és a vállalkozás-építészet.
Továbbiak Mwiza KumwendátólIratkozzon fel hírlevelünkre
Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
Feliratkozáshoz kattintson ide