Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Webseiten restaurieren und optimieren: Jede Woche neu

So nutzen Sie Firefox für das Feintuning Ihrer Webseiten

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Webseiten sind heute einfach zu erstellen und auch schnell live gestellt - doch bereits zum Start sollten Sie als Betreiber für die Zukunft gewappnet sein: Wie können Sie Ihre Inhalte über einen längeren Zeitraum "frisch" halten? Wie lassen sich Zugriffszeiten optimieren? Wie reagiere ich auf aktuelle Designtrends und bessere Bandbreiten? Wie schütze ich mich vor Datenverlust und Hacker-Angriffen? Antworten und Hilfe zu diesen und vielen ähnlichen Fragen finden sie zuhauf in dieser praktischen Tipp-Serie.
05:05
  Lesezeichen setzen

Transkript

Jeder große Browser bringt in der Zwischenzeit eigene Werkzeuge mit, mit deren Hilfe Entwickler Webseiten direkt im Browser testen können. Firefox ist einen Schritt weitergegangen und hat einen eigenen Browser für Entwickler entworfen, mit dessen Hilfe wir unsere Webseiten testen und auf Herz und Nieren überprüfen können. Sehen wir uns diesen speziellen Browser einmal etwas genauer an. Wenn Sie auf die Suche nach der Firefox Developer Edition gehen, landen Sie über kurz oder lang auf dieser Seite. Es ist eben ein Mozilla-Projekt und prinzipiell ist es der Firefox, wie wir ihn auch kennen, eben aber erweitert um einige Test- und Entwicklermodi, die uns das Leben doch um einiges leichter machen. Sie bekommen auf der Projektseite auch gleich die Vorzüge präsentiert und haben für jedes einzelne Feature auch kleine Lernvideos, mit deren Hilfe Sie sich dann in den Umgang auch einarbeiten können, wobei vieles davon sehr intuitiv in der Bedienung ist. Sie haben die Möglichkeit, auf die neuen grafischen Möglichkeiten von CSS3 und HTML5 zu reagieren. Sie haben auch die Möglichkeit, sich mit diesen Challenger, den neuen Tools, sich spielerisch zu nähern. Dann sind neu dazugekommen spezielle Werkzeuge, die die Leistung einer Webseite messen helfen oder Sie haben eine Erweiterung des klassischen Seiteninspektors, zum Beispiel durch die Stilbearbeitung. Und stellvertretend für all diese anderen Möglichkeiten möchte ich Ihnen jetzt diese Stilberatung zeigen, vielleicht anhand einer kleineren Seite, nicht gleich der Firefox-Seite selbst. Und zwar habe ich hier diese bergwelten.eu-Seite und kann jetzt entweder über eine Tastenkombination, die wir eh schon auch von anderen Entwicklertools kennen -- Strg+Umschalten+I --, mir die Werkzeuge einblenden. Und dann wechsle ich auf die Stilbearbeitung. Bei der Stilbearbeitung habe ich die Möglichkeit, mir das CSS einer Seite genauer anzuschauen. Aber nicht nur das; ich bekomme Hinweise auf die Regeln, auf die Anzahl der verwendeten Regeln, die hier jetzt wie gesagt sehr übersichtlich sind, und ich habe eine CSS-Datei. Und würde ich jetzt Anpassungen machen wollen oder Anpassungen ausprobieren wollen, so kann ich wie bei anderen Entwicklungsumgebungen auch agieren, das heißt, ich kann hier direkt hineinschreiben. Wenn ich jetzt die H1-Überschrift größer haben möchte, kann ich den Wert verändern. Ich sehe auch das Ergebnis sofort auf der Seite. Aber was ich spannend finde, ist die Möglichkeit, dass ich hier gleich sagen kann Speichern und dann die Möglichkeit habe -- sollte ich noch lokal arbeiten --, mein Ergebnis zu überschreiben, oder ich kann mir eine eigene neue CSS-Datei herunterladen, die ich dann später noch weiter anpassen und zurück auf den Server laden kann. So, ich breche das jetzt aber ab. Sie sehen aber, wie komfortabel hier das Testen dann plötzlich werden kann, weil Sie sofort Auswirkung und Einfluss auf das Ergebnis haben. Eine andere Möglichkeit, die auch noch sehr spannend ist, ist zum Beispiel die Netzwerkanalyse. Sie haben also die Möglichkeit, eine Seite auch hinsichtlich der verwendeten Anfragen zu kontrollieren. Und jetzt in diesem Fall ist es wieder meine CSS-Datei, die ich dann unter die Lupe nehmen möchte. Ich kann hier jetzt eine Performance-Analyse starten und bekomme jetzt zurückgegeben einerseits die Dauer ohne gecacheter Seite und dann die Dauer mit gecacheter Seite. Und ohne noch weiter genauer auf diese Analyse einzugehen, sehen Sie, dass einen Mörderanteil meine Bilder, die ich auf dieser Seite verwende, in Anspruch nehmen und ich kann da auf jeden Fall noch gut nachrüsten. Sie sehen aber auch ganz gut aufgeteilt die einzelnen Elemente, die diese Seite ausmachen, in dem Fall wie gesagt sehr übersichtlich. Und sollten Sie jetzt also ein größeres Projekt in Angriff nehmen, dann ist diese Netzwerkanalyse sehr aufschlussreich, wenn es um die Anfragen geht, die an einen Server gestellt werden. Das war jetzt ein kleiner, sehr schneller Überblick über die Möglichkeiten dieses Developer-Firefox. Tauchen Sie ruhig in die Möglichkeiten ein und machen Sie sich schlau. Es lohnt sich. Und vor allem in der Testphase für Seiten ist es eine sehr wertvolle zusätzliche Möglichkeit.