mobile dev hint #1 – Remote Debugging Websites on iOS Devices

When it comes to mobile testing, we need to talk about testing on real devices. What seems to be an easy task for the tester, could be hard when you try to debug device specific errors on the device itself.

This short guide will help you with the setup of the remote debugging with the Safari Developer Tools. It is easy as counting to three, but you need to find the right settings. Weiterlesen

node.js – Debugging in PHPStorm auf der VM

Bei Mayflower ist es üblich, dass dem Entwicklerteam für jedes Projekt eine virtuelle Maschine zum Entwickeln zur Verfügung steht. Im einem unserer letzten Projekte hatten wir einen größeren Service auf Basis von Node.js zu erstellen. Dabei stellte sich heraus, dass das Debugging von JavaScript unter Node.js eine echte Herausforderung ist. Wie wir dennoch in unserem Setup mit der Entwickler-VM zum Debuggen gekommen sind, beschreibt dieser Artikel. Weiterlesen

Javascript Debugging – Vortrag@München

Am kommenden Donnerstag, den 26.01.2012 findet ein weiterer öffentlicher Vortrag im Mayflower-Büro in München statt (Mannhardtstraße 6, S-Bahn Isartor).

Beginn ist um 18:00 Uhr, Thema des Vortrags ist „Javascript Debugging / Remote Debugging„.

Probleme beim Debugging von JavaScript? Das sollte nicht sein!
Vorgestellt werden Language Basics, Unterschiede der Browser-JS Engines
und verschiedene bekannte Probleme – auch mit dem Internet Explorer. Wie
gehe ich beim Debugging mit JavaScript vor? Welche Möglichkeiten bieten
mir die verschiedenen Tools? Ein weiterer Teil widmet sich dem Thema
Remote Debugging im Mobile Web.

Die „Donnerstags-Vorträge“ werden sowohl in Würzburg als auch in München gehalten. Bei Interesse einfach das Blog beobachten, um auf dem Laufenden zu bleiben!

Wir freuen uns auf viele Teilnehmer!

Anfahrt zum Mayflowerbüro München

10.12. Lösungen für Debugging von Mobile Web Apps

Webkit Web Inspector (Remote)

Dass Firebug in JavaScript programmiert wurde dürfte den meisten bekannt sein. Das gleiche gilt für den WebInspector von WebKit, wie er in Safari oder Google Chrome zu finden ist. Es dürfte also nicht wundern, dass für mobile Geräte mit Weinre von Patrick Mueller bereits 2010 eine Portierung des WebInspectors geschaffen wurde, die über eine JS-Include auf der im Website-Header im Mobilen Browser Remote Debugging Funktionalität zur Verfügung stellt. Somit kann bequem über dem Desktop eine Mobile Webseite debugged werden. Weinre läuft heute als PhoneGap Projekt, ist sozusagen Standard und ist natürlich auf GitHub zu finden.

Das Ganze hat aber leider eben leider Grenzen, was Features wie Breakpoints, Backtraces und Profiling angeht, d.h. genau die nützlichen Features, die normalerweis unter dem “Script”-Tab im Debugger-Panel zu finden sind.

JavaScript Remote Debugging mit WebKit/Chrome

Der nächste konsequente Schritt war also, den Debugger direkt in den Browser Runtime zu heben und eine Remote API anzubieten bzw. eine Verbindung zu dem ohnehin schon existierenden V8 DebuggerProtocol zu schaffen, dass sich allerdings nur auf JavaScript Debugging beschränkt. Das Gesamtpaket nennt sich dann WebKit Remote Debugging Protocol. Währenddessen arbeitete Google auch am ChromeDevToolsProtocol was aber mittlerweile deprecated ist.

Seit Frühjahr diesen Jahres bietet nun WebKit sein Remote Debugging Feature an, welcher praktisch alle bekannten WebInspector Features unterstützt – dazu zählen:

  • JavaScript Console & JS Debugger
  • CSS Debugging & Live Änderungen
  • DOM Manipulation & Debugging – z.B. DOM Knoten auf Änderungen durch JS Events überwachen (DOM Mutation Events)
  • Netzwerk & Timeline – Verfolgung von Netzwerk-Aktivitäten auf der Seite (HTTP, WebSocket, Timings)
  • Resourcen – LocalStorage, ApplicationCache, Cookies

Das Feature kann bereits seit einigen Chrome Versionen getestet werden. Eine aktuelle Chrome Version bevorzugt kann eine Debugger-Instanz mit chrome --remote-debugging-port=9222 gestartet wird.

Sodann ist eine zweite Browserinstanz für den Remote Web Inspector nötig – diese muss jedoch Ihr eigenes Nutzerprofil verwenden, um Probleme zu vermeiden: chrome –user-data-dir=<existierendes Verzeichnis>

Mit Navigation auf http://localhost:9222 im zweiten Browserfenster findet sich nun eine Thumbnail-Übersicht der geöffneten Tabs des zu debuggenden Browsers. Ein weiterer Klick auf das ein Thumbnail lädt nun den Debugger auf die komplette Seite, mit dem wie gewohnt gearbeitet werden kann.

Somit kann zusammenfassend folgendes zur Funktionsweise gesagt werden:

  • Der Web Inspector ist eine Web Application.
  • Der Debugger Server lieftert per HTTP HTML, JavaScript wie CSS aus.
  • Sobald die Application geladen ist wird ein WebSocket zu http://localhost:9222/json geöffnet
  • Der Debugging Port ist für jeden offen, insofern nicht durch Firewall geschützt.
  • Neue Remote Debugging Sessions ersetzen evtl. bereits laufende Debug-Sessions
  • Web Inspector Remote läuft derzeit nur in WebKit Browsern einwandfrei

In iPhone oder Android-WebKits sucht man den Debugger derzeit noch vergebens (about:debug), auch wenn es bereits einige ROMs für Android mit Web Inspector Support gibt. Blackberrys Playbook hingegen besitzt schon entsprechende WebKit Funktionalität.

Der Debugger bietet für den Browser eine vereinfachte, aber noch experimentelle JavaScript API, die z.B. auch durch Chrome Extensions angesprochen werden kann. Nach Google’s Vorstellungen sollen damit auch WebIDEs wie Cloud9 zum bereits integrierten JavaScript Debugger (lib-v8debug) einen vollwertigen “WebInspector” erhalten.

Google/Webkit sind nicht die ersten

Opera demonstrierte bereits 2008 mit DragonFly und Scope einen funktionierenden Remote Debugger, mit dem es möglich ist sich an an einen Opera Mobile oder auch Desktop Opera via TCP-Port ranzuhängen und nicht nur JavaScript zu debuggen. Nachteil an der ganzen Sache: Im Mobile Web dominiert derzeit WebKit.

Firebug Crossfire

Ein ähnliches Projekt existiert seit Anfang diesen Jahres mit Firebug Crossfire, was ähnliche Möglichkeiten bieten soll. Zudem unterstützen die JavaScript Development Tools (JSDT) für Eclipse bereits Crossfire. Derzeit befindet sich das Projekt jedoch noch in der Alpha-Phase, aber darf bereits getestet werden.

Weitere JavaScript Debugging Plugins

Für den, der nodejs debuggen muss, gibt es mit dem NodeInspector eine schicke Lösung, mit der es möglich ist, dies bequem im Browser zu erledigen. NodeInspector ist wie ebenfalls wie Weinre eine Adaption von WebInspector.

Für JavaScript Debugging in der IDE, d.h. bequem Breakpoints in den Quelldateien des geöffneten Projekts setzen, haben wir zum einen die ChromeDevTools als Eclipse-Plugin. Zum anderen hat IntelliJ mit IDEA 10.5 und PHPStorm 3 das V8 DebuggerProtocol bereits implementiert.

Eine weitere einfache JavaScript-Konsole stellt z.B. JSConsole bereit, dass zum Debuggen von iPhone oder Android-Mobile Apps benutzt werden kann.

03.12. Setting up an own QA Environment for Javascript

Nearly every PHP project comes up with a great set of tools to assure the quality of source code; unit tests are a no longer a „nice to have“ feature, they are common components in new projects. While unit tests help you to provide solid interfaces and proof the functionality of a certain method, there is a long list of tools that check the quality of the source code itself with many different metrics. Each of these mentioned tools reports its results into a XML file, which can easily be interpreted by a continuous integration server like Jenkins. The benefit is enormous: After every commit to your version control system your continuous integration server triggers the execution of the tests and the source code quality analysis and shows the result in meaningful diagrams. As a developer you get a direct feedback and you can make a prediction on the status of the entire project, because if even the smallest units work fine, there is a good chance that the whole system runs stable.
Weiterlesen

Remote Debugging mobiler Webanwendungen

Mobile Anwendungen liegen im Trend.
Neben den nativen Apps gibt es auch noch die Webapps, also speziell für mobile Geräte angepasste Webseiten, basierend auf Javascript, HTML und CSS.

Eine Möglichkeit, plattformübergreifende Webapps zu erstellen bietet das Javascript Framework jQuery Mobile, mit dem es möglich ist, auf Events von mobilen Geräten zu reagieren, wie etwa Touch Gesten, das Kippen des Smartphones und vielen weiteren (siehe jQuery Mobile Doku).

Nachdem man eine solche Webapp geschrieben hat testet man diese üblicherweise auf allen Geräten die unterstützt werden sollen und veröffentlicht entsprechende Anwendung nach erfolgreichen Tests.

Da man nur in den seltensten Fällen für alle unterstützten Smartphones auf echte Geräte zurückgreifen kann, nutzt man hier entsprechende Emulatoren um das Verhalten nicht vorhandener Testgeräte zu simulieren.
In der Theorie sollte spätestens nach diesen Tests nichts mehr schief gehen.

In der Realität kann es aber vorkommen das sich Emulator und echtes Gerät unterscheiden und sei dies nur in Kleinigkeiten wie Netzstabilität oder das etwas im mobilen Browser fehlerhaft interpretiert wird.
Weiterlesen

Javascript best practises: debugging und logging Vortrag@Mayflower-München

Am kommenden Donnerstag, den 25.03.2010 findet wieder ein öffentlicher Vortrag im Mayflower Büro in München statt (Mannhardtstraße 6, S-Bahn Isartor).
Beginn ist um 18:00 Uhr, Thema des Vortrags ist „Javascript best practises: debugging und logging„.

Lange Jahre wurde Javascript von vielen Entwicklern nicht so ernst genommen. Durch den vermehrten Einsatz von AJAX und der einfachen Handhabung von Javascript-Frameworks und Libraries ist die Akzeptanz gestiegen und Javascript ist aus der Webentwicklung nicht mehr wegzudenken. Unter dem Titel „Best Practises- Debugging und Logging JS“ zeigt uns Martin Ruprecht Mittel und Wege, wie man effektiv die Fehlersuche mit Javascript betreibt.

Die „Donnerstags-Vorträge“ werden sowohl in München als auch in Würzburg gehalten. Bei Interesse einfach das Blog beobachten, um auf dem Laufenden zu bleiben!
Wir freuen uns auf viele Teilnehmer!

Euer Weg zu uns