Zoeken…


Invoering

De foutopsporingsconsole of webconsole van een browser wordt over het algemeen door ontwikkelaars gebruikt om fouten te identificeren, de uitvoeringsstroom te begrijpen, gegevens te loggen en voor vele andere doeleinden tijdens runtime. Deze informatie is toegankelijk via het console object.

Syntaxis

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

parameters

Parameter Beschrijving
obj1 ... objN Een lijst met JavaScript-objecten waarvan de stringvoorstellingen in de console worden uitgevoerd
msg Een JavaScript-tekenreeks die nul of meer vervangingsreeksen bevat.
sub1 ... subN JavaScript-objecten waarmee vervangende tekenreeksen binnen msg moeten worden vervangen.

Opmerkingen

De informatie die wordt weergegeven door een foutopsporings- / webconsole wordt beschikbaar gesteld via de meerdere methoden van het console Javascript-object dat kan worden geraadpleegd via console.dir(console) . Naast de eigenschap console.memory zijn de weergegeven methoden over het algemeen de volgende (afkomstig van de uitvoer van Chromium):

De console openen

In de meeste huidige browsers is de JavaScript-console geïntegreerd als een tabblad in Developer Tools. De onderstaande sneltoetsen openen Developer Tools, het kan nodig zijn om daarna naar het juiste tabblad te schakelen.


Chrome

Het "Console" -paneel van Chrome DevTools openen :

  • Windows / Linux: een van de volgende opties.

    • Ctrl + Shift + J
    • Ctrl + Shift + I en klik vervolgens op het tabblad "Webconsole" of druk op ESC om de console in en uit te schakelen
    • F12 en klik vervolgens op het tabblad "Console" of druk op ESC om de console in en uit te schakelen
  • Mac OS: Cmd + Opt + J


Firefox

Het "Console" -paneel openen in Firefox's Developer Tools :

  • Windows / Linux: een van de volgende opties.

    • Ctrl + Shift + K
    • Ctrl + Shift + I en klik vervolgens op het tabblad "Webconsole" of druk op ESC om de console in en uit te schakelen
    • F12 en klik vervolgens op het tabblad "Webconsole" of druk op ESC om de console in en uit te schakelen
  • Mac OS: Cmd + Opt + K


Edge en Internet Explorer

Het "Console" -paneel openen in de F12 Developer Tools :

  • F12 en klik vervolgens op het tabblad "Console"

Safari

Als u het "Console" -paneel opent in Safari's Web Inspector , moet u eerst het ontwikkelmenu inschakelen in Safari's Voorkeuren

safari voorkeuren

Vervolgens kunt u kiezen uit "Ontwikkelen-> Foutenconsole weergeven" in de menu's of op + Optie + C drukken


Opera

De "console" openen in opera:

  • Ctrl + Shift + I en klik vervolgens op het tabblad "Console"

Compatibiliteit

Wanneer u Internet Explorer 8 of eerdere versies gebruikt of emuleert (bijvoorbeeld via compatibiliteitsweergave / Enterprise-modus), wordt de console alleen gedefinieerd als de Developer Tools actief zijn, zodat de instructies console.log() een uitzondering kunnen veroorzaken en kunnen voorkomen dat code wordt uitgevoerd. Om dit te verminderen, kunt u controleren of de console beschikbaar is voordat u zich aanmeldt:

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

Of aan het begin van uw script kunt u bepalen of de console beschikbaar is en zo niet, definieer een null-functie om al uw referenties op te vangen en uitzonderingen te voorkomen.

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

Merk op dat dit tweede voorbeeld alle consolelogboeken stopt, zelfs als het ontwikkelaarsvenster is geopend.

Het gebruik van dit tweede voorbeeld zal het gebruik van andere functies zoals console.dir(obj) uitsluiten console.dir(obj) tenzij dat specifiek is toegevoegd.

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:

(inhoudsopgave) waarde
0 "Hallo"
1 "wereld"
console.table({foo: 'bar', bar: 'baz'});

wordt weergegeven als:

(inhoudsopgave) waarde
"Foo" "bar"
"bar" "Baz"

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:

voer hier de afbeeldingsbeschrijving in

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)
    

Console functies

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

uitgang

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

Bewering met meerdere objecten als parameters

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:

specifier uitgang
%s Hiermee wordt de waarde opgemaakt als een tekenreeks
%i of %d Hiermee wordt de waarde opgemaakt als een geheel getal
%f Hiermee wordt de waarde opgemaakt als een zwevende kommawaarde
%o Hiermee wordt de waarde opgemaakt als een uitbreidbaar DOM-element
%O Hiermee wordt de waarde opgemaakt als een uitbreidbaar JavaScript-object
%c Past CSS-stijlregels toe op de uitvoertekenreeks zoals opgegeven door de tweede parameter

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:

uitgang

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:

meerdere CSS-specificatie-uitvoer


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:

Samengevouwen groep = Collapsed group expanded => Uitgebreide groep

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:

voer hier de afbeeldingsbeschrijving in


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:

voer hier de afbeeldingsbeschrijving in

Voorbeeld 2:

console.log(document)

displays:

voer hier de afbeeldingsbeschrijving in

Voorbeeld 3:

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

console.dirxml(myObject);

displays:

voer hier de afbeeldingsbeschrijving in



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow