JavaScript
Konsole

Einführung

Syntax

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

Parameter

Bemerkungen

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

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

Werte tabellieren - console.table ()

In den meisten Umgebungen können Sie mit console.table() Objekte und Arrays in Tabellenform anzeigen.

Zum Beispiel:

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

zeigt wie:

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

zeigt wie:

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

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

zeigt wie:

Stack-Trace bei der Protokollierung einbeziehen - console.trace ()

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

foo();

Zeigt dies in der Konsole an:

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

Hinweis: Sofern verfügbar, ist es auch nützlich zu wissen, dass auf dieselbe Stack-Ablaufverfolgung als Eigenschaft des Error-Objekts zugegriffen werden kann. Dies kann für die Nachbearbeitung und das Sammeln automatisierter Rückmeldungen hilfreich sein.

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

Drucken an die Debugging-Konsole eines Browsers

Die Debugging-Konsole eines Browsers kann zum Drucken einfacher Nachrichten verwendet werden. Dieses Debugging oder Web - log console Konsole kann direkt im Browser (F12 - Taste in den meisten Browsern - Erläuterungen unten für weitere Informationen) geöffnet werden und die log - Methode der console JavaScript - Objekt kann durch folgende Eingabe aufgerufen werden:

console.log('My message');

Wenn Sie dann die Eingabetaste drücken, wird My message in der Debugging-Konsole angezeigt.

console.log() kann mit einer beliebigen Anzahl von Argumenten und Variablen aufgerufen werden, die im aktuellen Bereich verfügbar sind. Mehrere Argumente werden in einer Zeile mit einem kleinen Abstand dazwischen gedruckt.

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

Die log zeigt in der Debugging-Konsole Folgendes an:

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

console.log() kann neben einfachen Strings auch andere Typen wie Arrays, Objekte, Datumsangaben, Funktionen usw. behandeln:

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

Zeigt:

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

Verschachtelte Objekte können reduziert werden:

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

Zeigt:

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

Bestimmte Typen wie Date Objekte und function können unterschiedlich angezeigt werden:

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

Zeigt:

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

Andere Druckmethoden

Neben der log unterstützen moderne Browser auch ähnliche Methoden:

• console.info - kleines informatives Symbol (ⓘ) wird auf der linken Seite der gedruckten Zeichenfolge (n) oder Objekte angezeigt.

• console.warn - Auf der linken Seite wird ein kleines Warnsymbol (!) angezeigt. In einigen Browsern ist der Hintergrund des Protokolls gelb.

• console.error - Das Symbol für kleine Zeiten (⊗) wird auf der linken Seite angezeigt. In einigen Browsern ist der Hintergrund des Protokolls rot.

• console.timeStamp - gibt die aktuelle Uhrzeit und eine angegebene Zeichenfolge aus, ist jedoch nicht standardgemäß:

  console.timeStamp('msg');
  

  Zeigt:

  00:00:00.001 msg
  

• console.trace - gibt den aktuellen Stack-Trace aus oder zeigt dieselbe Ausgabe wie die log , wenn sie im globalen Bereich aufgerufen wird.

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

  Zeigt:

  first
  sec
  (anonymous function)
  

Das obige Bild zeigt alle Funktionen mit Ausnahme von timeStamp in Chrome Version 56.

Diese Methoden verhalten sich ähnlich wie die log und können in verschiedenen Debugging-Konsolen in verschiedenen Farben oder Formaten dargestellt werden.

Bei bestimmten Debuggern können die Informationen zu den einzelnen Objekten weiter erweitert werden, indem Sie auf den gedruckten Text oder ein kleines Dreieck (►) klicken, das auf die jeweiligen Objekteigenschaften verweist. Diese reduzierenden Objekteigenschaften können im Protokoll geöffnet oder geschlossen sein. Weitere Informationen hierzu finden Sie in der console.dir

Messzeit - console.time ()

console.time() können Sie messen, wie lange eine Task in Ihrem Code für die Ausführung benötigt.

Beim Aufruf von console.time([label]) ein neuer Timer console.time([label]) . Wenn console.timeEnd([label]) aufgerufen wird, wird die abgelaufene Zeit in Millisekunden seit dem ursprünglichen Aufruf von .time() berechnet und protokolliert. Aufgrund dieses Verhaltens können Sie rufen .timeEnd() mehrere Male mit dem gleichen Etikett die verstrichene Zeit anmelden , da die ursprüngliche .time() Aufruf gemacht wurde.

Beispiel 1:

console.time('response in');

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

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

wird ausgeben:

response in: 774.967ms
response in: 1402.199ms

Beispiel 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');

wird ausgeben:

Loop time: 40.716ms

Zählen - console.count ()

console.count([obj]) setzt einen Zähler auf den als Argument angegebenen Wert des Objekts. Bei jedem Aufruf dieser Methode wird der Zähler erhöht (mit Ausnahme der leeren Zeichenfolge '' ). Ein Etikett mit einer Nummer wird in der Debugging-Konsole im folgenden Format angezeigt:

[label]: X

label für den Wert des als Argument übergebenen Objekts und X für den Wert des Zählers.

Der Wert eines Objekts wird immer berücksichtigt, auch wenn Variablen als Argumente angegeben werden:

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

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

Zeigt:

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

Zeichenfolgen mit Nummern werden in Number Objekte konvertiert:

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

Zeigt:

42.3: 1
42.3: 2
42.3: 3

Funktionen verweisen immer auf das globale Function :

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

Zeigt:

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

Bestimmte Objekte erhalten bestimmte Zähler, die dem Objekttyp zugeordnet sind, auf den sie sich beziehen:

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);

Zeigt:

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

Leere Zeichenfolge oder Argument fehlt

Wenn bei der sequentiellen Eingabe der count-Methode in der Debug-Konsole kein Argument angegeben wird, wird eine leere Zeichenfolge als Parameter angenommen, dh:

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

Debuggen mit Assertions - console.assert ()

Schreibt eine Fehlernachricht an die Konsole, wenn die Zusicherung false . Ansonsten, wenn die Behauptung true , tut dies nichts.

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

Nach der Assertion können mehrere Argumente angegeben werden (dies können Strings oder andere Objekte sein), die nur gedruckt werden, wenn die Assertion false :

console.assert löst keinen AssertionError (außer in Node.js ), was bedeutet, dass diese Methode mit den meisten console.assert nicht kompatibel ist und die Ausführung des Codes bei einer fehlgeschlagenen Assertion nicht unterbrochen wird.

Konsolenausgabe formatieren

Viele Druckmethoden der Konsole können auch die C-artige Zeichenfolgenformatierung mit % Token verarbeiten:

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

Zeigt an, dass Sam has 100 points .

Die vollständige Liste der Formatbezeichner in Javascript ist:

Erweitertes Styling

Wenn der CSS-Formatbezeichner ( %c ) auf der linken Seite der Zeichenfolge platziert wird, akzeptiert die Druckmethode einen zweiten Parameter mit CSS-Regeln, der eine fein abgestimmte Steuerung der Formatierung dieser Zeichenfolge ermöglicht:

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

Zeigt:

Es ist möglich, mehrere %c Formatbezeichner zu verwenden:

• Jeder Teilstring rechts von %c hat einen entsprechenden Parameter in der Druckmethode.
• Dieser Parameter kann eine emtpy-Zeichenfolge sein, wenn keine CSS-Regeln auf dieselbe Teilzeichenfolge angewendet werden müssen.
• Wenn zwei %c - Format - Spezifizierer zu finden sind, die ^1. (in ummantelten %c ) und ^2. Teilzeichen ihre Regeln in der ^2. und ^3. Parameter des Druckverfahrens jeweils definiert haben.
• wenn drei %c Formatbezeichner gefunden werden, dann die ^{1., 2.} und ^3. Teil ihre Regeln definiert haben in der ^{2., 3.} und ^4. Parameter sind, und so weiter ...

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
);

Zeigt:

Verwenden von Gruppen zum Einrücken der Ausgabe

Die Ausgabe kann identifiziert und in einer reduzierbaren Gruppe in der Debug-Konsole mit den folgenden Methoden eingeschlossen werden:

• console.groupCollapsed() : erstellt eine console.groupCollapsed() Gruppe von Einträgen, die über die Schaltfläche "Disclosure" erweitert werden kann, um alle Einträge console.groupCollapsed() dieser Methode ausgeführt werden.
• console.group() : erstellt eine erweiterte Gruppe von Einträgen, die console.group() können, um die Einträge nach dem console.group() dieser Methode auszublenden.

Die Identifikation kann für hintere Einträge mit der folgenden Methode entfernt werden:

• console.groupEnd () : Beendet die aktuelle Gruppe, sodass neuere Einträge in der übergeordneten Gruppe gedruckt werden können, nachdem diese Methode aufgerufen wurde.

Gruppen können kaskadiert werden, um mehrere identifizierte Ausgabe- oder reduzierbare Ebenen ineinander zuzulassen:

= Collapsed group expanded =>

Konsole löschen - console.clear ()

Sie können das Konsolenfenster mit der Methode console.clear() . Dadurch werden alle zuvor gedruckten Nachrichten in der Konsole entfernt und möglicherweise wird in einigen Umgebungen eine Meldung wie "Konsole wurde gelöscht" ausgegeben.

Objekte und XML interaktiv anzeigen - console.dir (), console.dirxml ()

console.dir(object) zeigt eine interaktive Liste der Eigenschaften des angegebenen JavaScript-Objekts an. Die Ausgabe wird als hierarchische Liste mit Dreiecken angezeigt, in denen Sie den Inhalt untergeordneter Objekte sehen können.

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

console.dir(myObject);

zeigt:

console.dirxml(object) druckt, falls möglich, eine XML-Darstellung der console.dirxml(object) Elemente des Objekts oder die JavaScript-Darstellung, wenn nicht. Das Aufrufen von console.dirxml() für HTML- und XML-Elemente entspricht dem Aufrufen von console.log() .

Beispiel 1:

console.dirxml(document)

zeigt:

Beispiel 2

console.log(document)

zeigt:

Beispiel 3:

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

console.dirxml(myObject);

zeigt: