Debugging-Werkzeuge für alle Browser (HTML, CSS, Javascript)

Exzellenter Artikel
6 | 13 Kommentare | 84039 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Debugging-Werkzeuge für alle Browser (HTML, CSS, Javascript)" mit Ihrem Wissen!

Hier stellen wir die wichtigsten Browser-Entwicklungswerkzeuge zum Erstellen und Debuggen von Javascript, HTML und CSS vor. Jedes der Programme hat eigene Vorzüge und einen eigenen Fokus.

Anzeige Hier werben

Tipp fürs Debuggen von HTML, CSS und Javascript

Als bester Browser zur Entwicklung von Webseiten hat sich wohl der Firefox qualifiziert: die für ihn verfügbaren Erweiterungen erfüllen einem in dieser Hinsicht fast jeden Wunsch. Es empfiehlt sich deshalb die Seite im Firefox zu entwickeln und danach erst in anderen Browsern nur die browserspezifischen Fehler zu beheben.

Firefox

Für den Firefox gibt es dank der guten Erweiterbarkeit eine Reihe von Werkzeugen für Webentwickler. Wir stellen hier die wichtigsten Entwicklungswerkzeuge vor. Auf der Firefox Erweiterungsseite gibt es eine komplette Liste der Werkzeuge für Entwickler.

Firebug (Javascript, HTML, CSS)

Bild zu Debugging-Werkzeuge für alle Browser (HTML, CSS, Javascript)
CSS anzeigen und bearbeiten in Firebug
Bild zu Debugging-Werkzeuge für alle Browser (HTML, CSS, Javascript)
Javascriptfehler im Firebug

Der König unter den Debuggern. Er kann fast alles: Javascript debuggen, CSS analysieren, HTML, Quellcode verändern, Dimensionen von Elementen anzeigen. Firebug dürfte ein Grund sein, warum viele Entwickler Firefox als primären Browser zum Entwickeln ihrer Webseite benutzen. Ein Muss für jeden Webentwickler.

Firebug bietet alle erdenklichen Funktionen:

  • CSS Klassen von bestimmten Elementen anzeigen, samt Vererbung und Überschreibung. CSS sogar veränderbar und einzelne Eigenschaften deaktivierbar
  • Größe von Elementen
  • Javascript Console
  • Javascript Debugger
  • HTML Elementbaum anzeigen und verändern
  • Aufschlüsselung der Ladezeit einer Seite
  • DOM durchforsten

WebDeveloperToolbar (HTML, CSS, Cookies, ...)

Die WebDeveloperToolbar für den Firefox vereint zahlreiche Funktionen in einer Erweiterung. Praktisch sind vor allem die Links zu HTML- und CSS-Validatoren, bearbeiten und anzeigen von Cookies, einfacher Deaktivierung von CSS/Javascript, Fenstergröße ändern um zu sehen wie die Webseite auf anderen Auflösungen aussieht.

Bild zu Debugging-Werkzeuge für alle Browser (HTML, CSS, Javascript)
Ein Ausschnitt aus der Webdeveloper Toolbar
Bild zu Debugging-Werkzeuge für alle Browser (HTML, CSS, Javascript)

HTML-Validator (HTML)

Der Validator zeigt einem Mittels eines Icons sofort an, wenn die aktuelle Seite nicht valide ist.

Opera

Standardmäßig enthält Opera eine Fehlerkonsole, die CSS, Javascript und XML Fehler anzeigen kann.

Opera Dragonfly (Javascript Debuger, HTML, CSS, Konsole)

Seit Mai 2008 gibt es Opera Dragonfly , ein an Firebug angelehntes Javascript-, HTML-, DOM- und CSS-Debug Werkzeug. Dazu bekommt man noch eine bessere Entwickler-Konsole in der Fehler und Debug-Meldungen ausgeben kann. Das Produkt ist noch in eine frühen Alpha-Version. Interessanterweise wurde das Werkzeug unter einer BSD-Lizenz veröffentlicht. Es ist eine Mischung aus normalem Programm und Web-Applikation und aktualisiert sich stets automatisch. Opera Dragonfly kann zusammen mit Opera 9.5 Beta heruntergeladen werden.

Safari

Debugmenü (Javascript, HTML, ...)

Das Debugmenü im Safari bietet einige Werkzeuge, wie eine Javascript Console und eine Anzeige des DOM-Baums.

Seit Safari 3.1 kann das Developer-Menü einfach unter Bearbeiten → Einstellungen → Erweitert aktiviert werden.

Debug-Menü in Safari < 3.1

In älteren Versionen als Safari 3.0 muss man das Debug-Menü erst außerhalb des Browsers aktivieren.

Unter Mac OSX muss man dazu das Terminal öffnen und folgende Befehlszeile eingeben:

Debugmenü in Mac OSX aktivieren  
Text
1
defaults write com.apple.Safari IncludeDebugMenu 1

Wenn Safari dann das nächste mal gestartet wird, bekommt man ein Menü mit dem Namen Debug zu sehen.

Im Safari 3.0 für Windows muss man dazu die Datei Preferences.plist in C:\Dokumente und Einstellungen\BENUTZERNAME\Anwendungsdaten\Apple Computer\Safari\Preferences.plistöffnen und folgende Zeilen hinzufügen:

Preferences.plist  
HTML
1
<key>IncludeDebugMenu</key> <true/> 
Bild zu Debugging-Werkzeuge für alle Browser (HTML, CSS, Javascript)
Drosera Javascript Debugger

Drosera Javascript Debugger (Javascript)

Drosera ist der Javascript Debugger für alle auf Webkit basierende Browser. Er ist leider zur Zeit (November '07) noch nicht für Windows verfügbar.

Um den Javascript Dubugger zu installieren, muss man das Terminal öffnen und folgende Befehlszeile eingeben:

 
Text
1
defaults write com.apple.Safari WebKitScriptDebuggerEnabled -bool true

Im Webkit Wiki gibt es eine Anleitung für den Javascript Debugger und weitere Informationen.

Web Inspector (Javascript, HTML, Ajax, ...)

Bild zu Debugging-Werkzeuge für alle Browser (HTML, CSS, Javascript)
Der neue Web Inspector zeigt hier die Ladezeit der Webseite aufgeschlüsselt nach Dateien

Der Web Inspector bietet unter anderem die möglichkeit den Quelltext und einen Dom-Baum dessen anzuzeigen, Analyse der Ladezeiten und Beobachtung der Ajax Anfragen.

Um den Web Inspector zu aktivieren, muss man unter Mac OSX das Terminal öffnen und folgende Befehlszeile eingeben:

Webkit Web Inspector unter Mac OSX aktivieren  
Text
1
defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Unter Windows müssen in der Datei C:\Dokumente und Einstellungen\BENUTZERNAME\Anwendungsdaten\Apple Computer\Safari\WebKitPreferences.plist folgende Zeilen hinzugefügt werden:

Webkit Web Inspector unter Windows aktivieren  
XML
1
 <key>WebKitDeveloperExtras</key> <true/>

Um den Webinspector dann zu benutzen muss man auf irgendein Element in der Webseite rechtsklicken und auf Inspect Element gehen.

Internet Explorer

Internet Explorer Developer Toolbar (HTML, CSS)

Auf den ersten Blick erinnert die IE Developer Toolbar ein wenig an Firebug. Nachdem man das Tool durch einen Klick auf das Icon geöffnet hat, zeigt es zu Beginn einmal einen DOM-Inspektor an. Außerdem kann man hier auch HTML-Tags und CSS-Werte hinzufügen.
Im Menü kann man einige Funktionen anwenden, die wohl einigen aus der Web Developer Toolbar für den Firefox bekannt sein dürften: Access Keys anzeigen, Bilder deaktivieren, Bild-Pfad anzeigen, ALT-Text anzeigen, Cache löschen, Cookies deaktivieren und verschiedene Validatoren für HTML, CSS, Feeds, Links, etc.
Schön sind aber (auch) die Tools, hier kann man z.B. die Seite in verschiedenen Auflösungen testen oder einen ColorPicker starten.

Bild zu Debugging-Werkzeuge für alle Browser (HTML, CSS, Javascript)

Microsoft Script Debugger (Javascript)

Kostenloser Javascript Debugger von Microsoft. Sehr alt und nicht gut zu bedienen. Ein bessers Frontend dazu bekommt man mittels Companion.JS. Zeigt das Script und die Zeile in der der Fehler auftrat zusammen mit einem Stacktrace an.

Companion.JS (Javascript)

Bild zu Debugging-Werkzeuge für alle Browser (HTML, CSS, Javascript)
Fehlermedlung in Companion.JS

Kostenloser JS-Debugger für den Internet Explorer. Kann auch als Fehlerkonsole verwendet werden. Verwendet dort den gleichen Syntax wie Firebug (console.log).

Die Erweiterung bindet den Microsoft Script Debugger ins Browserfenster ein. Am unteren Fensterrand erscheint dann die Datei und die Zeile in der der Fehler auftrat, zusammen mit einem Stacktrace.

Desweiteren unterstützt das Programm die Firebug-Konsolenbefehle um eigene Debugmeldungen auszugeben.

DebugBar (Javascript)

Bild zu Debugging-Werkzeuge für alle Browser (HTML, CSS, Javascript)
DebugBar überwacht auch
HTTP-Verbindungen

Funktionen:

  • DOM Inspector: Baumansicht über die Webseite
  • HTTP Inspector: Zeigt die HTTP Anfragen an
  • Javascript Inspector et Javascript Console
  • HTML Validator
  • Cookies, Pipette, Screenshot machen

Kostenlos für nichtkommerzielle Nutzung. Kostet als Einzelplatzlizenz ca. 60 €.

Firebug Lite (Javascript)

Firebug Lite ist ein Skript, dass die Firebug-Konsole für alle anderen Browser als Firefox nachahmt.

Microsoft Script Editor

Der Microsoft Script Editor ist eine Weiterentwicklung des Microsoft Script Debuggers. Er ist kostenlos in Microsoft Office XP/2003/2007 und Frontpage enthalten.

Werkzeuge im IE8 (JS Debugger, Dom-Browser,...)

Der Internet Explorer 8 kommt mit schon fertig eingebauten Webdeveloper-Werkzeugen. Mit dabei ist ein komfortablerer Javascript Debugger, sowie ein Dom-Baum-Browser.

Bild zu Debugging-Werkzeuge für alle Browser (HTML, CSS, Javascript)
Der JS Debugger im Internet Explorer 8

Bisher funktioniert die DeveloperToolbar noch nicht mit dem IE8 Beta, ist aber wegen den vergleichsweise viel besseren neuen Werkzeugen nicht wirklich zu vermissen.

Microsoft Visual Studio (JS Debugger)

Die Entwicklungsumgebung bietet im Rahmen der Werkzeuge zur Webentwicklung einen Debugger, der sich an laufende Instanzen des Internet Explorers anbinden kann. Die Fähigkeiten der bestehenden Microsoftwerkzeuge werden dabei um die Features (IntelliSense, Objektbrowser, ...) der IDE erweitert.

Sinnvoll ist der Einsatz dieses Tools vor allem bei der Entwicklung von ASP.NET-Anwendungen, da es das Debugging der Server- sowie Clientseite in einer IDE vereint.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 4 Personen an der Seite "Debugging-Werkzeuge für alle Browser (HTML, CSS, Javascript)" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Debugging-Werkzeuge für alle Browser (HTML, CSS, Javascript)" hier bearbeiten.

Mitarbeiter
  • David Danier arbeitet seit mehr als neun Jahren im Bereich Web Programmierung und ist unter anderem Geschäftsführer der Webagentur Team23 sowie Webmasterpro.de.
  • arbeitet seit längerem als Webdesigner und vor allem -entwickler. Er ist Webmaster von Webmasterpro.de und leitet den Flashcounter-Service.
  • ist Schüler an einer HTL und beschäftigt sich gelegentlich mit dem Erstellen verschiedener Web-Applikationen.
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.

Kommentare: Debugging-Werkzeuge für alle Browser (HTML, CSS, Javascript)

Neuen Kommentar schreiben
Usability-Werkzeuge anfügen
Beantworten

Da gibt es doch auch noch Tests auf anderen Internetseiten bezüglich Barrierefreiheit, so wie diese BIENE-Tests - aber ich weiß natürlich nicht ob das dann noch im Browser ist und hierher passt. Ich weiß in jedem Fall von der web-accessibility-toolbar ich glaub für IE und Opera (http://www.webforall.info/papoo8/web/start-und-aktuelles/aktuelles-2007/wat-toolbar-2.0-auf-deutsch-erhaeltlich.html).

Jochen Bauer am 07.06.2008 um 11:44
Re: Usability-Werkzeuge anfügen
Beantworten

Da gibt es doch auch noch Tests auf anderen Internetseiten bezüglich Barrierefreiheit, so wie diese BIENE-Tests - aber ich weiß natürlich nicht ob das dann noch im Browser ist und hierher passt.

Würde ich in einen eigenen Artikel zu Webseitentests (Validierung, Barrierefreiheit, ...) zusammenfassen. Willst du das mal starten?

Ich weiß in jedem Fall von der web-accessibility-toolbar ich glaub für IE und Opera (http://www.webforall.info/papoo8/web/start-und-aktuelles/aktuelles-2007/wat-toolbar-2.0-auf-deutsch-erhaeltlich.html).

Könnte dann in dem Artikel erwähnt werden, wenns da mehr gibt kann das aber auch gerne in einen eigenen Artikel.

David Danier am 07.06.2008 um 12:21
Re: Usability-Werkzeuge anfügen
Beantworten

Da gibt es doch auch noch Tests auf anderen Internetseiten bezüglich Barrierefreiheit, so wie diese BIENE-Tests - aber ich weiß natürlich nicht ob das dann noch im Browser ist und hierher passt.

Würde ich in einen eigenen Artikel zu Webseitentests (Validierung, Barrierefreiheit, ...) zusammenfassen. Willst du das mal starten?

Ich weiß in jedem Fall von der web-accessibility-toolbar ich glaub für IE und Opera (http://www.webforall.info/papoo8/web/start-und-aktuelles/aktuelles-2007/wat-toolbar-2.0-auf-deutsch-erhaeltlich.html).

Könnte dann in dem Artikel erwähnt werden, wenns da mehr gibt kann das aber auch gerne in einen eigenen Artikel.

Nein, da müsste ich noch einiges nachschauen und dafür will ich mir gerade keine Zeit nehmen - bei mir liegt noch einiges auf Halde was ich vorher abarbeiten will.

Jochen Bauer am 07.06.2008 um 16:56
Firefox Empfehlung
Beantworten

Der Tipp zu Beginn ist ja wirklich Ansichtssache, da technisch gesehen Safari in Sachen implementierung der Standards mindestens so fortgeschritten ist wie Firefox (ACID (kann der Firefox das jetzt?)). Etliche professionelle Webentwickler arbeiten auf Macs, so wie es halt im grafischen Design die Regel ist, und da wird wohl in erster Linie auf Safari entwickelt, der schon lange Entwicklertools dafür hat.

In der Regel sieht eine Seite auf beiden Browsern gleich aus. Daher lässt sich meiner Meinung nach sagen: es ist lediglich eine Frage des Systems, da Firefox auf Macs praktisch unbrauchbar ist und Safari auf Windows ebenfalls, wobei sich beide Seiten bemühen, dies zu ändern.

Philipe Fatio am 02.12.2007 um 10:34
Re: Firefox Empfehlung
Beantworten

Ich rede hier vom Debuggen. Vor allem im Bereich Javascript (wie ich es aus leidlicher erfahrung weiß) ist das in allen Browsern ohne Firebug ein mühsames unterfangen und wirklich auf gar keinen Fall vergleichbar.

Aber auch CSS ist in keinem Browser (trotz der dortigen Entwicklerwerkzeuge) so unglaublich schnell und komfortabel wie im Firefox.
Durch Erweiterungen die von unabhängige Entwicklern ist halt ins Browserdebugging beim Firefox sehr viel Arbeit geflossen und das merkt man auch. Da zahlt sich die gute Erweiterbarkeit von Firefox aus.

Thomas H am 02.12.2007 um 11:04
Re: Firefox Empfehlung
Beantworten

Naja, es geht darum, wie gut sich Webseiten mit dem jeweiligen Browser debuggen lassen. Nicht wie gut Standards implementiert sind. Hier ist der Firefox derzeit dem Safari noch überlegen, was auch daran liegen kann, dass der Safari eben noch etwas jünger ist. Safari holt allerdings auch rasant auf, in naher Zukunft kann der Tipp also gerne lauten "Safari auf Macs, ansonsten Firefox". Ein wenig Zeit wird bis dahin allerdings noch verstreichen müssen denke ich.

David Danier am 02.12.2007 um 10:41
Re: Firefox Empfehlung
Beantworten

Meiner Meinung nach nicht, da Firefox sich wirklich scheisse anfühlt auf Macs und das ist wirklich nicht angenehm zum Entwickeln. Vielleicht weisst du ja was ich meine. Aber lassen wir das, ist ja nicht so wichtig. ;)

Philipe Fatio am 02.12.2007 um 10:48
Re: Firefox Empfehlung
Beantworten

[...] da Firefox sich wirklich scheisse anfühlt auf Macs [...]

Trotzdem sind die FF-Tools derzeit besser ;-)

Aber du hast recht, lassen wir das.

David Danier am 02.12.2007 um 11:08
firefox
Beantworten

der venkman von mozilla fehlt

Simon Bethke am 04.11.2007 um 22:01
Re: firefox
Beantworten

der venkman von mozilla fehlt

nachtengel06 am 14.01.2008 um 20:47
Re: firefox
Beantworten

Der Venkman ist auch nicht sehr gut und wird durch den Firebug mehr als ersetzt.

Thomas H am 05.11.2007 um 14:43
Re: firefox
Beantworten

Der Venkman ist auch nicht sehr gut und wird durch den Firebug mehr als ersetzt.

Und das ist deiner Meinung nach n Grund diesen totzuschweigen?

Simon Bethke am 05.11.2007 um 16:26
Re: firefox
Beantworten

Ja. Ist ja nicht wirklich von Nutzen. Wenn du willst kannst du ja was dazu schreiben.

Thomas H am 05.11.2007 um 19:21