JavaScript
Troosten

Invoering

Syntaxis

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

parameters

Opmerkingen

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

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

Tabulatiewaarden - console.table ()

In de meeste omgevingen kan console.table() worden gebruikt om objecten en arrays in tabelvorm weer te geven.

Bijvoorbeeld:

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

wordt weergegeven als:

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

wordt weergegeven als:

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

wordt weergegeven als:

Een stacktracering opnemen bij het loggen - console.trace ()

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

foo();

Zal dit weergeven in de console:

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

Opmerking: waar beschikbaar is het ook handig om te weten dat dezelfde stacktracering toegankelijk is als een eigenschap van het object Error. Dit kan handig zijn voor het nabewerken en het verzamelen van geautomatiseerde feedback.

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

Afdrukken naar de foutopsporingsconsole van een browser

De foutopsporingsconsole van een browser kan worden gebruikt om eenvoudige berichten af te drukken. Deze foutopsporing of webconsole kan rechtstreeks in de browser worden geopend ( F12- toets in de meeste browsers - zie Opmerkingen hieronder voor meer informatie) en de log van het Javascript-object van de console kan worden opgeroepen door het volgende te typen:

console.log('My message');

Vervolgens wordt door op Enter te drukken My message in de foutopsporingsconsole.

console.log() kan worden opgeroepen met een willekeurig aantal argumenten en variabelen die beschikbaar zijn in het huidige bereik. Meerdere argumenten worden op één regel afgedrukt met een kleine spatie ertussen.

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

De log geeft het volgende weer in de foutopsporingsconsole:

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

Naast gewone tekenreeksen kan console.log() andere typen aan, zoals arrays, objecten, datums, functies, enz .:

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

displays:

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

Geneste objecten kunnen worden samengevouwen:

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

displays:

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

Bepaalde types zoals Date objecten en function s mogelijk anders weergegeven:

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

displays:

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

Andere afdrukmethoden

In aanvulling op de log methode, moderne browsers ondersteunen ook soortgelijke methoden:

• console.info - klein informatief pictogram (ⓘ) verschijnt aan de linkerkant van de afgedrukte string (s) of object (en).

• console.warn - links verschijnt een klein waarschuwingspictogram (!). In sommige browsers is de achtergrond van het logboek geel.

• console.error - pictogram kleine tijden (⊗) verschijnt aan de linkerkant. In sommige browsers is de achtergrond van het logboek rood.

• console.timeStamp - voert de huidige tijd en een opgegeven string uit, maar is niet-standaard:

  console.timeStamp('msg');
  

  displays:

  00:00:00.001 msg
  

• console.trace - voert de huidige stacktracering uit of geeft dezelfde uitvoer als de log als deze in de globale scope wordt aangeroepen.

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

  displays:

  first
  sec
  (anonymous function)
  

De bovenstaande afbeelding toont alle functies, met uitzondering van timeStamp , in Chrome-versie 56.

Deze methoden gedragen zich op dezelfde manier als de log en kunnen in verschillende foutopsporingsconsoles in verschillende kleuren of indelingen worden weergegeven.

In bepaalde debuggers kan de individuele objectinformatie verder worden uitgebreid door te klikken op de afgedrukte tekst of een klein driehoekje (►) dat verwijst naar de respectieve objecteigenschappen. Deze samenvallende objecteigenschappen kunnen open of gesloten zijn in het logboek. Zie console.dir voor meer informatie hierover

Tijd meten - console.time ()

console.time() kan worden gebruikt om te meten hoe lang een taak in uw code nodig heeft om te worden uitgevoerd.

Door console.time([label]) aan te roepen console.time([label]) wordt een nieuwe timer gestart. Wanneer console.timeEnd([label]) wordt aangeroepen, wordt de verstreken tijd, in milliseconden, aangezien de oorspronkelijke .time() wordt berekend en vastgelegd. Vanwege dit gedrag, kunt u bellen .timeEnd() meerdere keren met hetzelfde label aan de verstreken tijd in te loggen sinds de oorspronkelijke .time() oproep werd gedaan.

Voorbeeld 1:

console.time('response in');

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

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

zal uitvoeren:

response in: 774.967ms
response in: 1402.199ms

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

zal uitvoeren:

Loop time: 40.716ms

Tellen - console.count ()

console.count([obj]) plaatst een teller op de waarde van het object als argument. Elke keer dat deze methode wordt aangeroepen, wordt de teller verhoogd (met uitzondering van de lege string '' ). Een label samen met een nummer wordt in de foutopsporingsconsole weergegeven volgens het volgende formaat:

[label]: X

label vertegenwoordigt de waarde van het doorgegeven object als argument en X staat voor de waarde van de teller.

De waarde van een object wordt altijd in overweging genomen, zelfs als variabelen als argumenten worden opgegeven:

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

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

displays:

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

Strings met nummers worden geconverteerd naar Number objecten:

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

displays:

42.3: 1
42.3: 2
42.3: 3

Functies wijzen altijd naar het globale Function :

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

displays:

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

Bepaalde objecten krijgen specifieke tellers die zijn gekoppeld aan het type object waarnaar ze verwijzen:

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

displays:

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

Lege string of afwezigheid van argument

Als er geen argument wordt opgegeven tijdens het opeenvolgend invoeren van de telmethode in de foutopsporingsconsole , wordt een lege string aangenomen als parameter, dat wil zeggen:

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

Foutopsporing met beweringen - console.assert ()

Schrijft een foutbericht naar de console als de bewering false . Anders, als de bewering true , doet dit niets.

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

Na de bewering kunnen meerdere argumenten worden verstrekt - dit kunnen strings of andere objecten zijn - die alleen worden afgedrukt als de bewering false :

console.assert werpt niet een AssertionError (behalve in Node.js ), wat betekent dat deze wijze onverenigbaar is met de meeste toetsingskaders en dat uitvoering van code zal niet breken na een mislukte bewering.

Console-uitvoer formatteren

Veel van de afdrukmethoden van de console kunnen ook C-achtige tekenreeksopmaak verwerken, met behulp van % tokens:

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

Geeft Sam has 100 points .

De volledige lijst met opmaakspecificaties in Javascript is:

Geavanceerde styling

Wanneer de CSS-indelingsspecificatie ( %c ) aan de linkerkant van de tekenreeks wordt geplaatst, accepteert de afdrukmethode een tweede parameter met CSS-regels die fijnmazige controle over de opmaak van die tekenreeks mogelijk maken:

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

displays:

Het is mogelijk om meerdere %c formaatspecificaties te gebruiken:

• elke substring rechts van een %c heeft een overeenkomstige parameter in de afdrukmethode;
• deze parameter kan een emtpy-string zijn, als het niet nodig is om CSS-regels toe te passen op dezelfde substring;
• Als beide %c format specificeerders worden gevonden, de ^1e (omhuld %c wordt) en ^2e subreeks hun regels respectievelijk gedefinieerd in de ^2e en ^3e parameter van de drukmethode.
• Als drie %c format specificeerders worden aangetroffen, de ^{1e, 2e} en ^3e substrings moeten hun regels in de 2 gedefinieerde ^e, 3 ^en 4 ^de parameter respectievelijk enzovoort ...

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

displays:

Groepen gebruiken om output te laten inspringen

Uitvoer kan worden geïdentificeerd en ingesloten in een opvouwbare groep in de foutopsporingsconsole met de volgende methoden:

• console.groupCollapsed() : maakt een samengevouwen groep items die kan worden uitgebreid via de knop voor openbaarmaking om alle items weer te geven die zijn uitgevoerd nadat deze methode is aangeroepen;
• console.group() : maakt een uitgebreide groep items die kunnen worden samengevouwen om de items te verbergen nadat deze methode is aangeroepen.

De identificatie kan voor posterieure invoer worden verwijderd met behulp van de volgende methode:

• console.groupEnd () : verlaat de huidige groep, waardoor nieuwere items kunnen worden afgedrukt in de bovenliggende groep nadat deze methode is aangeroepen.

Groepen kunnen in cascade worden geplaatst om meerdere geïdentificeerde uitvoer of opvouwbare lagen binnen elkaar mogelijk te maken:

= Collapsed group expanded =>

De console wissen - console.clear ()

U kunt het consolevenster wissen met de methode console.clear() . Hiermee worden alle eerder afgedrukte berichten in de console verwijderd en wordt in sommige omgevingen mogelijk een bericht afgedrukt zoals "Console is gewist".

Objecten en XML interactief weergeven - console.dir (), console.dirxml ()

console.dir(object) geeft een interactieve lijst weer met de eigenschappen van het opgegeven JavaScript-object. De uitvoer wordt gepresenteerd als een hiërarchische lijst met driehoeken waarmee u de inhoud van onderliggende objecten kunt zien.

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

console.dir(myObject);

displays:

console.dirxml(object) drukt een XML-weergave af van de onderliggende elementen van het object indien mogelijk, of de JavaScript-weergave indien niet. Het aanroepen van console.dirxml() op HTML- en XML-elementen is hetzelfde als het aanroepen van console.log() .

Voorbeeld 1:

console.dirxml(document)

displays:

Voorbeeld 2:

console.log(document)

displays:

Voorbeeld 3:

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

console.dirxml(myObject);

displays: