So debuggen Sie Javascript-Programme im Firefox

Fehler in Javascript sind sehr lästig, weil die Skripts meist in HTML eingebettet, was den Zugang erschwert und die Übersicht behindert.

Schnell fängt man dann an, Variablenwerte und Programmverzweigungen per alert()-Funktion zu überprüfen, was eine recht ineffiziente Methode darstellt.

Doch Abhilfe ist in Sicht: Ein mächtiges Browser-Addon macht für Sie die Aufgabe der Fehlersuche um einiges leichter.

So debuggen Sie Javascript-Programme im Firefox

Wenn Sie Javascript-Routinen überprüfen möchten, gibt es eine viel praktischere Methode. Firebug, das Allzweck-Addon für Programmierer, hat auch hier einiges zu bieten. Ohne jegliche Mühe für Sie können Sie Programmabläufe verfolgen, Variablen einsehen und schrittweise den Ablauf im Script nachvollziehen.

So debuggen Sie mit Firebug

Aktivieren Sie Firebug mit dem Käfer-Symbol oder per F12.

Wechseln Sie auf das Register Skript und laden Sie im Browser die HTML-Seite mit dem Skript, das Sie überprüfen möchten.

Nun sehen Sie im unteren Bildschirmbereich den HTML- und Skriptcode der aktuellen Seite.

Gehen Sie zu einer JS-Zeile, wo Sie mit der Überprüfung beginnen möchten und klicken auf die Zeilennummer davor. Ein roter Punkt zeigt an, dass Sie damit hier einen Haltepunkt angelegt haben.

Sobald nun die Programmausführung an der Zeile angekommen ist, hält die Ausführung an und Sie sehen an der Markierung, dass das Programm sich an der aktuellen Zeile befindet.

Debugging mit Firebug
Debugging mit Firebug

Nun können Sie über die Symbole rechts oder alternativ die Funktionstasten die weitere Ausführung steuern. Per [F11] verfolgen Sie beispielsweise jeden weiteren Schritt, [F10] überspringt Unterroutinen und [F8] lässt das Skript bis zum Ende oder dem nächsten Haltepunkt weiterlaufen.

In jedem Schritt sehen durch Überfahren eines Variablennamens im Quelltext den jeweiligen aktuellen Wert ein. Alternativ haben Sie rechts auch ein Fenster, das alle im aktuellen Sichtbarkeitsbereich gültigen Variablen zusammenfasst.

Sollte die Webseite mit externen Javascipt-Routinen arbeiten, müssen Sie nur die Listbox über dem Quellcode öffnen. Damit laden Sie schnell eine der externen JS-Dateien und können dort genauso debuggen, wie in der Hauptdatei.

So betrachten Sie den Inhalt von Variablen in Javascript

Wollen Sie in PHP den Inhalt von komplizierten Arrays oder Objekten ansehen, verwenden Sie einfach die Funktionen var_dump() oder print_r().

Eine Entsprechung dafür hat Javscript leider nicht zu bieten. Man kann zwar per alert() den Inhalt einfacher Variablen betrachten, bei komplexen Daten klappt das aber nicht mehr.

Um trotzdem bei Problemen den aktuellen Variableninhalt betrachten zu können, gibt es zwei praktikable Möglichkeiten.

Analyse über die Konsole von Firebug

Wenn Sie Webseiten programmieren, setzen Sie vielleicht bereits das mächtige Firebox-Addon “Firebug” ein (mehr darüber lesen Sie hier nach: Firebug hilft bei CSS-Debugging und Programmieren: So machen Sie Ajax-Nachrichten sichtbar).

Mittels Firebug gibt es eine sehr einfachen Methode, um Variablen zu inspizieren:

Aktivieren Sie Firebug über den kleinen Käfer rechts unten im Browser und schalten auf den Reiter Konsole.

Wenn Sie nun in Ihrem Javascript die Funktion console.debug() verwenden, können Sie damit den Inhalt einer Variablen ausgeben lassen.

Hier ein kleines Snippet zur Verdeutlichung:

Das ergibt in der Firebug-Konsole diese Meldung:

auf Firebug-Konsole Variablen inspiziern
auf Firebug-Konsole Variablen inspiziern

Das Objekt console kennt noch viele weitere Methoden, wie sie im Wiki des Projekts nachlesen können.

Der Nachbau von PHP´s print_r()

Nicht in allen Fällen helfen die Möglichkeiten von Firebug weiter. Etwa dann, weil Sie einen anderen Browser verwenden. Darum hat sich jemand die Mühe gemacht, print_r() nachzubilden.

Das Ergebnis der Funktion können Sie direkt als Alertbox ausgeben. Die Inspektion eines HTML-Dokuments über alert(print_r(document.body)), sähe dann so aus:

print_r() fuer Javascript
print_r() fuer Javascript

Programmieren: So machen Sie Ajax-Nachrichten sichtbar

Ajax ist eine mächtige Technik, um beim Programmiereren von Webseiten ohne Neuaufbau der Seite mit dem Server Informationen austauschen zu können.

Allerdings macht die relativ komplizierte Kommunikation die Fehlersuche schwierig. Denn über Ajax lösen Sie in Javascript eine http-Anfrage auf dem Server aus, die dort eine Aktion und das Zurücksenden von Rückgabewerte auslöst.

Das passiert naturgemäß im Hintergrund, so dass Sie für die Fehlersuche nicht einfach eine Debugging-Informationen ausgeben können. Tritt also ein Problem auf, ist es schwierig, die Kommunikation sichtbar zu machen.

Genau dieses Problem können Sie mit dem Firefox-Addon Firebug sehr einfach lösen.

So verfolgen Sie die Ajax-Parameterübergabe per Firebug

Nach der Installation des Addons aktivieren Sie es, zum Beispiel über das Käfer-Symbol ganz rechts unten am Fensterrahmen von Firefox.

Nun teilt sich der untere Bildrahmen auf und der spezielle Bereich von Firebug wird sichtbar.

Schalten Sie hier auf Konsole – Alle. Eventuell erhalten Sie einen Hinweismeldung zu bestehenden Problemem mit Firefox 4. Die betreffen aber nicht das Ajax-Debugging.

Wenn Sie auf der Webseite nun ein Ajax-Aufruf stattfindet, erhält das Fenster einen neuen Eintrag. Der besteht aus dem Typ des http-Zugriffs, der Webadresse, dem http-Erfolgscode und der Antwortzeit.

Öffnen Sie die Details durch Klick auf das Pluszeichen, sehen Sie mehrere Reiter.

Firebug zeigt Ajax-Parameter
Firebug zeigt Ajax-Parameter

Post zeigt Ihnen den Ajax-Aufruf. Das ist also die vom Browser an den Server verschickte Anfrage. Sie erkennen darunter die Parameter, die dabei übergeben wurden.

Die Rückgabewerte finden Sie im Reiter Antwort. Auch hier zeigt Ihnen Firebug die übermittelten Daten an. Wenn Sie den Reiter JSON haben, wurden die Daten in diesem Format übermittelt und Sie können sie entsprechend aufbereitet betrachten.

So gehen Sie bei der Fehlersuche vor

Prüfen Sie die ganze Kette der Kommunikation schrittweise nach:

* hat ihr Javascript die Aufrufparameter so aufbereitet, wie es die “Gegenstelle” auf dem Webserver erwartet?

* ist die URL auf dem Server korrekt, also kommt ein Code 200 bei der Antwort?

* liefert der Serverdienst die Daten so zurück, wie sie es planen?

* wertet ihr Javascript die Serverantwort richtig aus?

So überprüfen Sie Xpath-Ausdrücke live im Firefox

XPath ist eine Abfragesprache für XML und vergleichbare Dokumente. So kann man Xpath zum Beispiel auch dazu verwenden, bestimmte DOM-Knoten in einem HTML-Dokument zu adressieren.

Das braucht man zum Beispiel, wenn man von Javascript aus Elemente in einem HTML-Dokument ansprechen will, die nicht direkt per Name über getElementByName() oder ihren eindeutigen Bezeichner via getElementById() ermitteln lassen.

Ein anderer Nutzen von Xpath ist die Überprüfung von bestimmten Elementen von einem Framework zur Überprüfung von Webapps, wie Selenium.

Das Problem ist nur, dass man sich oft einen der komplizierten Ausdrücke wie //div[@id=’neue_artikel’]/ul/li[1]/a[1] konstruiert, aber nicht direkt auf seine Funktion überprüfen kann.

Das macht man dann umständlich durch Einbau in die jeweilige Anwendung.

Viel einfacher wird es mit dem Firefox-Addon Firebug, das Sie beispielsweise über den Addon-Manager des Firefox installieren können.

So überprüfen Sie Xpath-Ausdrücke direkt in einem Dokument

Aktivieren Sie das Addon über seinen Käfer-Button rechts oben und wechseln zum Reiter Konsole.

Drücken Sie den Knopf zum Aktivieren der Eingabezeile, der sich links von diesem Reiter befindet. Er schaltet die Zeile für eigene Eingaben unterhalb des Fensters ein.

Firebug Knopf Konsoleneingabe
Firebug Knopf Konsoleneingabe

Laden Sie die HTML-Seite oder XML-Datei, für die der Xpath-Ausdruck passen soll.

Geben Sie unten in der Eingabezeile $x() ein. Um etwa alle via gesetzten Anker und Links einer HTML-Seite zu finden, verwenden Sie folgende Eingabe.

$x(‘//a’);

Firebug antwortet mit einem Array der zutreffenden Fundstellen.

Fundstellen Xpath-Überprüfung
Fundstellen Xpath-Überprüfung

Wenn Sie die einzelnen Fundstellen mit der Maus überfahren, sehen Sie jeweils deren Hierarchiepfad im DOM.

Kommt eine leere Ausgabe oder findet der Ausdruck die falschen Elemente, drücken Sie einfach die Pfeiltaste oben, die die Eingabezeile zurückholt, und ändern den Xpath-Befehl, bis es passt.

Webserver: Geschwindigkeit einer Anwendung messen

Wie lange die Ladezeit einer bestimmten URL Ihrer Webapplikation dauert, ermitteln viele Tools, wie etwa der Punkt Netzwerk im Firefox-Addon Firebug.

Allerdings brauchen Sie für eine vernünftige Messung mehr als einen Zugriff, um zufällig zur selben zeit stattfindende Aufrufe der Seite durch andere und ähnliche Effekte auszugleichen. Sie müssten also zum Beispiel zehn Mal dieselbe Seite abrufen, die Werte notieren und einen Mittelwert bilden.

Diesen Job verrichtet das Tool “Apache Bench” für Sie, das in den Apache-Utilities enthalten ist. Unter Ubuntu Linux installieren Sie es so:

 sudo apt-get install apache2-utils

So testen Sie mit Apache Bench eine Website

Um nun 10 Abrufe hintereinander auf eine bestimmte URL durchzuführen, geben Sie zum Beispiel ein

 ab –n 10 http://foobar.de/beispiel

Das Ergebnis ist dann eine größere Menge an Daten, unter denen “Time per request” für Sie den größten Informationsgehalt hat. Das ist die durchschnittliche Ladezeit für die URL.

Apache Bench misst Ladezeiten
Apache Bench misst Ladezeiten

Sie können auch noch das Verhalten bei mehreren gleichzeitigen Zugriffen testen. Dazu gibt es den Parameter –c, wie “concurrency”. So simulieren Sie beispielsweise 100 Abrufe, wovon je 10 gleichzeitig stattfinden:

 ab –n 100 –c 10 http://foobar.de/beispiel

Geht hierbei die Ladezeit nur ein wenig hoch, skaliert Ihr System gut. Andernfalls kommt es mit konkurrierenden Zugriffen schlecht zurecht, was zum Beispiel an Datenbankzugriffen liegen kann, die einander blockieren.

 

 

Halt die Klappe, Alexa! 😤

So, Schluss, aus. Alexa ist abgestöpselt. Stecker aus der Dose, ab ins Regal. Warum? Weil mir das Amazon Echo dauernd reinquatscht. Und weil es mich nicht versteht.

Warum ich von einem simplen „Plop“ so begeistert bin 🎛

VCV-Rack

Ok, es ist mehr, als ein „Plop“ – es ist auch ein „Wi-UUU-Wi-UUU“ und so vieles mehr. Ich spreche von einem modularen Synthesizer. Fast hätte ich mir so ein Ding als Hardware gekauft für über 500 Euro. Doch dann habe ich ein Programm entdeckt, das einen modularen Synthesizer auf dem Computer simuliert.