2190904

Die wichtigsten Analyse- und Debugwerkzeuge für Webentwickler unter Linux

04.05.2016 | 14:53 Uhr |

Etwas versteckt besitzen die populärsten Browser für Linux spezielle Entwicklungswerkzeuge, die nicht nur Profis gute Dienste leisten. Wir stellen die wichtigsten Funktionen in Chrome und Firefox vor.

Design und Entwicklung ansprechender Webseiten werden immer anspruchsvoller. Die Darstellung der Seiten muss für eine Vielzahl unterschiedlicher Geräte optimiert werden, und selbst die Ladezeit der Seiten hat heute Einfluss auf das Ranking in den Suchmaschinen. Um Webentwicklern ihre Arbeit zu erleichtern, ist in Chrome und Firefox eine Reihe von Werkzeugen eingebaut, die weit über die Darstellung von HTML-Seiten hinausführen.

Die Entwicklertools in Google Chrome

Chrome hält wie Firefox die Entwicklertools über Rechtsklick und „Element untersuchen“ parat. Der reguläre Start im Menü führt über „Weitere Tools -> Entwicklertools“. Damit öffnen Sie auf der rechten Seite des Chrome-Fensters eine skalierbare Entwickleransicht mit HTML-Code, Styles und Seitenstruktur. Der Funktionsumfang ähnelt dem von Firefox. Hier wie dort sind die Funktionsbereiche übersichtlich in Registern angeordnet. Über den Eintrag „Network“ verfolgen Sie die Ladezeiten und die Reihenfolge der Elemente, aus denen die aktuelle Seite zusammengesetzt wurde. In der Statusleiste unten sind auf einen Blick das Dateivolumen und die Ladezeit ersichtlich. Diese Logdatei kann auch separat gespeichert werden, um sich später in Ruhe Gedanken darüber zu machen, wie sich der Vorgang optimieren lässt.

Lese-Tipp: Validierungs-Tools für HTML, CSS und Javascript

Um einzelne Elemente der Seite zu untersuchen, klicken Sie auf das „Select“-Symbol links oben und zeigen dann mit der Maus auf den gewünschten Bereich der Webseite. Im unteren Teil des Fensters zeigt Ihnen Chrome dann visuell die Position des Objekts im Objektstapel der Seite, inklusive der Abmessungen. Außerdem werden die verwendeten Stile aufgezeigt. Auch die Live-Entwicklung ist mit den Developertools möglich. Die Anzeige der Seitenelemente im oberen Bereich des Fensters ist interaktiv. Wählen Sie dort einen CSS-Eintrag aus, kann er bearbeitet werden. Der Editor unterstützt auch die rechte Maustaste, um schneller neue Attribute anzulegen oder den Quelltext zu bearbeiten. Integriert wurde zusätzlich eine kleine Suchfunktion, die sich etwas unscheinbar in der kleinen Eingabezeile im Register „Styles“ verbirgt. So gelangen Sie schneller zu den Elementen, die Sie bearbeiten wollen.

Wenn Sie in Ruhe mit einem externen Editor eine Datei bearbeiten wollen, wechseln Sie am besten in das Register „Sources“. Hier listet Chrome die Dateien auf, die in der Seite referenziert sind. Die Elemente sind dabei nach Verzeichnissen geordnet. Mit einem Klick auf die Datei wird deren Inhalt in einer Vorschau angezeigt. Mit einem Rechtsklick und dem Kommando „Save“ aus dem Kontextmenü legen Sie eine lokale Kopie der Datei an. Sehr aussagekräftig ist die Ansicht der Website mit unterschiedlichen Geräten. Mit einem Klick auf das Smartphone-Symbol aktivieren Sie diese Ansicht. Über das Listenfeld am oberen Rand bestimmen Sie das Gerät (etwa „Samsung Galaxy S4“), mit dem Sie die Seite betrachten wollen. Nützlich ist hier ebenfalls die Möglichkeit, die Übertragungsgeschwindigkeit des Netzwerks zu verändern. Um sich die Seite unter geänderten Bedingungen anzusehen, ist ein Reload der Seite erforderlich (Taste F5).

Achten Sie stets auf die Menüleiste. Sie zeigt Fehler deutlich mit einem roten Symbol an. Die Erläuterungen und Fehlermeldungen erscheinen dann in der Konsole im unteren Bereich des Fensters.

Entwicklerkonsole von Firefox: Die Konsole zeigt Fehler mit roter Markierung.
Vergrößern Entwicklerkonsole von Firefox: Die Konsole zeigt Fehler mit roter Markierung.

Die Entwicklertools in Mozilla Firefox

Im Browser Firefox kommen Sie mit Rechtsklick und „Element untersuchen“ jederzeit an Analysewerkzeuge. Die Tools sind aber auch im Hauptmenü über „Extras -> Web-Entwickler -> Entwickler-Symbolleiste“ zu erreichen. Nach dem Auslösen der Funktion erscheint zunächst nur am unteren Ende des Bildschirmfensters eine zusätzliche Eingabezeile. Sie übernimmt die Rolle einer kleinen Konsole, über die Sie Funktionen direkt aufrufen können. Geben Sie dort beispielsweise einfach die beiden Buchstaben „sc“ ein, wird die Eingabe um den Eintrag „screenshot”“ ergänzt. Wie im Linux-Terminal bringt Sie ein Druck auf die Tab-Taste zur nächsten Option. Im Falle des Screenshots können Sie so etwa den Dateinamen der Aufnahme eintragen. Diese Eingabezeile hat mit der Linux-Konsole ferner gemeinsam, dass sie die Hilfe zu jeder Funktion bereithält. Mit „help“ werden Ihnen die angebotenen Kommandos aufgelistet. Kombinieren Sie „help“ mit einem Kommando, können Sie die passenden Optionen und Parameter nachlesen.

Lese-Tipp: Wir stellen Ihnen den HTML-Editor Bluefish in der Praxis vor

Sie sind aber nicht auf diese Konsole allein angewiesen. Klicken Sie auf der rechten Seite auf das Symbol mit dem Schraubenschlüssel, blendet der Browser im unteren Teil des Fensters weitere Werkzeuge ein. Wollen Sie etwa überprüfen, ob die Darstellung der Website sich an die Auflösung eines Endgeräts anpasst, klicken Sie auf das Icon neben dem Sternsymbol. Jetzt können Sie bequem über ein Listenfeld die gewünschte Auflösung wählen. Sobald Sie eine Website mit aktivierter Entwickleroption aufrufen, wird diese automatisch auf Fehler untersucht. Auffälligkeiten wie Ladefehler oder Sicherheitsprobleme sind so schnell zu erkennen.

Interessant sind die Resultate im Register „Netzwerkanalyse“. Dort werden Ihnen alle referenzierten Objekt und Quellen der Seite aufgelistet. Sie erhalten Rückmeldung über die Dateigrößen und deren Ladezeiten. Das hilft bei der Optimierung.

Auflistung der Netzwerkaktivitäten zeigt, welche Zeit die Darstellung einzelner Elemente kostet.
Vergrößern Auflistung der Netzwerkaktivitäten zeigt, welche Zeit die Darstellung einzelner Elemente kostet.

Links neben dem Register für den „Inspektor“ ist eines der leistungsfähigsten Werkzeuge untergebracht. Damit untersuchen Sie in Echtzeit ein Element der aktuellen Seite. Klicken Sie mit der Maus darauf, zeigt Ihnen das Werkzeug weitere Informationen zu diesem Element. Dazu zählen die verwendete Schriftart, Details zum Stylesheet oder auch die Position im Objektstapel der Seite selbst. Das Register „Stilbearbeitung“ schließlich ist für alle Nutzer, die in Echtzeit mit dem Layout der Seite experimentieren wollen. Die enthaltenen Stilanweisungen werden ausgelesen und können dann direkt verändert werden. Zeigen Sie auf einen Wert in der linken Liste, wird die Speicherfunktion eingeblendet. So erstellen Sie unmittelbar eine CSS-Datei, die Sie später etwa per FTP wieder auf den Server übertragen können, um Ihre Änderungen dauerhaft auf das Layout anzuwenden. Die Funktion eignet sich aber auch perfekt dazu, eine mit einem externen Werkzeug definierte Stildatei auf die Website anzuwenden, um sich vorab vom Ergebnis der eigenen Arbeit zu überzeugen. Dazu nutzen Sie die Funktion „Importieren“ in der Stilbearbeitung.

Tipp: Die Entwicklertools von Firefox können Sie mit der Installation der Erweiterung Firebug noch deutlich erweitern. Wie alle Erweiterungen erhalten Sie Firebug über das Menü „Extras -> Add-ons“.

Lesen Sie dazu unseren Artikel: Firebug - Webseiten untersuchen mit genialem Firefox-Addon

0 Kommentare zu diesem Artikel
2190904