Ladění v JavaScriptu: Přihlášení do konzoly prohlížeče

Ladění v JavaScriptu: Přihlášení do konzoly prohlížeče

Konzole webového prohlížeče je jedním z nejčastěji používaných nástrojů pro ladění aplikací front-end. Rozhraní Console API poskytuje vývojářům možnost řešit chyby a protokolovat zprávy.





console.log () je pravděpodobně nejčastěji používanou metodou v rozhraní Console API, ale existují i ​​jiné metody, které můžete použít ve svém pracovním postupu. Tato příručka vám ukazuje různé metody konzoly webového prohlížeče, které můžete použít ke zlepšení pracovního postupu ladění.



Proč je protokolování důležité?

Přihlášení do konzoly webového prohlížeče je jednou z nejlepších metod ladění aplikací front-end nebo JavaScriptu.





Související: 6 JavaScriptových rámců, které stojí za to se naučit

Většina moderních webových prohlížečů podporuje rozhraní Console API, díky čemuž je snadno dostupné pro vývojáře. Objekt konzoly je zodpovědný za poskytování přístupu ke konzole ladění prohlížeče. Implementace se může v různých prohlížečích lišit, ale většina metod bude fungovat ve všech moderních prohlížečích.



Spropitné : V konzole vašeho prohlížeče lze spustit veškerý kód popsaný v této příručce. lis F12 na klávesnici otevřete nástroje vývojářů prohlížeče v prohlížeči Chrome nebo Firefox.

Protokolování řetězcových zpráv

Jednou z nejběžnějších metod konzoly je console.log () . Jednoduše odesílá řetězcovou zprávu nebo nějakou hodnotu do webové konzoly. U jednoduchých hodnot nebo řetězcových zpráv je console.log () metoda je pravděpodobně nejlepší možností použití.



jak vynutit zavření oken

Pro výstup a Ahoj světe můžete použít následující.

console.log(`Hello World`);

Další speciální vlastností console.log () metoda je schopnost vytisknout výstup prvků DOM nebo strukturu části webu, například pro výstup struktury prvku body a všeho v něm použít následující.



console.log(document.body)

Výstupem je kolekce prvků DOM jako strom HTML.

Protokolování interaktivních objektů JavaScript

The console.dir () metoda se používá pro protokolování interaktivních vlastností objektů JavaScript. Můžete jej například použít k zobrazení prvků DOM na webové stránce.

Typický výstup souboru console.dir () metoda se skládá ze všech vlastností zadaného objektu JavaScript ve formátu JSON. Pomocí níže uvedené metody vytiskněte vlastnosti všech prvků v těle stránky HTML:

console.dir(document.body)

Vyhodnocování výrazů

Pravděpodobně jste obeznámeni s asertivními metodami z testování jednotek - dobře console.assert () metoda funguje podobným způsobem. Použijte console.assert () metoda k vyhodnocení výrazu nebo podmínky.

Pokud metoda assert selže, konzola vytiskne chybovou zprávu; jinak nic nevytiskne. Pomocí níže uvedeného kódu vyhodnotíte, zda je věk osoby vyšší než 18 let:

let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';

console.assert( yourAge > ageLimit, assertFailMessage);

Výše uvedené tvrzení se nezdaří a podle toho se vytiskne chybová zpráva.

Protokolování dat do tabulek

Použijte console.table () metoda pro zobrazení dat v tabulkovém formátu. Mezi vhodné kandidáty pro zobrazení ve formě tabulky patří pole nebo objektová data.

Poznámka : Některé prohlížeče, například Firefox, mají maximální limit 1 000 řádků, které lze zobrazit pomocí console.table () metoda.

Za předpokladu, že máte následující řadu automobilových předmětů:

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

Pole můžete zobrazit výše v tabulce pomocí níže uvedené metody:

console.table(cars);

Protokolování zpráv podle kategorie

Zprávy konzoly webového prohlížeče jsou rozděleny hlavně do tří skupin: chyba, varování a informace.

Chyby

Chcete -li konkrétně tisknout chybové zprávy na konzolu pomocí console.error () způsob, jsou zprávy související s chybami zobrazeny červeným písmem.

console.error('error message');

Varování

Chcete -li vytisknout varování, použijte následující. Jako u většiny scénářů jsou varovné zprávy zobrazeny oranžově:

console.warn('warning message');

Informace

Chcete -li na konzoli vytisknout obecné informace, použijte console.info () metoda:

console.info('general info message')

Je snadné filtrovat nebo najít zprávy v konzole prohlížeče, když jsou správně zařazeny do kategorií.

Sledování toku programu

Použijte console.trace () metoda k vytištění zásobníku trasování toku programu nebo spuštění. Toto je velmi užitečná funkce pro ladění, protože vytiskne pořadí, ve kterém jsou funkce ve vašem programu prováděny.

Chcete -li vidět console.trace () metoda v akci, můžete vytvořit tři funkce (podle níže) a umístit trasování zásobníku do jedné z funkcí.

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

V konzole prohlížeče zavolejte nebo spusťte functionOne () a získáte trasování zásobníku volání funkcí vytištěné v pořadí Last In First Out Order (LIFO), protože je to zásobník.

Provedení časovacího programu

Chcete -li zjistit, jak dlouho trvá provedení operace ve vašem programu, můžete použít console.time () metoda. console.time () se obvykle používá společně s console.timeEnd () metoda, kde se používá k ukončení časovače.

Na každé webové stránce může běžet až 10 000 časovačů, což zdůrazňuje důležitost správného označení časovačů.

Chcete -li zjistit, jak dlouho trvá smyčce for procházet čísly 1 až 50 000, můžete použít časovač následujícím způsobem.

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

Počítací

The console.count () metoda se používá ke sledování počtu volání funkce nebo části kódu v programu. Můžeme například sledovat, kolikrát byla smyčka for provedena následujícím způsobem:

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

Seskupování zpráv protokolu

Stejně jako metoda časovače, console.group () , a console.groupEnd () metody se obvykle používají ve dvojicích.

Metoda skupiny vám pomůže lépe organizovat zprávy protokolu. Skupinu varovných zpráv s upozorněním na štítku můžeme například vytvořit následujícím způsobem.

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

Dvě zprávy v rámci skupiny varování jsou vizuálně roztříděny, jak je vidět na výstupu níže.

Vymazání konzoly

V neposlední řadě je zde několik způsobů, jak můžete vymazat zprávy protokolu v konzole prohlížeče.

Použijte console.clear () následujícím způsobem.

console.clear()

Konzoli prohlížeče můžete také vymazat pomocí klávesových zkratek prohlížeče.

Google Chrome : Ctrl + L

Firefox : Ctrl + Shift + L

Používání konzoly prohlížeče naplno

Tato příručka vám ukázala některé z různých dostupných metod konzoly webového prohlížeče, které vám pomohou s laděním aplikací front-end. Konzolové API je velmi lehké, snadno se učí a je široce podporováno ve většině moderních prohlížečů.

jak překrývat fotografie na mac

Vytvořte z dalšího projektu validační formulář CAPTCHA a vyzkoušejte své nové ladicí schopnosti!

Podíl Podíl tweet E-mailem Vytvořte ověřovací formulář CAPTCHA pomocí HTML, CSS a JavaScript

Zabezpečte své webové stránky ověřením CAPTCHA.

Číst dále Související témata
  • Programování
  • Vývoj webu
  • JavaScript
O autorovi Dobré jít(36 článků zveřejněno)

Mwiza vyvíjí software z povolání a rozsáhle píše o Linuxu a front-end programování. Mezi jeho zájmy patří historie, ekonomie, politika a podniková architektura.

Více od Mwizy Kumwendy

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru