How-To

JavaScript-Fehler beheben: Den Bugs auf der Spur

Seite 3 / 3

Browser-Remote-Debugging

Wenn kein direkter Zugang über USB oder WLAN möglich ist oder es keinen Support für das externe Gerät gibt, sitzen Entwickler zuweilen ziemlich in der Patsche. Glücklicherweise gibt es auch in diesem Fall eine Lösung. Während die Browser-Hersteller über „Remote Debugging Protocols“ arbeiten, machen sich Werkzeuge wie Weinre, JS Console und Vorlon.JS die so genannte „Dynamic Script Injection“ zunutze.

Browser-Remote-Debugging lässt sich zum Beispiel mit dem Werkzeug Vorlon.JS umsetzen. Dieses hat im Vergleich zu den Developer-Tools allerdings nur einen sehr begrenzten Funktionsumfang. (Screenshot: Vorlon)

Im folgenden Beispiel kommt Vorlon.JS von Microsoft zum Einsatz. In der Demo startet ein Vorlon.JS-Server im Terminal mit dem folgendem Befehl, der sich anschließend unter http://localhost:1337 über einen Browser aufrufen lässt:

Vorlon.JS-Server starten

grunt vorlon

Listing 6

Nun muss man nur noch die „vorlon.html“ aufrufen und schon ist im Vorlon.JS-Dashboard ein neuer Client registriert. Die Kommunikation zwischen dem Server und dem Client verläuft über das Skript http://localhost:1337/vorlon.js in der „vorlon.html“. Wirklich beeindruckend ist der Proxy, der sich über http://localhost:1337/httpproxy erreichen lässt. Denn hier können Entwickler das DOM einer beliebigen Website in Vorlon.JS laden und untersuchen.

Das Werkzeug ist plattformunabhängig, aber Entwickler können damit nicht auf die internen Schnittstellen der Browser zugreifen. Vorlon.JS ist deshalb keine Allzweckwaffe oder gar ein Ersatz für native Developer-Tools. Im Vergleich zu den nativen Developer-Tools ist der Funktionsumfang
überschaubar, auch wenn die Vorlon-Macher mit Plugins versuchen, diesen
Limitierungen entgegenzuwirken.

Unit Testing

Das automatisierte Testen kritischer Quellcode-Bereiche ist ein wesentlicher Punkt der Qualitätssicherung und Fehlerprävention. Entwickler sollten sich dabei weniger im Debugging des kryptischen Quellcodes üben, als viel mehr ihre Zeit und Energie in die testgetriebene Refaktorisierung (TDR) investieren. In der JavaScript-Welt gibt es dafür unzählige Testing-Frameworks und Libraries. Doch nur wenige überzeugen im Alltag. Die Erfahrung zeigt, dass sich für eine erfolgreiche Testing-Suite folgende Komponenten bewährt haben:

  • Mocha – das eigentliche Test-Framework
  • Chai – eine Assertion-Library
  • Sinon – eine Test-Doubles-Library

In der Demo startet der Aufruf der Datei „mocha.html“ die Testing-Suite direkt in einem Browser:

So mancher Entwickler hat seinen ganz eigenen Humor. Für das Unit-Testing-Tool Mocha gibt es zum Beispiel einen witzigen Reporter, der an die Regenbogen-Katze „Nyan“ angelehnt ist. (Screenshot: Mocha)

 

In der Demo lässt sich die Testing-Suite im Terminal mit folgendem Befehl ausführen:

Testing-Suite mocha ausführen

grunt mocha

Listing 7

In seltenen Fällen müssen JavaScript-Entwickler einen Test, der Schwierigkeiten macht, direkt im Browser debuggen. Dafür nutzt die Demo dieses Artikels den Node-Inspector, der im Terminal mit den folgenden Befehlen startet. Anschließend lässt er sich unter http://localhost:8080/debug?port=5858 via Chrome aufrufen.

Node-Inspector starten

grunt node-inspector
grunt mocha-debug

