JavaScript
Trösta

Introduktion

Syntax

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

parametrar

Anmärkningar

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

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

Tabuleringsvärden - konsol.tabell ()

I de flesta miljöer kan console.table() användas för att visa objekt och matriser i tabellformat.

Till exempel:

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

skärmar som:

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

skärmar som:

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, ['namn', 'personId']);

skärmar som:

Inklusive en stapelspår vid loggning - console.trace ()

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

foo();

Visar detta i konsolen:

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

Obs: När det är tillgängligt är det också bra att veta att samma stapelspår är tillgängligt som en egenskap för felobjektet. Detta kan vara användbart för efterbehandling och insamling av automatiserad feedback.

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

Skriva ut till en webbläsares felsökningskonsol

En webbläsares felsökningskonsol kan användas för att skriva ut enkla meddelanden. Denna felsökning eller webbkonsol kan öppnas direkt i webbläsaren ( F12- nyckel i de flesta webbläsare - se anmärkningar nedan för mer information) och log för console Javascript-objekt kan åberopas genom att skriva följande:

console.log('My message');

Genom att trycka på Enter visar detta My message i felsökningskonsolen.

console.log() kan anropas med valfritt antal argument och variabler som finns tillgängliga i det aktuella omfånget. Flera argument skrivs ut på en rad med ett litet avstånd mellan dem.

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

log visar följande i felsökningskonsolen:

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

Förutom vanliga strängar kan console.log() hantera andra typer, som matriser, objekt, datum, funktioner osv.:

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

Visar:

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

Kapslade objekt kan kollapsas:

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

Visar:

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

Vissa typer som Date och function kan visas annorlunda:

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

Visar:

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

Andra tryckmetoder

Förutom de log metoden, moderna webbläsare stöder också liknande metoder:

• console.info - den lilla informativa ikonen (ⓘ) visas på vänster sida av den eller de tryckta strängarna eller objektet.

• console.warn - liten varningsikon (!) visas på vänster sida. I vissa webbläsare är loggens bakgrund gul.

• console.error - ikon för små gånger (⊗) visas på vänster sida. I vissa webbläsare är loggens bakgrund röd.

• console.timeStamp - matar ut aktuell tid och en specificerad sträng, men är icke-standard:

  console.timeStamp('msg');
  

  Visar:

  00:00:00.001 msg
  

• console.trace - matar ut det aktuella stapelspåret eller visar samma utgång som log om den anropas i det globala omfånget.

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

  Visar:

  first
  sec
  (anonymous function)
  

Bilden ovan visar alla funktioner, med undantag för timeStamp , i Chrome version 56.

Dessa metoder uppför sig på samma sätt som log och i olika felsökningskonsoler kan återges i olika färger eller format.

I vissa felsökare kan informationen om enskilda objekt utvidgas ytterligare genom att klicka på den tryckta texten eller på en liten triangel (►) som hänvisar till respektive objektegenskaper. Dessa kollapsande objektegenskaper kan vara öppna eller stängda i loggen. Se console.dir för ytterligare information om detta

Mätningstid - konsol.tid ()

console.time() kan användas för att mäta hur lång tid en uppgift i din kod tar att köra.

console.time([label]) ringer console.time([label]) startar en ny timer. När console.timeEnd([label]) anropas, räknas den förflutna tiden i millisekunder eftersom det ursprungliga .time() beräknas och loggas. På grund av detta beteende kan du ringa .timeEnd() flera gånger med samma etikett för att logga den förflutna tiden sedan det ursprungliga .time() gjordes.

Exempel 1:

console.time('response in');

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

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

kommer att mata ut:

response in: 774.967ms
response in: 1402.199ms

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

kommer att mata ut:

Loop time: 40.716ms

Räknar - konsol.antal ()

console.count([obj]) sätter en räknare på objektets värde som anges som argument. Varje gång denna metod åberopas ökas räknaren (med undantag för den tomma strängen '' ). En etikett tillsammans med ett nummer visas i felsökningskonsolen enligt följande format:

[label]: X

label representerar värdet på objektet som skickas som argument och X representerar räknarens värde.

Ett objekts värde beaktas alltid, även om variabler tillhandahålls som argument:

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

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

Visar:

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

Strängar med siffror konverteras till Number objekt:

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

Visar:

42.3: 1
42.3: 2
42.3: 3

Funktioner pekar alltid på det globala Function :

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

Visar:

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

Vissa objekt får specifika räknare kopplade till den typ av objekt de refererar till:

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

Visar:

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

Tom sträng eller frånvaro av argument

Om inget argument tillhandahålls medan man räknar in räkningsmetoden i felsökningskonsolen antas en tom sträng som parameter, dvs:

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

Felsökning med påståenden - console.assert ()

Skriver ett felmeddelande till konsolen om påståendet är false . Annars, om påståendet är true , gör detta ingenting.

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

Flera argument kan tillhandahållas efter påståendet - det kan vara strängar eller andra objekt - som endast kommer att skrivas ut om påståendet är false :

console.assert inte kasta en AssertionError (utom i Node.js ), vilket innebär att denna metod är oförenlig med de flesta tester ramar och att körning av kod kommer inte att bryta på en misslyckad påstående.

Formatera konsolutgång

Många av konsolens utskriftsmetoder kan också hantera C-liknande strängformatering med hjälp av % tokens:

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

Visar Sam has 100 points .

Den fullständiga listan med formatspecifikationer i Javascript är:

Avancerad styling

När CSS-formatspecifikationen ( %c ) placeras på vänster sida av strängen, accepterar utskriftsmetoden en andra parameter med CSS-regler som tillåter finkornig kontroll över formateringen av den strängen:

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

Visar:

Det är möjligt att använda flera %c format:

• varje substring till höger om en %c har en motsvarande parameter i utskriftsmetoden;
• denna parameter kan vara en emtpy-sträng, om det inte finns något behov att tillämpa CSS-regler på samma substring;
• om två %c formatspecificerare hittas, den ^{1: a} (innesluten i %c kommer) och ^{2: a} träng har sina regler definieras i ^{2: a} och ^{3: e} parameter hos utskriftsmetoden respektive.
• om tre %c formatspecificerare hittas, sedan ^{1: a, 2: a} och ^{3: e} delsträngar kommer att ha sina regler definieras i ^{2: a, 3: e} och ^{4: e} parameter respektive, och så vidare ...

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

Visar:

Använda grupper för att indraga utdata

Utdata kan identifieras och bifogas i en hopfällbar grupp i felsökningskonsolen med följande metoder:

• console.groupCollapsed() : skapar en kollapsad grupp av poster som kan utökas genom avslöjningsknappen för att avslöja alla poster som utförs efter att denna metod har åberopats;
• console.group() : skapar en utvidgad grupp med poster som kan kollapsas för att dölja posterna efter att denna metod har åberopats.

Identifieringen kan tas bort för posterior med hjälp av följande metod:

• console.groupEnd () : lämnar den aktuella gruppen, så att nyare poster kan skrivas ut i modergruppen efter att denna metod har åberopats.

Grupper kan kaskadas för att tillåta flera identifierade utdata eller hopfällbara lager i varandra:

= Collapsed group expanded =>

Rensa konsolen - console.clear ()

Du kan rensa konsolfönstret med metoden console.clear() . Detta tar bort alla tidigare tryckta meddelanden i konsolen och kan skriva ut ett meddelande som "Konsol rensades" i vissa miljöer.

Visa objekt och XML interaktivt - console.dir (), console.dirxml ()

console.dir(object) visar en interaktiv lista över egenskaperna för det angivna JavaScript-objektet. Utgången presenteras som en hierarkisk lista med avslöjande trianglar som låter dig se innehållet i barnobjekt.

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

console.dir(myObject);

visar:

console.dirxml(object) skriver ut en XML-representation av efterkommande element till objektet om möjligt, eller JavaScript-representationen om inte. Att ringa console.dirxml() på HTML- och XML-element motsvarar samtalet console.log() .

Exempel 1:

console.dirxml(document)

visar:

Exempel 2:

console.log(document)

visar:

Exempel 3:

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

console.dirxml(myObject);

visar: