Tag: firefox

201410Nov

Firefox Developer Edition: Webbrowser für Webentwickler

Anlässlich des zehnjährigen Jubiläums von Firefox hat Mozilla heute die Firefox Developer Edition veröffentlicht, die speziell an Webentwickler gerichtet ist und verschiedene Tools zum Entwickeln moderner WebApps bietet. Der neue Browser soll vor allem das plattformübergreifende Arbeiten von einem Gerät aus erleichtern, was durch das Add-On "Valence" (zuvor: Firefox Tools Adapter) erreicht wird. Dabei handelt es sich um eine Erweiterung, welche die Anbindung an Android-, iOS- oder Firefox OS-Geräte (also Tablets und Smartphones) ermöglicht.

Firefox Developer Edition

Die Firefox Developer Edition besteht also in erster Linie aus dem aktuellen Firefox-Build, der WebIDE und dem Valence-Add-On: Damit können lokale WebApps aber auch Remote-Projekte mit den gängigen Firefox-Tools (Web-Konsole, Seiten-Inspektor, Javascript-Debugger, Netzwerkanalyse, Audio-Editor, etc.) untersucht werden. Die WebIDE enthält verschiedene Integrationen von Laufzeitumgebungen wie beispielsweise einem Simulator, einem Remote-Browser, einer Chrome Desktop-Anwendung, einer Firefox OS-App oder einer normalen Website. Für das Debuggen von Android-Apps wird natürlich ein entsprechender USB-Treiber für das angeschlossene Smartphone benötigt und die Android Debug Bridge (ADB) muss das Gerät per adb devices auflisten. Unter Mac OS X gestaltet sich der Prozess für iDevices etwas einfacher. Besteht schließlich eine USB-Verbindung, können die Tabs des Smartphone-Browsers mit dem Inspektor oder der Konsole bearbeitet werden. Schließlich ist noch ein Tool zur schnellen Kommunikation enthalten: Per Klick können Links erzeugt werden, die dann an andere Entwickler weitergeschickt werden können, wodurch eventuelle Probleme direkt im Browser-Chat diskutiert werden können.
Die Developer Edition von Firefox ersetzt damit den Aurora-Build und wird alle 6 Wochen neue Funktionen erhalten.

201403Nov

Mozilla: Neuer Browser von Entwicklern für Entwickler

Der Browserhersteller Mozilla hat schon seit geraumer Zeit eigene F12-Entwicklertools in seinen Browser integriert, die einen Inspektor, einen Debugger, eine Konsole sowie Laufzeit- und Netzwerkanalyse-Tools beinhalten. Bei diesen Werkzeugen soll es laut einem aktuellen Blog-Eintrag jedoch nicht bleiben: Am Montag, dem 10. November wird es soweit sein und Mozilla wird einen neuen Browser vorstellen, der speziell an Webentwickler gerichtet ist. Es geht dabei vor allem um den Entwicklungsprozess, der auch das Testen auf verschiedenen Plattformen und Geräten beinhaltet. Dieser Prozess ist in der Tat sehr zeitaufreibend, wenn eine Seite beispielsweise unter Android 4.0, 4.1, 4.2, 4.3, 4.4 sowie iOS 6, 7 und 8 getestet werden soll und dabei noch verschiedene Smartphones und Tablets mit unterschiedlichen Auflösungen und Pixeldichten ins Spiel kommen.

Firefox Developer Tool - Netzerkmonitor

Viele Informationen gibt der Mozilla-Beitrag nicht preis. Lediglich die Integration der WebIDE sowie dem Firefox Tools Adapter wird genannt. Man darf also gespannt sein, was Mozilla an diesem Montag auf den Markt bringen wird.

201312Nov

Firefox: Shader Editor ermöglicht Echtzeit-Bearbeitung

Für OpenGL- bzw. WebGL-Entwickler dürfte dank Mozilla ein kleiner Traum in Erfüllung gehen: Ab Firefox 27, der momentan über den Nightly-Kanal heruntergeladen werden kann (inzwischen schon Version 28), wird in den Firefox Developer Tools ein "Shader Editor" integriert sein. Wie in diesem Artikel nachzulesen ist, kann der Shader Editor über die Einstellungen des Entwickler-Panels aktiviert werden. Die Seite muss neu geladen werden, damit der WebGL-Kontext erkannt werden kann. Ist dies geschehen, können alle einzelnen Shader-Programme der laufenden WebGL-Anwendung in Echtzeit bearbeitet oder deaktiviert werden. Dabei ist besonders hilfreich, dass die Codes des Vertex- und Fragment-Shaders separat voneinander bearbeitet werden können.

Firefox - Live editing WebGL shaders with Firefox Developer Tools

Allein die "Epic Citadel"-Anwendung, eine Web-Demo der Unreal Engine, verwendet über 200 verschiedene Shader — also kleine Programme, welche direkt auf der GPU der Grafikkarte ausgeführt werden und grafische Echtzeit-Effekte erlauben. Mit Shadern lassen sich hochkomplexe Visualisierungen und Animationen umsetzen, die allerdings nicht immer leicht zu verstehen sind. Daher stellt der Shader Editor eine große Hilfe dar, wenn es um das Verständnis eines Shader-Programms geht. Wer den Editor ausprobieren will, kann beispielsweise auch die Shader der GLSL Sandbox verändern und die Auswirkungen sofort betrachten.

201322Mai

Firefox 23: Firefox Developer Tool mit Netzerkmonitor

Die integrierten Entwicklerwerkzeuge, die seit Version 10 in Firefox zur Grundausstattung zählen, bekommen im August mit Version 23 des Browsers ein Update spendiert, in dem auch ein Netzwerkmonitor enthalten sein wird. Wie im Mozilla Hacks-Blog zu lesen ist, wird es zudem einen "Remote Style Editor" geben, mit dem sich eine Seite auch auf mobile Geräten in Echtzeit anpassen lässt. Voraussetzung auf dem Endgerät dafür ist ein installierter Firefox, der etwa für Android vorliegt.

Firefox Developer Tool - Netzerkmonitor

Weiterhin wird es ein "Option Panel" geben, in dem sich bestimmte Tools an- und ausschalten lassen. Auch ein erster Support für SourceMaps wird integriert sein, wodurch sich komprimierter JavaScript-Code in ursprünglicher Form anzeigen und mit Breakpoints versehen lässt. Wer sich selbst einen Eindruck von den Features verschaffen möchte, kann einfach Firefox Aurora installieren und ausprobieren.
Doch nicht nur das Developer Tool von Firefox bekommt Neuerungen: Auch der immer noch unangefochtene Firebug wird stets aktualisiert und erhält mit Version 1.12 ebenfalls interessante Funktionen.

201305Mai

Unreal Engine 3: Erste Demo der HTML5-Version

Erst im März berichtete ich über die Portierung der Unreal Engine 3 in den Webbrowser, die Epic Games zusammen mit Mozilla realisiert hatte. Die HTML5-Demo war allerdings nur Besuchern der GDC 2013 vorbehalten. Seit letzter Woche kann die HTML5-Version der "Epic Citadel" nun auch öffentlich getestet werden. Bei der HTML5-Demo handelt es sich um die dreidimensionale Umsetzung einer mittelalterlichen Burg, die virtuell erkundet werden kann. Um die Demo ausführen zu können, wird ein Nightly Build von Firefox empfohlen, da in dieser Version spezielle JavaScript-Anpassungen enthalten sind, die für einen flüssigen Ablauf der WebGL-Demonstration sorgen.

Epic Citadel HTML5

In den FAQ der HTML5-Demo schreibt Epic Games Genaueres über die JavaScript-Erweiterungen und die unterstützten Browser. Unter Google Chrome läuft die Demo zwar, aber es kommt zu Abstürzen. Unter Safari oder Opera kann die Demonstration derzeit nicht angesehen werden, da die Browser nicht mit der Engine kompatibel sind. Es handelt sich also noch um eine sehr frühe Demo, die aber schon jetzt zeigt, was mit WebGL möglich ist. Erst kürzlich wurde bekannt, dass Microsoft auch in Internet Explorer 11 WebGL unterstützen will.

201328Mär

Mozilla: Unreal Engine 3 nativ im Webbrowser nutzbar

Wer den Mozilla-Blog verfolgt, wird wahrscheinlich schon die Meldung über die Unreal Engine 3 gelesen haben: Mozilla und Epic haben es in einer ersten Demo geschafft, die 3D-Engine in den Browser zu portieren. Das Ganze ist ohne Plugin möglich und basiert auf dem Javascript-Subset asm.js sowie der JavaScript-Engine-Anpassung "Odinmonkey" (Firefox Nightly), welche das Ausführen von JavaScript-Anwendungen beschleunigt – JavaScript-Code kann dadurch halb so schnell wie nativer Code, also in der Geschwindigkeit von Java oder C# ausgeführt werden. Durch asm.js werden strikte Typen für Float- und Integer-Werte und ein virtueller Heap-Speicherbereich eingeführt, der mit einem typisierten Array realisiert wird. Etwas Ähnliches gab es kürzlich schon mit dem Mozilla-Compiler LLJS, der zudem Pointer oder Structs bietet.

The Mozilla Blog - Mozilla is Unlocking the Power of the Web as a Platform for Gaming

Die Portierung der Unreal Engine 3 (über 1 Million Zeilen Code) basierte auf der Verwendung von Emscripten, einem LLVM-zu-JavaScript-Compiler. In dem Blog-Eintrag findet sich momentan nur ein Video der Demonstration und der Hinweis, dass man bei Mozilla derzeit mit Disney, EA und ZeptoLab zusammenarbeitet, um die Performance-Verbesserungen in modernen Browser-Spielen unterzubringen. Wer die GDC 2013 besucht, kann die Demo in Firefox am nVidia-Stand testen.
Das Portieren einer renommierten 3D-Engine in den Browser war eigentlich nur eine Frage der Zeit, denn erst im Januar wurde bereits mit BananaBread ein Ego-Shooter gezeigt, der auf WebGL und JavaScript basiert. Die Demo aus dem Video zeigt übrigens die Epic Citadel, die auch schon für die Flash-Version der Engine (Stage 3D) genutzt wird.

201308Jan

BananaBread: 3D-Ego-Shooter auf WebGL-Basis

Dass WebGL eine vielversprechende Technologie darstellt, zeigen schon seit geraumer Zeit die Demos von Three.js, die inzwischen einige interessante Effekte aufzeigen, die durch OpenGL ermöglicht werden (Shader, Bump-Maps, Normal Mapping, usw.). Einen ersten 3D-Ego-Shooter, der Gerbrauch von WebGL und der Sauerbraten-Engine (Cube 2) macht, stellt BananaBread dar. Das Projekt ist in C++ und OpenGL entwickelt worden und wird durch den LLVM-Compiler Emscripten in JavaScript und WebGL übersetzt.

BananaBread - 3D-Ego-Shooter auf WebGL-Basis

Das Spiel lässt sich in gewohnter Manier mit den Tasten W, A, S, D und der Maus steuern. Es gibt verschiedene Waffen und Levels, in denen der Spieler gegen Bots antreten kann. Es wurde sogar eine Third-Person-Ansicht integriert, die über die Taste 9 aktiviert werden kann. Die beiden Entwickler Alon Zakai und Ehsan Akhgari von Mozilla möchten mit dem Projekt zeigen, was mit WebGL und modernen Webbrowsern möglich ist.

201203Sep

Firefox: JSTerm als interaktives JavaScript-Terminal

In der aktuellen Beta-Version von Firefox (Version 16) steht unter Anderem eine neue Kommandozeile zur Verfügung, mit der sich unterschiedliche Aktionen durchführen lassen. So können verschiedene Funktionen des Browsers einfach über die Eingabe eines entsprechenden Schlüsselwortes aufgerufen werden. Beispielsweise lassen sich die Cookies einer Seite direkt bearbeiten, Elemente untersuchen, CSS-Stile editieren oder eine geöffnete Seite als Screenshot exportieren.
Die neuen "Web Developer Tools" von Firefox (seit Version 10), die durch ihr dunkles Erscheinungsbild auffallen, stellen künftig eine Alternative zu Firebug dar. Mit dem Inspektor, einem Debugger und der "Web Console" stehen komfortable Werkzeuge bereit, die den Firebug-Tools sehr ähnlich sind. Noch einen Schritt weiter geht Mozilla-Entwickler Paul Rouget, der mit seiner Firefox-Erweiterung JSTerm die Web Developer Tools von Firefox um eine interaktive JavaScript-Konsole erweitert.

JSTerm - Firefox JavaScript Terminal

Die Konsole versteht sich als Erweiterung der integrierten "Web Console" und vermittelt ein stärkeres Terminal-Gefühl. Neben der Autovervollständigung und Syntaxhervorhebung bietet die Konsole auch die Möglichkeit, DOM-Elemente und -Funktionen besser analysieren zu können. So können in einem separaten Bereiche alle zugehörigen Eigenschaften und Funktionen zu einem Objekt angesehen werden. Für Firefox-Extension-Entwickler dürfte der "Chrome-Modus" interessant sein, mit dem sich auch die Komponenten von Firefox selbst untersuchen lassen.