Listing 8

Cross-Browser-Testing

Die hohe Schule des Unit-Testing ist mit Hilfe so genannter Test-Runner möglich, die eine weitere Abstraktionsebene über dem Testing-Framework bilden. Test-Runner erstellen einen Webserver, der die Testing-Suite auf lokalen oder Cloud-basierten Browsern ausführen kann und anschließend die Testergebnisse einsammelt. Da nicht jeder Entwickler über ein Device-Lab verfügt, gibt es Cloud-Testing-Anbieter wie Browserstack und SaurceLabs, um den Code auch mal auf einem älteren Android oder dem aktuellen iPhone auf Herz und Nieren prüfen zu können.

Karma

Der hauseigene Testing-Runner des AngularJS-Teams unterstützt PhantomJS sowie lokale Browser und bietet offizielle Plugins für SaurceLabs und Browserstack.

Karma starten

 

grunt karma

Listing 9

Yeti

Das Projekt stammt aus der YUI-Familie, deren Entwicklung mittlerweile eingestellt ist. Es unterstützt PhantomJS sowie lokale Browser, SaurceLabs und Browserstack über eine hauseigene Tunnel-Software.

Yeti starten

grunt yeti

Listing 10

Zuul

Das von dem Entwickler Roman Shtylman ins Leben gerufene Projekt unterstützt PhantomJS sowie lokale Browser und hat eine fest verbaute SaurceLabs-Intergration.

Zuul starten

grunt zuul

Listing 11

Der Testing-Runner des AngularJS-Teams unterstützt PhantomJS sowie lokale Browser und bietet offizielle Plugins für SaurceLabs und Browserstack. Ein Videocast auf der Startseite führt in die Arbeit mit Karma ein. (Screenshot: Karma)

Fazit

Der Entwickler Remy Sharp bezeichnet Debugging in seinen Talks nicht umsonst als eine Kunstform, die sich im Wesentlichen um das Replizieren, Isolieren und Eliminieren von Fehlern dreht. Grundsätzlich hat er damit recht. Allerdings ist zu häufiges Debugging vor allem ein Anzeichen für eine schlechte Software-Architektur oder die mangelnde Disziplin bei der Entwicklung. Im Vergleich zur klassischen Entwicklung – mit entsprechendem Debugging – funktioniert die testgetriebene Entwicklung (TDD) wesentlich besser und erzeugt darüber hinaus qualitativ sehr hochwertigen und bereits getesteten Quellcode.

Im Alltag geht es jedoch meist nicht ohne Debugging. Deshalb ist es wichtig, die vorhandenen Möglichkeiten zu kennen, um Fehler zielgerichtet und effektiv beheben zu können. Es braucht jedoch auch ausreichend Disziplin, damit Entwickler nicht in alte Muster zurückfallen.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

2 Kommentare
Hans
Hans

Langer Artikel und trotzdem nicht schön zu lesen. Alle Themen werden nur angerissen, meist nur mit ein oder zwei Sätze. Leider fehlen weiterführende Links zu den einzelnen Themen.
Spannendes Thema und trotzdem habe ich nichts gelernt. Sehr Schade.

Antworten
Henry Ruhs

Danke für das Feedback.

Im Wesentlichen hast du es auf den Punkt gebracht und ich kann deine Kritik absolut nachvollziehen. Mir ist die Quadratur des Kreises offenbar nicht gelungen, denn ich wollte auf keine Themen verzichten, obwohl mir im Print-Magazin nur drei Seiten zur Verfügung standen. Am Ende wurde auch noch sehr viel gekürzt und von der Redaktion umgeschrieben :-)

Um das zu kompensieren, hatte ich mir die Mühe gemacht dem Leser ein Demo auf GitHub an die Hand zu geben, wo man Schritt für Schritt nachvollziehen kann.

https://github.com/redaxmedia/javascript-testing-stack

Die weiterführenden Links werde ich an die Redaktion übermitteln.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung