JavaScript
Konsola

Wprowadzenie

Składnia

• void console.log (obj1 [, obj2, ..., objN]);
• void console.log (msg [, sub1, ..., subN]);

Parametry

Uwagi

if (typeof window.console !== 'undefined')
{
   console.log("Hello World");
}

if (!window.console)
{ 
    console = {log: function() {}}; 
}

Wartości tabelaryczne - console.table ()

W większości środowisk za pomocą console.table() można wyświetlać obiekty i tablice w formacie tabelarycznym.

Na przykład:

console.table(['Hello', 'world']);

wyświetla się jak:

console.table({foo: 'bar', bar: 'baz'});

wyświetla się jak:

var personArr = [{"personId": 123, "imię": "Jhon", "miasto": "Melbourne", "phoneNo": "1234567890"}, {"personId": 124, "imię": "Amelia" , „city”: „Sydney”, „phoneNo”: „1234567890”}, {„personId”: 125, „name”: „Emily”, „city”: „Perth”, „phoneNo”: „1234567890”}, {„personId”: 126, „imię”: „Abraham”, „miasto”: „Perth”, „phoneNo”: „1234567890”}];

console.table (personArr, ['name', 'personId']);

wyświetla się jak:

Dołączanie śledzenia stosu podczas rejestrowania - console.trace ()

function foo() {
  console.trace('My log statement');
}

foo();

Wyświetli to w konsoli:

My log statement       VM696:1
  foo                  @ VM696:1
  (anonymous function) @ (program):1

Uwaga: Tam, gdzie to możliwe, warto wiedzieć, że ten sam ślad stosu jest dostępny jako właściwość obiektu Error. Może to być przydatne do przetwarzania końcowego i zbierania automatycznych informacji zwrotnych.

var e = new Error('foo');
console.log(e.stack);

Drukowanie do konsoli debugowania przeglądarki

Konsoli debugowania przeglądarki można używać do drukowania prostych wiadomości. Debugowanie lub konsolę internetową można otworzyć bezpośrednio w przeglądarce (klawisz F12 w większości przeglądarek - więcej informacji znajduje się w uwagach poniżej), a metodę log obiektu Javascript console można wywołać, wpisując następujące polecenie:

console.log('My message');

Następnie, naciskając Enter , wyświetli się My message w konsoli debugowania.

console.log() można wywoływać z dowolną liczbą argumentów i zmiennych dostępnych w bieżącym zakresie. Wiele argumentów zostanie wydrukowanych w jednym wierszu z małą spacją między nimi.

var obj = { test: 1 };
console.log(['string'], 1, obj, window);

Metoda log wyświetli następujące informacje w konsoli debugowania:

['string']  1  Object { test: 1 }  Window { /* truncated */ }

Oprócz zwykłych ciągów, console.log() może obsługiwać inne typy, takie jak tablice, obiekty, daty, funkcje itp .:

console.log([0, 3, 32, 'a string']);
console.log({ key1: 'value', key2: 'another value'});

Wyświetla:

Array [0, 3, 32, 'a string']
Object { key1: 'value', key2: 'another value'}

Zagnieżdżone obiekty mogą być zwinięte:

console.log({ key1: 'val', key2: ['one', 'two'], key3: { a: 1, b: 2 } });

Wyświetla:

Object { key1: 'val', key2: Array[2], key3: Object }

Niektóre typy, takie jak obiekty Date i function mogą być wyświetlane inaczej:

console.log(new Date(0));
console.log(function test(a, b) { return c; });

Wyświetla:

Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)
function test(a, b) { return c; }

Inne metody drukowania

Oprócz metody log nowoczesne przeglądarki obsługują również podobne metody:

• console.info - mała ikona informacyjna (ⓘ) pojawia się po lewej stronie drukowanego ciągu (ów) lub obiektu (ów).

• console.warn - mała ikona ostrzeżenia (!) pojawia się po lewej stronie. W niektórych przeglądarkach tło dziennika jest żółte.

• console.error - ikona małych czasów (⊗) pojawia się po lewej stronie. W niektórych przeglądarkach tło dziennika jest czerwone.

• console.timeStamp - wyświetla aktualny czas i określony ciąg, ale jest niestandardowy:

  console.timeStamp('msg');
  

  Wyświetla:

  00:00:00.001 msg
  

• console.trace - wyświetla bieżące dane śledzenia stosu lub wyświetla te same dane wyjściowe co metoda log , jeśli jest wywoływana w zasięgu globalnym.

  function sec() {
     first();
  }
  function first() {
     console.trace();
  }
  sec();
  

  Wyświetla:

  first
  sec
  (anonymous function)
  

