JavaScript auf dem iPhone debuggen: die Konsole nutzen

Warum du auf dem iPhone eine Konsole brauchst

Stößt JavaScript auf einen Fehler, bricht es den betroffenen Code ab – und die Seite wirkt einfach eingefroren. In der Konsole steht dieser Fehler samt der Zeile, in der er passiert ist. Ohne Konsole siehst du nur das Symptom, nie die Ursache.

Code Editor hat eine eingebaute Konsole: Ausgaben von console.log, Warnungen und Fehler mit Zeilennummer erscheinen direkt unter der Live-Vorschau, und ein Tipp auf einen Fehler springt zur passenden Zeile.

console.log, console.warn und console.error

Diese drei Methoden decken den Großteil des Debuggens ab. Alle nehmen mehrere Werte mit Komma getrennt an, sodass du deine Ausgaben beschriften kannst.

const items = ["apple", "pear"];

console.log("Items:", items);
console.warn("Only", items.length, "items");
console.error("Could not load prices");

• console.log – Alltagsausgaben: Werte, Zwischenstände, „bin hier“-Meldungen
• console.warn – etwas Unerwartetes, das nicht fatal ist, etwa eine leere Liste
• console.error – etwas ist schiefgegangen, zum Beispiel eine fehlgeschlagene Anfrage

Ein einfacher Ablauf zum Debuggen

Die meisten Fehler findest du, indem du deine Annahmen nacheinander prüfst. Gib den Wert direkt vor der Zeile aus, die sich falsch verhält, und vergleiche ihn mit dem, was du erwartest.

Ein Klassiker: Eine Summe kommt als Text statt als Zahl heraus. Die Ausgabe zeigt "053" statt 8, weil ein Preis der String "5" ist und der Operator + Strings aneinanderhängt, statt zu addieren. Mit Number(price) umgewandelt stimmt das Ergebnis.

function total(prices) {
  let sum = 0;
  for (const price of prices) {
    sum += price;
  }
  return sum;
}

console.log(total(["5", 3])); // "053" instead of 8

Häufige Fehlermeldungen auf iPhone und iPad

Safari und andere Browser auf iPhone und iPad nutzen Apples JavaScript-Engine, und deren Meldungen klingen anders als die in Chrome-Tutorials. Hier sind die häufigsten mit ihrer üblichen Ursache. Die Meldungen sind englisch, so wie sie auch in der Konsole stehen.

So liest du eine Fehlermeldung

Eine Fehlermeldung hat drei nützliche Teile. Der Typ (ReferenceError, TypeError, SyntaxError) nennt die Kategorie. Der Text erklärt, was schiefging, und zitiert oft in Klammern genau den Ausdruck. Und die Zeilennummer sagt dir, wo du suchen musst.

Achtung: Die Zeile mit dem Fehler ist nicht immer die Zeile mit dem Fehler im Code. Ist button in Zeile 12 null, liegt das eigentliche Problem vielleicht an einer falschen id im HTML oder an einem script-Tag im head, bevor der body existiert. Fang bei der gemeldeten Zeile an und verfolge den Wert rückwärts bis zu seiner Herkunft.

• SyntaxError: Der Code konnte gar nicht gelesen werden – prüfe Klammern, Anführungszeichen und Kommas rund um die Zeile.
• ReferenceError: Ein Name existiert nicht – prüfe Schreibweise und Deklaration.
• TypeError: Ein Wert hat den falschen Typ – gib ihn direkt vor der Zeile aus.

In der Konsole ausprobieren

Manchmal willst du nur wissen, was ein Ausdruck ergibt – was kommt bei "5" + 3 heraus, wie verhält sich eine Array-Methode? In Code Editor tippst du JavaScript direkt in die Eingabe der Konsole und siehst das Ergebnis sofort, mit Verlauf wie im Terminal. Das geht oft schneller, als die Datei zu ändern und neu zu laden.

Vor dem Veröffentlichen aufräumen

Debug-Ausgaben sind für dich gedacht. Entferne vor dem Veröffentlichen console.log-Zeilen, die interne Werte zeigen, behalte console.error für echte Fehler und sorg dafür, dass die Konsole fehlerfrei bleibt, wenn du die Seite wie ein Besucher benutzt.