JavaScript: Die console() kann mehr als Du denkst

Für den eiligen Leser:

  1. Variablennamen ausgeben
  2. Variablen tabellarisch ausgeben
  3. Funktionsnamen ausgeben
  4. Ausführungszeit messen
  5. Ausgabe gruppieren
  6. Ausgabe in mehreren Ebenen
  7. Platzhalter
  8. console.assert()

Wie jeder Entwickler von Webanwendungen muss ich mich endgültig einmal intensiver mit ECMAScript (früher JavaScript) beschäftigen.

Die klassische Variante Javascript zu debuggen ist die Ausgabe in die Konsole. Die Nutzung eines „echten“ Debuggers wird von Vielen propagiert, aber ein kurzes console.log geht dann häufig doch schneller.
(Bitte keine Diskussion über die Nutzung von Debuggern in den Kommentaren! Danke.)

Die console hat aber noch andere Funktionen als ein einfaches .log  zu bieten, die das Auffinden eines Fehlers vereinfachen können. Ich möchte hier sechs unbekanntere vorstellen.

Variablennamen ausgeben

Die folgenden Variablen sollen in der Konsole ausgegeben werden:

var1 = 'Hans';
var2 = 'Peter';
var3 = 'Klaus';

Ein einfaches console.log(var1, var2, var3);  ergibt folgende Ausgabe:

Hans Peter Klaus

Hat man den Code gerade eben geschrieben, so weiß man sicherlich noch, welche Variablen hier ausgegeben werden. Nach einigen Tagen muss man dann aber doch im Code nachsehen, was da eigentlich ausgegeben wird.
Wenn man aus den Variablen ein Objekt macht, werden die Namen der Variablen mit angezeigt:

console.log({var1, var2, var3});

> Object { var1: "Hans", var2: "Peter", var3: "Klaus" }

Variablen tabellarisch ausgeben:

Enthält ein Objekt Elemente, die mehrere Variablen besitzen, so hilft die Ausgabe in Chrome gar nicht und und in Firefox nur bedingt:

var1 = {vorname: 'Hans',  nachname:'Meyer', Alter: 35};
var2 = {vorname: 'Klaus', nachname:'Schulze', Alter: 62};
var3 = {vorname: 'Peter', nachname:'Hoffmann', Alter: 19};

Firefox:

console.log(var1, var2, var3); > Object { vorname: "Hans", nachname: "Meyer", Alter: 35 } Object { vorname: "Klaus", nachname: "Schulze", Alter: 62 } Object { vorname: "Peter", nachname: "Hoffmann", Alter: 19 }

Chrome:

console.log(var1, var2, var3);

> ▶Object ▶Object ▶Object

console.table() erlaubt eine übersichtlichere Darstellung der Werte. Vorher muss man allerdings das Objekt in ein Array verpacken:

console.table([var1, var2, var3]);

Funktionsnamen ausgeben

Werden die gleichen Variablen an mehreren Stellen in der Konsole angezeigt, so sieht man zwar in welcher Zeile der Befehl steht, ab er nicht welche Funktion dafür verantwortlich war. Dies ist insbesondere interessant, wenn man sein Projekt auf viele Dateien verteilt hat:

const var1 = 'Hans';
const var2 = 'Peter';
const var3 = 'Klaus';

const func1 = () =>
    console.trace('>', var1, var2, var3);

const func2 = () =>
    console.trace('>', var1, var2, var3);

func1();
func2();

Chrome (voller Pfad nur als Tooltip):

Firefox (etwas unübersichtlicher, dafür aber mit vollem Dateipfad):

Ausführungszeit messen

Manchmal möchte man wissen, wie lange eine Funktion benötigt. Hier kann console  ebenfalls helfen (in Chrome mit sinnlosen 10 Nachkommastellen):

console.time('schleife');

let i = 0;
while (i < 10000000)
    i++;

console.timeEnd('schleife');

> Chrome:
schleife: 33.2099609375ms   fntest.js:12

> Firefox:
schleife: timer started    fntest.js:6
schleife: 19.94ms          fntest.js:12

Ausgabe gruppieren

Wenn man Daten zum Beispiel in einer Schleife ausgibt, so kann die Konsole sehr schnell zugemüllt werden. Um die Übersicht zu behalten, kann man die Ausgaben zu einer Gruppe zusammenfassen:

let i = 0;
console.groupCollapsed('Gruppe1');
while (i < 10) {
    console.log(i);
    i++;
}
console.log('Ende der Schleife');

console.groupEnd('Gruppe1');

Alle Ausgaben zwischen console.groupCollapsed()  und console.groupEnd()  werden in ein aufklappbaren Ausgabe zusammengefasst (funktioniert im aktuellen Waterfox v56 leider nicht):

 

 

 

 

Ausgabe in mehreren Ebenen

console-Ausgaben werden normalerweise einfach untereinander ausgegeben. Mit console.group() (oder auch mit console.GroupCollapse() hat man jedoch die Möglichkeit mehrere Ebenen darzustellen. Die Erstellung ist jedoch etwas aufwendig:

console.log("Ebene 1");
console.group();
console.log("Ebene 2");
console.group();
console.log("Ebene 3");
console.log("Ebene 3");
console.groupEnd();
console.log("Wieder Ebene 2");
console.groupEnd();
console.log("Wieder Ebene 1");

Platzhalter

In der console  kann man Platzhalter wie z.B. in PHP oder C benutzen:

console.log('Dies ist ein %s in der Console.', 'Platzhalter');

> Dies ist ein Platzhalter in der Console.

Es gibt vier Platzhalter-Symbole:

  • %s – String
  • %d – Float oder Integer
  • %o – Objekt
  • %c – CSS

Der letzte Punkt ist vielleicht etwas überraschen, deshalb folgt ein kleines Beispiel:

console.log(‚Ich bin ein %cwichtiger Text‘, ‚color: red‘);

Hier erkenn man auch das Problem: Es gibt zwar einen Platzhalter, um den begin des CSS-Bereichs zu kennzeichnen, aber keine Kennzeichnung für das Ende. Man kann es eigentlich nur sinnvoll nutzen, wenn man eine ganze Zeile kennzeichnen möchte:

console.assert()

Diese Methode ist Vielen nicht bekannt, aber durchaus praktisch: Er gibt eine Meldung aus, wenn eine Bedingung nicht erfüllt ist. Ja, richtig gelesen, wenn sie nicht erfüllt ist. Das führt am Anfang zu heftigem Kopfzerbrechen, ich habe mich allerdings nie daran gewöhnt. Hier ein Beispiel. Intuitiv würde man folgendes schreiben, um etwas auszugeben, wenn i  „5“ ist:

for (let i=0; i<10; i++) {
    console.assert(i === 5, i);
}

Die Ausgabe ist zunächst überraschend:

Es werden alle Werte ausgegeben außer der „5“. Das liegt daran, dass assert()  alle Werte ausgibt, die nicht der Bedingung entsprechen („Falsey“ sind). Der Code muss also korrekt lauten:

for (let i=0; i<10; i++) {
   console.assert(i !== 5, i);
}
 
Das liegt an dem Begriff „Assert“. „Assertion“ bedeutet „Behauptung“ und console.assert()  erzeugt eine Ausgabe, wenn die Behauptung falsch ist, also im Fehlerfall. Hat man sich dieses einmal verinnerlicht, kann man diese Methode innvoll einsetzen.
 
—-

WordPress: Eigene Sammelaktionen (Bulk-Actions) definieren

2016-10-20_16-37-31

Hinweis: Dieser Beitrag beschreibt ein Feature, das erst in Version 4.7 verfügbar ist (geplanter Veröffentlichungstermin: 6. Dezember 2016).

Bisher war es schwierig, eigene Sammelaktionen in WordPress hinzuzufügen. Version 4.7 hat einen Hook erhalten, mit dem man einfach die Sammelaktionen erweitern kann.

add_action('bulk_actions-{screen_id}', 'my_bulk_action');

WordPress: Eigene Sammelaktionen (Bulk-Actions) definieren weiterlesen

Zeig Deinen Schreibtisch!

Ich kenne viele WordPress-Entwickler mit ihrem Namen und habe eine ungefähre Vorstellung, wie sie aussehen. Was ich auch interessant fände, wäre die Art wie sie arbeiten. Nutzen sie einen Laptop, wie viele Monitore nutzen sie usw.? Hier ist mein Schreibtisch (ich habe natürlich vorher aufgeräumt :-)):

desktop.small.1

Der Computer besteht aus einem „ASRock Z77 Extreme“-Board mit einem i5-3,4 GHz-Prozessor, 8GB RAM und einer Radeon HD7770-Grafikkarte.
Ich nutze zwei 24-Zoll-Monitore von Benq und ja, das ist ein Fernseher auf der linken Seite. Die Tastatur ist ein „Microsoft Natural Keyboard“ und die Maus eine gute alte Intellimouse.

Ramon Fincken (@ramonfincken) hat mich veralbert, weil ich nur zwei Monitore habe und hat mir ein Bild seiner Konfiguration gesendet:

ramonafincken-small

Welch ein Aufbau! Um ihn zu zitieren: „if it’s worth doing .. it’s worth overdoing”.

Wie sieht Dein Schreibtisch aus? Mach ein Bild und blogge es!

PHP/HTML: einfache und doppelte Anführungszeichen

Wenn ein PHP-Programmierer einen Link aus Variablen erstellt, kann man häufig folgenden Code sehen:

echo '<a href="' . $link . '" id="' . $id .'" class="' . $class . '">' . 
       $linktext . '</a>';

oder

?>
<a href="<?php echo $link; ?>" id="<?php echo $id; ?>" 
   class="<?php echo $class; ?>"<?php echo $linktext; ?>"</a>
<?php

oder

echo "<a href=\"$link\" id=\"$id\" class=\"$class\">$linktext</a>";

Abgesehen vom persönlichen Stil des Programmierers haben die Code-Beispiele eines gemeinsam: sie sind schlecht zu lesen.
„Klar!“, werden jetzt die Programmierer sagen, „In HTML müssen die Attribute in doppelten Anführungszeichen stehen und in PHP muss man eine der oben gezeigten Methoden verwenden“. Sicher? Müssen Attribute wirklich in doppelten Anführungszeichen stehen? Die einfache Antwort ist: Nein!
Ein Blick in die Spezifikation bringt Folgendes an den Tag:

[…]Standardmäßig verlangt SGML, dass alle Attributwerte entweder von doppelten Anführungszeichen (ASCII dezimal 34) oder einfachen Anführungszeichen (ASCII dezimal 39) begrenzt werden. Einfache Anführungszeichen können im Attributwert enthalten sein, wenn der Wert durch doppelte Anführungszeichen begrenzt ist und umgekehrt.[…]

Doppelte oder einfache Anführungszeichen. Das macht die Sache doch viel übersichtlicher:

echo "<a href='$link' id='$id' class='$class'>$linktext</a>";

Wie man sieht ist der Code viel leichter zu lesen und das, weil man einfach die Spezifikation gelesen hat.

Tabelle zeilenweise ausblenden mit jQuery

Möchte man mit jQuery einige Zeilen aus einer Tabelle ausblenden, so könnte man auf folgende einfache Lösung verfallen:

Ursprüngliche Tabelle:

<table>
  <tr><td>Zeile 1</td></tr>
  <tr><td>Zeile 2</td></tr>
  <tr><td>Zeile 3</td></tr>
</table>

Tabelle mit <div> und checkbox:

<table>
  <tr><td>Zeile 1</td></tr>
  <div>
    <tr><td>Zeile 2</td></tr>
  </div>
    <tr><td>Zeile 3</td></tr>
</table>
Zeile 2 verstecken

jQuery-Code zum Ausblenden der Zeile 2:

function hideshow() {
  if ($("#cb_test").attr("checked"))
    $("#test").hide();
  else 
    $("#test").show();
}

Dieser Ansatz funktioniert leider nicht, da es nicht möglich ist, Tabellen- und Textstrukturierungelemente zu mischen. Seit HTML 4 gibt es allerdings das <tbody>-Element, das man für diesen Zweck verwenden kann:

<table>
  <tr><td>Zeile 1</td></tr>
  <tbody>
    <tr><td>Zeile 2</td></tr>
  </tbody>
    <tr><td>Zeile 3</td></tr>
</table>
Zeile 2 verstecken

Laut HTML-Validator des W3C ist diese Lösung „HTML 4.01 Transitional“-valide.

Motorrad-Parkplatz Mashup

Als ich heute so durch die Stadt düste, fielen mir der eine oder andere spezielle Parkplatz für Motorräder auf, die ich bisher nicht kannte. Woher auch? Diese Parkplätze findet man normalerweise auch erst nach Jahren in einer neuen Stadt.

Eigentlich wäre es doch eine gute Google-Maps Mashup-Idee: Man gibt eine Stadt ein und es werden die Parkülätze für Motorräder angezeigt, am besten mit Größe und Beschaffenheit. Freiwillige? Ich habe zum Einen nämlich genug mit meinen WordPress-Plugins zu tun und zum anderen noch nie ein Google-Mashup geschrieben. Obwohl es natürlich eine interessante Herausforderung wäre.

Update: streammp3 new

Ich habe nach einem Kommentar auf userscripts.org mein Greasemonkey-Skript streammp3 new geändert.
Das Skript hängt jetzt nichtm ehr vom Kontakt zu meinem Server ab, was insofern ganz praktisch ist, da nach einem Serverumzug das entscheidende PHP-Skript nicht mehr funktionierte.
BTW: Das Skript durchsucht die aktuelle Webseite nach MP3-Links und fügt ein Icon ein, über das die MP3-Datei gestreamt werden kann und somit nicht erst nach einem vollständigen Download, sondern bereits nach dem ersten Kontakt abgespielt wird.