Jak získat co nejvíce z konzole JavaScript

Jeden z nejzákladnějších nástrojů pro ladění v JavaScriptu je console.log (). Konzola je dodávána s několika dalšími užitečnými metodami, které lze přidat do vývojové sady nástrojů pro ladění.

Pomocí konzoly můžete provádět některé z následujících úkolů:

  • Výstup časovače pro pomoc s jednoduchým benchmarking
  • Výstup tabulky k zobrazení pole nebo objektu ve snadno čitelném formátu
  • Použít barvy a další možnosti stylingu na výstup pomocí CSS

Objekt konzoly

Objekt konzoly umožňuje přístup do konzole prohlížeče. Umožňuje výstup řetězců, polí a objektů, které pomáhají ladit váš kód. Konzola je součástí objektu okna a dodává ji model prohlížeče (BOM).

Přístup ke konzole můžeme získat jedním ze dvou způsobů:

  1. window.console.log ('This works')
  2. console.log („Stejně tak“)

Druhá možnost je v zásadě odkazem na první, takže druhou použijeme k uložení úhozů.

Jedna rychlá poznámka k kusovníku: nemá nastavený standard, takže jej každý prohlížeč implementuje poněkud odlišným způsobem. Všechny své příklady jsem testoval v prohlížeči Chrome i Firefox, ale váš výstup se může v závislosti na prohlížeči zobrazit jinak.

Výstup textu

Protokolování textu do konzoly

Nejběžnějším prvkem objektu konzole je console.log. Pro většinu scénářů ji použijete k dokončení práce.

Existují čtyři různé způsoby, jak odeslat zprávu do konzole:

  1. log
  2. informace
  3. varovat
  4. chyba

Všechny čtyři pracují stejným způsobem. Jediné, co uděláte, je předat jeden nebo více argumentů vybrané metodě. Poté zobrazí jinou ikonu označující její úroveň protokolování. V níže uvedených příkladech můžete vidět rozdíl mezi protokolem na úrovni informací a protokolem na úrovni varování / chyb.

Jednoduchý a snadno čitelný výstupS mnoha věcmi se to může stát obtížně čitelné

Možná jste si všimli zprávy s chybovým protokolem - je nápadnější než ostatní. Zobrazuje červené pozadí i trasování zásobníku, kde informace a varování ne. Upozorňujeme, že v Chromu má žluté pozadí.

Tyto vizuální rozdíly pomáhají, když potřebujete rychle identifikovat jakékoli chyby nebo varování v konzole. Chtěli byste se ujistit, že jsou odebrány pro aplikace připravené k výrobě, pokud nejsou k dispozici, aby varovaly ostatní vývojáře, že s vaším kódem dělají něco špatného.

Náhrady řetězců

Tato technika používá zástupný symbol v řetězci, který je nahrazen jinými argumenty, které předáte této metodě. Například:

Vstup: console.log ('řetězec% s', 'substituce')

Výstup: řetězcové substituce

% S je zástupný symbol pro druhý argument 'substituce', který přichází za čárkou. Všechny řetězce, celá čísla nebo pole budou převedeny na řetězec a nahradí% s. Pokud předáte objekt, zobrazí se [Object Object].

Pokud chcete předat objekt, musíte místo% s použít% o nebo% O.

console.log ('toto je objekt% o', {obj: {obj2: 'hello'}})

Čísla

Substituce řetězce lze použít s celými čísly a hodnotami s pohyblivou řádovou čárkou pomocí:

  • % i nebo% d pro celá čísla,
  • % f pro pohyblivé body.

Vstup: console.log ('int:% d, pohyblivá čárka:% f', 1, 1,5)

Výstup: int: 1, s pohyblivou desetinnou čárkou: 1 500 000

Plováky lze formátovat tak, aby zobrazovaly pouze jednu číslici za desetinnou čárkou pomocí% .1f. Pomocí% .nf můžete zobrazit n množství číslic za desetinnou čárkou.

Pokud bychom formátovali výše uvedený příklad tak, aby zobrazoval jednu číslici za desetinnou čárkou pro číslo s plovoucí desetinnou čárkou, vypadalo by to takto:

Vstup: console.log ('int:% d, pohyblivá čárka:% .1f', 1, 1,5)

Výstup: int: 1, pohyblivá čárka: 1,5

Specifikace formátování

  1. % s | nahradí prvek řetězcem
  2. % (d | i) | nahradí prvek celým číslem
  3. % f | nahradí prvek floatem
  4. % (o | O) | prvek se zobrazí jako objekt.
  5. % c | Použije poskytnutý CSS

Šablony řetězců

S příchodem ES6 jsou tematické literály alternativou k substitucím nebo zřetězením. Místo uvozovek používají backticks (``) a proměnné se pohybují uvnitř $ {}:

const a = 'substituce';
console.log (`bear: $ {a}`);
// bear: substituce

Objekty se zobrazují jako [objekt Object] v literálech šablon, takže pro zobrazení podrobností budete muset použít substituci% o nebo% O, nebo je protokolovat samostatně samostatně.

Použití substitucí nebo šablon vytváří kód, který je čitelnější ve srovnání s řetězcovým zřetězením: console.log ('ahoj' + str + '!') ;.

Docela barevné interlude!

Nyní je čas na něco trochu zábavnějšího a barevnějšího!

Je načase, aby se naše konzole objevila v různých barvách se střídáním řetězců.

Budu používat zesměšňovaný příklad Ajaxu, který nám dá úspěch (zeleně) i selhání (červeně). Zde je výstup a kód:

Úspěšní medvědi a netopýři
const success = [
 'pozadí: zelená',
 'barva bílá',
 'display: block',
 'zarovnání textu: střed'
].připojit(';');
const fail = [
 'pozadí: červená',
 'barva bílá',
 'display: block',
 'zarovnání textu: střed'
].připojit(';');
console.info ('% c / tanec / medvědi byl úspěšný!', úspěch);
console.log ({data: {
 jméno: 'Bob',
 věk: 'neznámý'
}}); // "zesměšňovaná" datová odpověď
console.error ('% c / tanec / netopýry selhal!', selhání);
console.log ('/ tanec / netopýry neexistuje');

Pravidla CSS použijete při nahrazení řetězce zástupným symbolem% c.

console.error ('% c / tanec / netopýry selhal!', selhání);

Poté umístěte prvky CSS jako argument řetězce a můžete mít protokoly ve stylu CSS. Do řetězce můžete také přidat více než jedno% c.

console.log ('% cred% cblue% cwhite', 'color: red;', 'color: blue;', 'color: white;')

Výsledkem budou slova „červená“, „modrá“ a „bílá“ v jejich respektovaných barvách.

Konzola podporuje několik vlastností CSS. Doporučil bych experimentovat, abych zjistil, co funguje a co ne. Vaše výsledky se opět mohou lišit v závislosti na prohlížeči.

Další dostupné metody

Zde je několik dalších dostupných metod konzoly. Upozorňujeme, že některé položky uvedené níže nemají standardizovaná API, takže mezi prohlížeči mohou být nekompatibilita. Příklady byly vytvořeny pomocí Firefoxu 51.0.1.

Assert ()

Assert bere dva argumenty - pokud se první argument vyhodnotí jako falešná hodnota, zobrazí druhý argument.

let isTrue = false;
console.assert (isTrue, 'Toto se zobrazí');
isTrue = true;
console.assert (isTrue, 'This will not');

Pokud je tvrzení nepravdivé, vydá se na konzolu. Je zobrazen jako protokol úrovně chyb, jak je uvedeno výše, což vám poskytne červenou chybovou zprávu i trasování zásobníku.

Dir ()

Metoda dir zobrazí interaktivní seznam objektu, který jí byl předán.

console.dir (document.body);
Chrome zobrazuje jinak

Nakonec dir uloží pouze jedno nebo dvě kliknutí. Pokud potřebujete zkontrolovat objekt z odpovědi API, pak jeho zobrazení strukturovaným způsobem vám může ušetřit čas.

Stůl()

Metoda tabulky zobrazí pole nebo objekt jako tabulku.

console.table (['Javascript', 'PHP', 'Perl', 'C ++']);
Výstup pro pole

Indexy pole nebo názvy vlastností objektů spadají do sloupce indexu vlevo. Poté jsou hodnoty zobrazeny v pravém sloupci.

const superhero = {
    křestní jméno: 'Peter',
    příjmení: 'Parker',
}
console.table (superhero);
Výstup pro objekt

Poznámka pro uživatele prohlížeče Chrome: Na tuto skutečnost mě upozornil spolupracovník, ale zdá se, že výše uvedené příklady metody tabulky v prohlížeči Chrome nefungují. Tento problém můžete vyřešit umístěním libovolných položek do pole polí nebo do pole objektů:

console.table ([['Javascript', 'PHP', 'Perl', 'C ++']]);
const superhero = {
    křestní jméno: 'Peter',
    příjmení: 'Parker',
}
console.table ([superhero]);

Skupina()

console.group () se skládá z nejméně tří volání konzoly a je to pravděpodobně metoda, která vyžaduje nejvíce psaní. Je to však také jeden z nejužitečnějších (zejména pro vývojáře používající Redux Logger).

Trochu základní volání vypadá takto:

console.group ();
console.log ('I will output');
console.group ();
console.log ('více odrážek')
console.groupEnd ();
console.log ('ohh look a bear');
console.groupEnd ();

Výsledkem bude více úrovní a zobrazí se odlišně v závislosti na prohlížeči.

Firefox zobrazuje odsazený seznam:

Chrome je zobrazuje ve stylu objektu:

Každé volání na console.group () zahájí novou skupinu nebo vytvoří novou úroveň, pokud se volá uvnitř skupiny. Pokaždé, když zavoláte konzoli.groupEnd (), bude ukončena aktuální skupina nebo úroveň a posune se o jednu úroveň zpět.

Zjistil jsem, že výstupní styl prohlížeče Chrome je snáze čitelný, protože vypadá spíše jako skládací objekt.

Můžete předat skupině argument záhlaví, který bude zobrazen přes console.group:

console.group ('Header');

Pokud voláte console.groupCollapsed (), můžete skupinu zobrazit jako sbalenou od začátku. Na základě mých zkušeností to vypadá, že funguje pouze v prohlížeči Chrome.

Čas()

Metoda času, stejně jako výše uvedená metoda skupiny, se dělí na dvě části.

Metoda spuštění časovače a metoda ukončení.

Jakmile časovač skončí, vydá celkovou dobu běhu v milisekundách.

Chcete-li spustit časovač, použijte console.time ('id pro časovač') a pro ukončení časovače použijte console.timeEnd ('id pro časovač'). Můžete mít spuštěno až 10 000 časovačů současně.

Výstup bude vypadat trochu jako tento časovač: 0,57ms

Je to velmi užitečné, když potřebujete rychle provést benchmarking.

Závěr

Tam to máme, trochu hlouběji se podíváme na objekt konzole a některé další metody, které s ním přicházejí. Tyto metody jsou skvělé nástroje, které máte k dispozici, když potřebujete ladit kód.

Existuje několik metod, o kterých jsem nemluvil, protože jejich API se stále mění. Více o nich nebo o konzoli se můžete dočíst více na stránce MDN Web API a na její živé stránce.

https://developer.mozilla.org/en/docs/Web/API/console