So holen Sie das Beste aus der JavaScript-Konsole heraus

Eines der grundlegendsten Debugging-Tools in JavaScript ist console.log(). Das enthält consolemehrere andere nützliche Methoden, die das Debugging-Toolkit eines Entwicklers erweitern können.

Mit können Sie consoleeinige der folgenden Aufgaben ausführen:

  • Geben Sie einen Timer aus, um das einfache Benchmarking zu erleichtern
  • Geben Sie eine Tabelle aus, um ein Array oder Objekt in einem einfach zu lesenden Format anzuzeigen
  • Wenden Sie mit CSS Farben und andere Stiloptionen auf die Ausgabe an

Das Konsolenobjekt

Das consoleObjekt gibt Ihnen Zugriff auf die Browserkonsole. Hier können Sie Zeichenfolgen, Arrays und Objekte ausgeben, mit denen Sie Ihren Code debuggen können. Das consoleist Teil des windowObjekts und wird vom Browser Object Model (BOM) bereitgestellt.

Wir können auf consolezwei Arten auf das zugreifen :

  1. window.console.log('This works')
  2. console.log('So does this')

Die zweite Option ist im Grunde eine Referenz auf die erstere, daher verwenden wir die letztere, um Tastenanschläge zu speichern.

Ein kurzer Hinweis zur Stückliste: Es gibt keinen festgelegten Standard, daher implementiert jeder Browser diesen auf leicht unterschiedliche Weise. Ich habe alle meine Beispiele sowohl in Chrome als auch in Firefox getestet, aber Ihre Ausgabe kann je nach Browser unterschiedlich aussehen.

Text ausgeben

Das häufigste Element des consoleObjekts ist console.log. In den meisten Szenarien verwenden Sie es, um die Arbeit zu erledigen.

Es gibt vier verschiedene Möglichkeiten, eine Nachricht an die Konsole auszugeben:

  1. log
  2. info
  3. warn
  4. error

Alle vier arbeiten gleich. Sie übergeben lediglich ein oder mehrere Argumente an die ausgewählte Methode. Anschließend wird ein anderes Symbol angezeigt, um die Protokollierungsstufe anzuzeigen. In den folgenden Beispielen sehen Sie den Unterschied zwischen einem Protokoll auf Informationsebene und einem Protokoll auf Warn- / Fehlerebene.

Möglicherweise haben Sie die Fehlerprotokollmeldung bemerkt - sie ist auffälliger als die anderen. Es zeigt sowohl einen roten Hintergrund als auch eine Stapelverfolgung an, wo infound warn nicht. Hat warnjedoch einen gelben Hintergrund in Chrome.

Diese visuellen Unterschiede helfen, wenn Sie Fehler oder Warnungen in der Konsole auf einen Blick erkennen müssen. Sie sollten sicherstellen, dass sie für produktionsbereite Apps entfernt werden, es sei denn, sie sind da, um andere Entwickler zu warnen, dass sie etwas mit Ihrem Code falsch machen.

String-Ersetzungen

Diese Technik verwendet einen Platzhalter in einer Zeichenfolge, der durch die anderen Argumente ersetzt wird, die Sie an die Methode übergeben. Zum Beispiel:

Eingabe :console.log('string %s', 'substitutions')

Ausgabe :string substitutions

Das %sist der Platzhalter für das zweite Argument 'substitutions'nach dem Komma. Alle Zeichenfolgen, Ganzzahlen oder Arrays werden in eine Zeichenfolge konvertiert und ersetzen die %s. Wenn Sie ein Objekt übergeben, wird es angezeigt [object Object].

Wenn Sie ein Objekt übergeben möchten, müssen Sie %ooder %Oanstelle von verwenden %s.

console.log('this is an object %o', { obj: { obj2: 'hello' }})

Zahlen

Die String-Ersetzung kann mit Ganzzahlen und Gleitkommawerten verwendet werden, indem Folgendes verwendet wird:

  • %ioder %dfür ganze Zahlen,
  • %f für Gleitkommazahlen.

Eingabe :console.log('int: %d, floating-point: %f', 1, 1.5)

Ausgabe :int: 1, floating-point: 1.500000

Gleitkommazahlen können so formatiert werden, dass nur eine Ziffer nach dem Dezimalpunkt angezeigt wird %.1f. Sie können %.nfn Ziffern nach der Dezimalstelle anzeigen.

Wenn wir das obige Beispiel so formatieren würden, dass eine Ziffer nach dem Dezimalpunkt für die Gleitkommazahl angezeigt wird, würde dies folgendermaßen aussehen:

Eingabe :console.log('int: %d, floating-point: %.1f', 1, 1.5)

Ausgabe :int: 1, floating-point: 1.5

Formatierungsspezifizierer

  1. %s| Ersetzt ein Element durch eine Zeichenfolge
  2. %(d|i)| Ersetzt ein Element durch eine Ganzzahl
  3. %f | Ersetzt ein Element durch ein Float
  4. %(o|O)| Element wird als Objekt angezeigt.
  5. %c| Wendet das bereitgestellte CSS an

Zeichenfolgenvorlagen

Mit dem Aufkommen von ES6 sind Vorlagenliterale eine Alternative zu Ersetzungen oder Verkettungen. Sie verwenden Backticks (``) anstelle von Anführungszeichen, und Variablen gehen hinein ${}:

const a = 'substitutions';
console.log(`bear: ${a}`);
// bear: substitutions

Objekte werden wie [object Object]in Vorlagenliteralen angezeigt , daher müssen Sie die Details ersetzen %ooder anzeigen %Ooder sie separat protokollieren.

Using substitutions or templates creates code that’s easier to read compared to using string concatenation: console.log('hello' + str + '!');.

Pretty color interlude!

Now it is time for something a bit more fun and colorful!

It is time to make our console pop with different colors with string substitutions.

I will be using a mocked Ajax example that give us both a success (in green) and failure (in red) to display. Here’s the output and code:

const success = [ 'background: green', 'color: white', 'display: block', 'text-align: center'].join(';');
const failure = [ 'background: red', 'color: white', 'display: block', 'text-align: center'].join(';');
console.info('%c /dancing/bears was Successful!', success);console.log({data: { name: 'Bob', age: 'unknown'}}); // "mocked" data response
console.error('%c /dancing/bats failed!', failure);console.log('/dancing/bats Does not exist');

You apply CSS rules in the string substitution with the %c placeholder.

console.error('%c /dancing/bats failed!', failure);

Then place your CSS elements as a string argument and you can have CSS-styled logs. You can add more than one %c into the string as well.

console.log('%cred %cblue %cwhite','color:red;','color:blue;', 'color: white;')

This will output the words ‘red’, ‘blue’ and ‘white’ in their respected colors.

There are quite a few CSS properties supported by the console. I would recommend experimenting to see what works and what doesn’t. Again, your results may vary depending on your browser.

Other available methods

Here are a few other available console methods. Note that some items below have not had their APIs standardized, so there may be incompatibilities between the browsers. The examples were created with Firefox 51.0.1.

Assert()

Assert takes two arguments — if the first argument evaluates to a falsy value, then it displays the second argument.

let isTrue = false;
console.assert(isTrue, 'This will display');
isTrue = true;
console.assert(isTrue, 'This will not');

If the assertion is false, it outputs to the console. It’s displayed as an error-level log as mentioned above, giving you both a red error message and a stack trace.

Dir()

The dir method displays an interactive list of the object passed to it.

console.dir(document.body);

Ultimately, dir only saves one or two clicks. If you need to inspect an object from an API response, then displaying it in this structured way can save you some time.

Table()

The table method displays an array or object as a table.

console.table(['Javascript', 'PHP', 'Perl', 'C++']);

The array’s indices or object property names come under the left-hand index column. Then the values are displayed in the right-hand column.

const superhero = { firstname: 'Peter', lastname: 'Parker',}console.table(superhero);

Note for Chrome users: This was brought to my attention by a co-worker but the above examples of the table method don’t seem to work in Chrome. You can work around this issue by placing any items into an array of arrays or an array of objects:

console.table([['Javascript', 'PHP', 'Perl', 'C++']]);
const superhero = { firstname: 'Peter', lastname: 'Parker',}console.table([superhero]); 

Group()

console.group() is made up of at least a minimum of three console calls, and is probably the method that requires the most typing to use. But it’s also one of the most useful (especially for developers using Redux Logger).

A somewhat basic call looks like this:

console.group();console.log('I will output');console.group();console.log('more indents')console.groupEnd();console.log('ohh look a bear');console.groupEnd();

This will output multiple levels and will display differently depending on your browser.

Firefox shows an indented list:

Chrome shows them in the style of an object:

Each call to console.group() will start a new group, or create a new level if it’s called inside a group. Each time you call console.groupEnd() it will end the current group or level and move back up one level.

I find the Chrome output style is easier to read since it looks more like a collapsible object.

You can pass group a header argument that will be displayed over console.group:

console.group('Header');

You can display the group as collapsed from the outset if you call console.groupCollapsed(). Based on my experience, this seems to work only in Chrome.

Time()

The time method, like the group method above, comes in two parts.

A method to start the timer and a method to end it.

Once the timer has finished, it will output the total runtime in milliseconds.

To start the timer, you use console.time('id for timer') and to end the timer you use console.timeEnd('id for timer') . You can have up to 10,000 timers running simultaneously.

The output will look a bit like this timer: 0.57ms

It is very useful when you need to do a quick bit of benchmarking.

Conclusion

There we have it, a bit of a deeper look into the console object and some of the other methods that come with it. These methods are great tools to have available when you need to debug code.

There are a couple of methods that I have not talked about as their API is still changing. You can read more about them or the console in general on the MDN Web API page and its living spec page.