Powyższe zdjęcie pokazuje wszystkie funkcje, z wyjątkiem timeStamp , w wersji Chrome 56.

Metody te zachowują się podobnie do metody log , aw różnych konsolach debugujących mogą być renderowane w różnych kolorach lub formatach.

W niektórych debuggerach informacje o poszczególnych obiektach można dalej rozszerzać, klikając drukowany tekst lub mały trójkąt (►), który odnosi się do odpowiednich właściwości obiektu. Te zwijane właściwości obiektu mogą być otwarte lub zamknięte w dzienniku. Aby uzyskać dodatkowe informacje, zobacz console.dir

Czas pomiaru - console.time ()

console.time() można zmierzyć, jak długo trwa zadanie w kodzie.

Wywołanie console.time([label]) uruchamia nowy licznik czasu. Po console.timeEnd([label]) czas, który upłynął, w milisekundach, od momentu obliczenia i zarejestrowania oryginalnego .time() . Z powodu tego zachowania możesz wywołać .timeEnd() wiele razy z tą samą etykietą, aby zarejestrować czas, który upłynął od momentu pierwotnego .time() .

Przykład 1:

console.time('response in');

alert('Click to continue');
console.timeEnd('response in');

alert('One more time');
console.timeEnd('response in');

wyświetli:

response in: 774.967ms
response in: 1402.199ms

Przykład 2:

var elms = document.getElementsByTagName('*'); //select all elements on the page

console.time('Loop time');

for (var i = 0; i < 5000; i++) {
    for (var j = 0, length = elms.length; j < length; j++) {
        // nothing to do ...
    }
}

console.timeEnd('Loop time');

wyświetli:

Loop time: 40.716ms

Liczenie - console.count ()

console.count([obj]) umieszcza licznik na wartości obiektu podanej jako argument. Za każdym razem, gdy wywoływana jest ta metoda, licznik jest zwiększany (z wyjątkiem pustego ciągu '' ). Etykieta wraz z liczbą jest wyświetlana w konsoli debugowania zgodnie z następującym formatem:

[label]: X

label reprezentuje wartość obiektu przekazanego jako argument, a X reprezentuje wartość licznika.

Wartość obiektu jest zawsze brana pod uwagę, nawet jeśli zmienne są podane jako argumenty:

var o1 = 1, o2 = '2', o3 = "";
console.count(o1);
console.count(o2);
console.count(o3);

console.count(1);
console.count('2');
console.count('');

Wyświetla:

1: 1
2: 1
: 1
1: 2
2: 2
: 1

Ciągi z liczbami są konwertowane na obiekty Number :

console.count(42.3);
console.count(Number('42.3'));
console.count('42.3');

Wyświetla:

42.3: 1
42.3: 2
42.3: 3

Funkcje wskazują zawsze na globalny obiekt Function :

console.count(console.constructor);
console.count(function(){});
console.count(Object);
var fn1 = function myfn(){};
console.count(fn1);
console.count(Number);

Wyświetla:

[object Function]: 1
[object Function]: 2
[object Function]: 3
[object Function]: 4
[object Function]: 5

Niektóre obiekty mają określone liczniki powiązane z typem obiektu, do którego się odnoszą:

console.count(undefined);
console.count(document.Batman);
var obj;
console.count(obj);
console.count(Number(undefined));
console.count(NaN);
console.count(NaN+3);
console.count(1/0);
console.count(String(1/0));
console.count(window);
console.count(document);
console.count(console);
console.count(console.__proto__);
console.count(console.constructor.prototype);
console.count(console.__proto__.constructor.prototype);
console.count(Object.getPrototypeOf(console));
console.count(null);

Wyświetla:

undefined: 1
undefined: 2
undefined: 3
NaN: 1
NaN: 2
NaN: 3
Infinity: 1
Infinity: 2
[object Window]: 1
[object HTMLDocument]: 1
[object Object]: 1
[object Object]: 2
[object Object]: 3
[object Object]: 4
[object Object]: 5
null: 1

Pusty ciąg lub brak argumentu

Jeśli nie zostanie podany żaden argument podczas sekwencyjnego wprowadzania metody count w konsoli debugowania , parametr zostanie przyjęty jako pusty ciąg, tzn .:

> console.count();
  : 1
> console.count('');
  : 2
> console.count("");
  : 3

Debugowanie za pomocą asercji - console.assert ()

Zapisuje komunikat o błędzie w konsoli, jeśli twierdzenie jest false . W przeciwnym razie, jeśli twierdzenie jest true , to nic nie robi.

console.assert('one' === 1);

Po asercji można podać wiele argumentów - mogą to być ciągi znaków lub inne obiekty - które zostaną wydrukowane tylko wtedy, gdy twierdzenie jest false :

console.assert nie wyrzucać AssertionError (z wyjątkiem node.js ), co oznacza, że metoda ta nie jest zgodna z większością ramach badań i że wykonanie kodu nie zostanie przerwane w nieudanej twierdzenia.

Formatowanie wyjścia konsoli

Wiele metod drukowania konsoli może również obsługiwać formatowanie ciągów podobnych do C przy użyciu % tokenów:

console.log('%s has %d points', 'Sam', 100);

Wyświetla Sam has 100 points .

Pełna lista specyfikatorów formatu w Javascript to:

Zaawansowana stylizacja

Gdy specyfikator formatu CSS ( %c ) zostanie umieszczony po lewej stronie ciągu, metoda drukowania zaakceptuje drugi parametr z regułami CSS, które umożliwiają precyzyjną kontrolę nad formatowaniem tego ciągu:

console.log('%cHello world!', 'color: blue; font-size: xx-large');

Wyświetla:

Możliwe jest użycie wielu specyfikatorów formatu %c :

• dowolny podciąg po prawej stronie %c ma odpowiedni parametr w metodzie drukowania;
• ten parametr może być ciągiem pustym, jeśli nie ma potrzeby stosowania reguł CSS do tego samego podciągu;
• Jeśli dwa %c występują w formacie projektantom, ^1-ego (zamknięte w %c ) i 2 ^ND podciąg będą mieli zasady określone w parametrze ^2-go do ^3-ciej sposobu drukowania odpowiednio.
• jeśli trzy %c znajdują specyfikatory formatu, po czym ^{1-szy, 2-gi} i 3 ^rd podciągi będą miały ich zasady określono w 2 ^nd, 3 ^rd i 4 ^th parametr odpowiednio, i tak dalej ...

console.log("%cHello %cWorld%c!!", // string to be printed
            "color: blue;", // applies color formatting to the 1st substring
            "font-size: xx-large;", // applies font formatting to the 2nd substring
            "/* no CSS rule*/" // does not apply any rule to the remaing substring
);

Wyświetla:

Używanie grup do wcięcia wyniku

Dane wyjściowe można zidentyfikować i ująć w składanej grupie w konsoli debugowania za pomocą następujących metod:

• console.groupCollapsed() : tworzy zwiniętą grupę wpisów, które można rozwinąć za pomocą przycisku ujawnienia w celu ujawnienia wszystkich wpisów wykonanych po wywołaniu tej metody;
• console.group() : tworzy rozszerzoną grupę wpisów, które można zwinąć, aby ukryć wpisy po wywołaniu tej metody.

Tożsamość można usunąć dla wpisów późniejszych przy użyciu następującej metody:

• console.groupEnd () : wychodzi z bieżącej grupy, umożliwiając wydrukowanie nowszych wpisów w grupie nadrzędnej po wywołaniu tej metody.

Grupy można kaskadowo, aby pozwolić sobie na wiele zidentyfikowanych warstw wyjściowych lub warstw składanych:

= Collapsed group expanded =>

Czyszczenie konsoli - console.clear ()

Możesz wyczyścić okno konsoli za pomocą metody console.clear() . Spowoduje to usunięcie wszystkich uprzednio wydrukowanych wiadomości w konsoli i może wydrukować komunikat typu „Konsola została wyczyszczona” w niektórych środowiskach.

Interaktywne wyświetlanie obiektów i XML - console.dir (), console.dirxml ()

console.dir(object) wyświetla interaktywną listę właściwości określonego obiektu JavaScript. Dane wyjściowe są przedstawiane jako hierarchiczna lista z trójkątami ujawniania, które pozwalają zobaczyć zawartość obiektów potomnych.

var myObject = {
    "foo":{
        "bar":"data"
    }
};

console.dir(myObject);

wyświetla:

console.dirxml(object) drukuje reprezentację XML elementów potomnych obiektu, jeśli to możliwe, lub reprezentację JavaScript, jeśli nie. Wywołanie console.dirxml() w elementach HTML i XML jest równoważne z wywołaniem console.log() .

Przykład 1:

console.dirxml(document)

wyświetla:

Przykład 2:

console.log(document)

wyświetla:

Przykład 3:

var myObject = {
    "foo":{
        "bar":"data"
    }
};

console.dirxml(myObject);

wyświetla: